Detailed description of the. Net Core + Angular2 environment, coreangular2

Detailed description of the. Net Core + Angular2 environment, coreangular2

This article describes how to set up the. Net Core + Angular2 environment, as follows:

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) and TSVS dev 1.4 (TS for)

3) construct the package. json, tsconfig. json, and gulp. js files.

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 a 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)

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.