.Net Core + Angular2 环境搭建

环境搭建：

1）node.js版本>5.0,NPM版本>3.0,TypeScript版本>2.0（全装最新版就好了）

2）安装NTVS 1.2（node tools for vs）,TSVS dev 1.4（TS for VS）

3）构建package.json，tsconfig.json，gulp.js文件

　　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,

    //需要这个才能使用注释器

    "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"

}

//手工构建一次

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(, tpath.length - ).join('/')));

    });

    gulp.src(paths.rxjsSrc).pipe(gulp.dest(paths.Tartget + "/rxjs"));

    gulp.src(paths.angularPatch).pipe(gulp.dest(paths.Tartget + "/patch"));

});

//加入任务->绑定->生成前

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）在项目根目录建立 Scripts 文件夹

5）在wwwroot文件夹建立systemjs.config.js

/**

 * 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）修改Views/Shared/_Layout.cshtml,删除对site.js的引用

7）修改Views/Home/Index.cshtml,增加/构建@section scripts 脚本段

@section scripts{

    <!-- . 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>

    <!-- . Configure SystemJS -->

    <script src="systemjs.config.js"></script>

    <script>

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

    </script>

}

8）环境搭建完成，程序入口文件 wwwroot/js/main.js（Scripts/main.ts）

巴特西

.Net Core + Angular2 环境搭建

最新文章

热门文章