- Open Visual Studio -> Create an ASP.Net MVC project.
Choose No Authentication.
2. Create package.json file in the project root.
Create a package.json file and add below contents.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
{ "name": "ang2demo", "version": "1.0.0", "scripts": {}, "license": "ISC", "dependencies": { "@angular/common": "~2.0.1", "@angular/compiler": "~2.0.1", "@angular/core": "~2.0.1", "@angular/forms": "~2.0.1", "@angular/http": "~2.0.1", "@angular/platform-browser": "~2.0.1", "@angular/platform-browser-dynamic": "~2.0.1", "@angular/router": "~3.0.1", "@angular/upgrade": "~2.0.1", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "reflect-metadata": "^0.1.8", "rxjs": "5.0.0-beta.12", "systemjs": "0.19.39", "zone.js": "^0.6.25" }, "devDependencies": { "@types/core-js": "^0.9.34", "typescript": "^2.0.3", "typings": "^1.4.0" } } |
3. Add systemjs.config.js file to the project root and add below lines.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
/** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' } } }); })(this); |
4) Create ‘tsconfig.json’ file in the project root and add below contents.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "es2015", "dom" ], "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true }, "exclude": [ "node_modules/*", "**/*-aot.ts" ] } |
5) Create a new folder ‘app’ in the project root and create below files in it.
- app.component.ts
- app.module.ts
- main.ts
Content of app.component.ts
|
1 2 3 4 5 6 |
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>`, }) export class AppComponent { name = 'Angular'; } |
Content of app.module.ts
|
1 2 3 4 5 6 7 8 9 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } |
Content of main.ts
|
1 2 3 |
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); |
If you are getting below confirmation dialog click on No.
6) Go to Views -> Shared -> _Layout.chtml and insert below code after @Scripts.Render(“~/bundles/modernizr”).
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<base href="/"> <link rel="stylesheet" href="styles.css"> <!-- Polyfill(s) for older browsers --> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script> <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/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> |
7) Go to Views -> Home -> Index.chtml and replace the code with below lines.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@{ ViewBag.Title = "Home Page"; } <div class="jumbotron"> <h1>Angular 2 QuickStart</h1> </div> <div class="row"> <div class="col-md-4"> <!-- Angular2 Code --> <my-app>Loading...</my-app> <!-- Angular2 Code --> </div> </div> |
8. Right click on package.json and click on Restore Packages.
9) Now all set to run the application. Build and run the application and you should see below page if all goes well.
