Setup Angular 4.2.4 with Visual studio 2015 And Run by Using F5
Setup Angular 4.2.4 with Visual studio 2015
1. Install Node version 4.6.x or
greater.
2. Npm 3.x.x or greater
3. Check version of node and npm
Now
go with command prompt and check node and npm version installed for cross check
after installation. Use below commands and press enter to see version details
node -v
example:
5.3.0
npm -v
example: v8.4.0
4. Install visual studio 2015 update 3
5. Configure environment setting for
node and npm.
Go in tools à Options à Projects and Solutions à External Web Tools
6. Install Type Script 2.2.0 or greater
for VS 2015. Check version of typescript with VS2015. Go with Tools à Extensions and Updates à Online template à search Typescript
Click on install
After
install it will show successfully installed message, showing as below screen
shot
if already install. Go in Help à About Microsoft Visual Studio àInstalled Products.
7. Now, Create asp.net web application with empty template without mvc.
8. Download angular quickstart files
from github.
9. Now, Extract files and go in quickstart-master folder. Copy src folder, bs-config.json, package.json, and tslint.json files. Paste all files into root directory of your web application and include them in project.
10. Now, Right click on package.json file
and restore packages. After successfully installation, check node_module folder
there or not. Keep in mind never include this folder in your project.
11. Now, we haveto run our project with
command window. Go with command window and go into root directory of your
project. Use below command to launch your application . It will launch tsc (type
script compiler) and launch lite server.
npm start
After this your application will
show in default browser as Hello Angular . We can
change it within
app.component.ts. Here our project is running through command
window.
12. I will prefer our project control by
F5 so we need do some configuration.
a. Make index.cshtml as startup up
project and run project. But Hello Angular ! will not come apart from Loading
AppComponent content here…
b. Now, launch browser developer tool by
pressed F12 and click on console. Within the console we will see several error
here. Now we haveto remove these all.
c. Open index.html file and change <base href="/"> with <base href="/src/"> to point /src/ folder.
d. Change script reference to include a "/" just before node_modules as
<!-- Polyfill(s) for older
browsers -->
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
e. In systemjs.config.js file change 'npm:': 'node_modules/' with 'npm:':'/node_modules/' and press F5 to reload the application again.
Note: Now,we are able to run our application with IIS withctrl + F5 or F5
by visual studio but this will not run by command line by lite server as npm
start.
f.
Now,
change Hello Angular! by Hello Saurabh and press Ctrl + r but change will not reflect.
This is because browser does not understand typescript code, It understand javascript
code only. Behind tsc typescript compiler generate a javascript file with
respect each .ts file. After changed in app.component.ts file ts code didn’t compile
automatically so to achieve this functionality
we have to do one more configuration.
Now, go with tsconfig.json file and add "compileOnSave": true, in this file and change in app.component.ts. Verify
output in your browser.It will reflect changes as per our need.
Comments
Post a Comment