首页 > 代码库 > .Net Core + Angular2 环境搭建

.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(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"));

});
//加入任务->绑定->生成前
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{

    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->

    <script src=http://www.mamicode.com/"~/lib/patch/core-js/client/shim.min.js"></script>

    <script src=http://www.mamicode.com/"~/lib/patch/zone.js/dist/zone.js"></script>

    <script src=http://www.mamicode.com/"~/lib/patch/reflect-metadata/Reflect.js"></script>

    <script src=http://www.mamicode.com/"~/lib/patch/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->

    <script src=http://www.mamicode.com/"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 环境搭建