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

.Net Core + Angular2 环境搭建

2024-08-20 20:54:42   221人阅读

环境搭建：
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 环境搭建


联系
我们