手动angular2环境搭建_详解.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{

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

}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。