Set up the. Net Core + Angular2 environment, coreangular2

Set up the. Net Core + Angular2 environment, coreangular2
Environment setup: 1) node. js version> 5.0, NPM version> 3.0, TypeScript version> 2.0 (the latest version is enough) 2) install NTVS 1.2 (node tools for vs), TSVS dev 1.4 (TS for) 3) Build a package. json, tsconfig. json, gulp. js File 1. package. json

{  "name": "template.angular2",  "version": "1.0.0",  "licenses": [    {      "type": "MIT",      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"    }  ],  "dependencies": {    "@angular/common": "~2.1.1",    "@angular/compiler": "~2.1.1",    "@angular/core": "~2.1.1",    "@angular/forms": "~2.1.1",    "@angular/http": "~2.1.1",    "@angular/platform-browser": "~2.1.1",    "@angular/platform-browser-dynamic": "~2.1.1",    "@angular/router": "~3.1.1",    "@angular/upgrade": "~2.1.1",    "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",    "@types/node": "^6.0.45",    "gulp": "^3.9.1",    "del": "^2.2.2"  }}

2. tsconfig. json

{"CompilerOptions": {"target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, // The annotator "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false}, "compileOnSave": true} is required}

3. gulp. js

Var gulp = require ('gulp'); var del = require ('del '); var paths = {angularPatch: ["node_modules/core-js */**/*", "node_modules/zone. js */**/* "," node_modules/reflect-metadata */*. js "," node_modules/reflect-metadata */*. map "," node_modules/systemjs */dist */*. js "," node_modules/systemjs */dist */*. map "], angularSrc: [" node_modules/@ angular/core/bundles/core. umd. js "," node_modules/@ angular/common/bundles/common. umd. js "," node_modules/@ angular/compiler/bundles/compiler. umd. js "," node_modules/@ angular/platform-browser/bundles/platform-browser.umd.js "," node_modules/@ angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js ", "node_modules/@ angular/http/bundles/http. umd. js "," node_modules/@ angular/router/bundles/router. umd. js "," node_modules/@ angular/forms/bundles/forms. umd. js "," node_modules/@ angular/upgrade/bundles/upgrade. umd. js "//" node_modules/",], rxjsSrc:" node_modules/rxjs/**/* ", TSSrc:" Scripts /**/*. js ", TSTarget:" wwwroot/js ", Tartget:" wwwroot/lib "} // manually build a gulp. task ("copyangularfiles", function () {// gulp. src (paths. angularSrc ). pipe (gulp. dest (paths. tartget); paths. angularSrc. forEach (function (path) {var tpath = path. replace ("node_modules", paths. tartget ). split ('/'); gulp. src (path ). pipe (gulp. dest (tpath. slice (0, tpath. length-1 ). join ('/');}); gulp. src (paths. rxjsSrc ). pipe (gulp. dest (paths. tartget + "/rxjs"); gulp. src (paths. angularPatch ). pipe (gulp. dest (paths. tartget + "/patch");}); // Add task-> bind-> pre-generate gulp. task ("copytsfiles", function () {gulp. src (paths. TSSrc ). pipe (gulp. dest (paths. TSTarget);}) gulp. task ('default', ['copytsfiles'], function () {// place code for your default task here });

 

4) Create the Scripts folder in the project root directory 5) Create systemjs. config. js in the wwwroot folder

/** * System configuration for Angular samples * Adjust as necessary for your application needs. */(function (global) {    System.config({        paths: {            // paths serve as alias            'npm:': 'lib/'        },        // map tells the System loader where to look for things        map: {            // our app is within the app folder            app: 'js',            // 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/forms': 'npm:@angular/forms/bundles/forms.umd.js',            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',            // other libraries            'rxjs': 'npm:rxjs'        },        // 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);

 

6) Modify Views/Shared/_ Layout. cshtml and delete references to site. js. 7) Modify Views/Home/Index. cshtml and add/build @ section scripts script segments.

@section scripts{    <!-- 1. Load libraries -->    <!-- Polyfill(s) for older browsers -->    <script src="~/lib/patch/core-js/client/shim.min.js"></script>    <script src="~/lib/patch/zone.js/dist/zone.js"></script>    <script src="~/lib/patch/reflect-metadata/Reflect.js"></script>    <script src="~/lib/patch/systemjs/dist/system.src.js"></script>    <!-- 2. Configure SystemJS -->    <script src="systemjs.config.js"></script>    <script>        System.import('app').catch(function (err) { console.error(err); });    </script>}

 

8) after the environment is set up, the program entry file wwwroot/js/main. js (Scripts/main. ts)