今天准备用angular+mvc创建一个项目，发现上次研究关于angular的东西全忘记了，突然想起上次我事后补了一篇博客的，看了一下也没太回忆起来细节。
无奈，重新研究一边，这次是一边实践一边记录的，希望再过段时间我再来看的时候，希望能有帮助。我想记录博客目的也在于此。利于温故。
你们要是觉得有用点个赞，没用勿喷，谢谢！
1.创建MVC项目
2.创建angular项目
2.1首先安装angular环境
下载安装node.js和npm,下载地址：https://nodejs.org/en/download/（控制台窗口中运行命令 node -v 和 npm -v 显示版本号安装成功）
安装全局typescript，安装命令： npm install -g typescript
安装Angular CLI，安装命令：npm install -g @angular/cli （测试是否安装成功 ng -v）
如果之前安装过angular但是不能用，重新安装之前执行如下操作，卸载angular，卸载命令：npm uninstall -g @angular/cli ,清缓存命令：npm cache clean
如果执行了上述指令还是没用的话，建议执行玩命令，把npm文件下的node_modules\@angular文件夹删除，再试试
创建Angular项目运行指令 ng new 项目名称 （例：ng new app1）
项目创建成功，生成运行，执行如下指令：ng serve -open
3.MVC+Angular 项目搭建成功，如图红框右击还原程序包
3.1删除多余文件。不用文件。你如果不确定删除那些，建议参照官方实例地址：https://www.angular.cn/guide/setup
我的操作方法，把官方事例中的non-essential-files.txt文件放到我本地项目，在用命令执行他
for /f %i in (non-essential-files.txt) do del %i /F /S /Q
rd .git /s /q
rd e2e /s /q
3.2最终项目结构如图，除了mvc还有红框angular相关
4.vs直接运行效果展示
总结：之前我们我们的开发方式是，angular每次都要通过命令生成使用，这种方式的好处直接在VS中即可生成使用，提升开发速度。
注意点：按照官方案例可能会报错，如图
解决方法：systemjs.config.js中配置rxjs的路径就好（下文仅供参考）
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
‘npm:‘: ‘node_modules/‘
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
‘app‘: ‘app‘,
// 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‘,
// other libraries
‘rxjs‘: ‘npm:rxjs‘,
‘angular-in-memory-web-api‘: ‘npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js‘
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: ‘js‘,
meta: {
‘./*.js‘: {
loader: ‘systemjs-angular-loader.js‘
}
}
},
‘rxjs‘: { main: ‘index.js‘, defaultExtension: ‘js‘ },
‘rxjs/ajax‘: { main: ‘index.js‘, defaultExtension: ‘js‘ },
‘rxjs/operators‘: { main: ‘index.js‘, defaultExtension: ‘js‘ },
‘rxjs/testing‘: { main: ‘index.js‘, defaultExtension: ‘js‘ },
‘rxjs/webSocket‘: { main: ‘index.js‘, defaultExtension: ‘js‘ },
}
});
})(this);
相关资料导航：
http://www.runoob.com/angularjs2/angularjs2-typescript-setup.html
https://www.angular.cn/guide/setup
https://www.youtube.com/watch?v=rbHSTJBhJ44
https://www.angular.cn/guide/visual-studio-2015
还没完呢
最后的反思：上述只是一个项目搭建的流程，很多深层次原理的东西还是不懂，慢慢在学习和实践中总结。
（确实不会写博客，感觉像流水账，哈哈）
原文地址：https://www.cnblogs.com/isWhile/p/9482218.html