环境搭建:
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 环境搭建的更多相关文章

  1. .Net Core(一)环境搭建与基本使用

    .Net Core(一)环境搭建与基本使用 一.系统配置 a) Linux下如果想要打开类似任务管理器,可以使用top命令,在控制台会动态刷新CPU和内存占用.进程等信息.vmstat和free命令可 ...

  2. .net core运行环境搭建 linux + windows

    ---------------------------------------linux------------------------------------------------- 一.添加do ...

  3. 记一次Angular2环境搭建及My First Angular App小demo呈现

    参考连接?不如说是照搬链接.AngularJs官网地址快速起步地址. 对于一个一直只是用jq,偶尔学习点Knockout js,了解一点mvvm结构的前端来说,学习Angular2还是有点困难的.好了 ...

  4. Linux下.Net Core+Nginx环境搭建小白教程

    前言 对于接触.Net Core的我们来说之前从未接触过Linux,出于资源和性能及成本的考虑我们可能要将我们的环境搬到Linux下,这对于我们从未接触过Linux的童鞋们来说很棘手,那么我今天将带你 ...

  5. dotNet Core开发环境搭建及简要说明

    一.安装 .NET Core SDK 在 Windows 上使用 .NET Core 的最佳途径:使用Visual Studio. 免费下载地址: Visual Studio Community 20 ...

  6. angular2环境搭建

    Angular2.x与Angular1.x完全不同,Angular2.x是不兼容Angular1.x的,所在在框架的构造上,它们是完全不同的.在Angular2.x中,因为其是基于ES6来开发的,所以 ...

  7. [.net 面向对象程序设计深入](9).NET Core 跨平台开发环境搭建

    [.net 面向对象程序设计深入](9).NET Core 跨平台开发环境搭建 1.概述 读前必备:认识.NET Core 上篇介绍了.NET 新的生态环境:包括.NET Framework..NET ...

  8. webpack+angular2开发环境搭建

    升级版之webpack4 + angular5脚手架demo详见: http://www.cnblogs.com/xudengwei/p/8852257.html 刚搭建完一个webpack+angu ...

  9. Angular2+学习第2篇 cli 环境搭建过程

    Angular-cli是angular团队针对Angular2提供的脚手架,用于环境搭建,运行等:具体参考Angular-cli GitHub Angular的启动过程,需要先回答三个问题: 启动时加 ...

随机推荐

  1. php 保存到mysql数据库中的中文乱码

    近期又php项目,乱码是个头痛的问题 解决方法: 1,php 文件中 添加 header(“Content-Type: text/html; charset=utf-8"); 2,需要做数据 ...

  2. [HTML/CSS] ul元素居中处理

    CSS: <style type="text/css"> #nav_sub_page { text-align: center; width: 80%; } #nav_ ...

  3. 《精通C#》第十二章 Linq

    Linq是在.Net3.5之后首次引入的,这种查询语言简单易学,可用范围非常广泛在学着之前,一直用在数据库操作之上,但是在学习这节课之后才发现,凡是实现泛型的接口类型都可以使用linq,简单来说就是实 ...

  4. jQuery查找——parent/parents/parentsUntil/closest

    jquery的parent(),parents(),parentsUntil(),closest()都是向上查找父级元素,具体用法不同 parent():取得一个包含着所有匹配元素的唯一父元素的元素集 ...

  5. 四核exynos4412开发板使用网线上网注意事项

    问:RP4412开发板板子可以插网线上网? 答:可以.支持WIFI.LAN.3/4G上网的.插网线没? 问:我插了,他还是提示让我连wifi. 答:你是上网页还是其他的APP. 网页可以直接打开,有部 ...

  6. Java集合类学习笔记(Set集合)

    Set集合不允许包含相同的元素,如果试图把两个相同的元素加入同一个Set集合中,则添加操作失败,add()方法返回false,且新元素不会被加入. HashSet类的特点: 不能保证元素的排列顺序,顺 ...

  7. BZOJ 1189 二分匹配 || 最大流

    1189: [HNOI2007]紧急疏散evacuate Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1155  Solved: 420[Submi ...

  8. 【 2013 Multi-University Training Contest 4 】

    HDU 4632 Palindrome subsequence dp[x][y]表示区间[x,y]构成回文串的方案数. 若str[x]==str[y],dp[x][y]=dp[x+1][y]+dp[x ...

  9. HDU--1233--还是畅通工程--并查集

    还是畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  10. 过滤器Filter

    实现Filter接口: