Shulou(Shulou.com)06/03 Report--

How to build a .net Core+Angular2 environment, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

Environment building:

1) node.js version > 5.0 Magi NPM version > 3.0 Magi TypeScript version > 2.0 (it would be nice to have the latest version installed)

2) install NTVS 1.2 (node tools for vs), TSVS dev 1.4 (TS for VS)

3) build 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, / / this is required to use the annotator "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false}, "compileOnSave": true}

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"} / / build gulp.task manually ("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-build 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 root directory of the project

5) create a 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 to delete the reference to site.js

7) modify Views/Home/Index.cshtml to add / build @ section scripts script segment

@ section scripts {System.import ('app') .catch (function (err) {console.error (err);});}

8) the environment has been built, and the program entry file wwwroot/js/main.js (Scripts/main.ts)

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.