把angular项目整合到.net mvc中

以前的开发选择的是彻底舍弃服务端，仅保留最简单web服务器提供angular经打包的静态资源，此外全部的业务与数据请求都访问一个分离的WebApi来实现。不过最近碰到一个需求，有必要使用多个客户端，而各客户端自己都是webpack打包出来的js而已，不必每一个客户端都本身建一个站点，这就有必要搭建一个服务端，根据参数动态渲染不一样客户端的脚原本服务多个客户端了。主要须要解决两个问题，一是防止先后端路由冲突各自有效工做，二是如何实现一套比较合理的部署方案。笼统一点看待这个问题，无非就是要实现如题目所描述的，如何将专一前端的强大框架(angular)整合到一个健壮的现有服务端(.Net)项目中去。

Webpack配置

第一步必然是要先获得前端项目的打包资源，由强大的webpack来完成，目标是将angular的全部依赖以及应用主代码分别打包到polyfill.js、vendor.js、main.js三个脚本中，以及异步懒加载的模块各自打包成一个chunk.js。webpack博大精深，刚接触会摸不着头脑，好在其终究是用来给咱们带来方便的一个工具而已，使用起来是颇有条理的。其主要的介绍能够移步webpack的官方文档【https://doc.webpack-china.org 】，认真吸取完远远足够写出angular-webpack-starter【 https://github.com/AngularClass/angular-starter 】这样完善的启动项目来了。
简单来讲webpack配置有四部曲：

• 1、 定义入口文件 包含angular的依赖，angular框架代码以及项目的启动代码便可，好比angular-webpack-starter中的配置：

entry: {
    'polyfills': './src/polyfills.browser.ts', // 依赖项
    'main': AOT ? './src/main.browser.aot.ts' : './src/main.browser.ts' // 主程序
   },

• 2、 定义打包规则

打包规则有好一些须要配置的，包括了各类文件类型的打包，angular模块的打包等，配置方式见官方文档或直接参照现成的启动项目，直接看不免懵逼，但不要怕，规则其实就那么点，眼熟就成功了大半。

• 3、配置插件

webpack有很是多的插件，用来强化打包能力以及规则的扩展，能够看看启动项目中用到了哪些，这些插件在官方文档里都能找到介绍。

• 4、 定义输出规则

输出要分生产环境和开发环境，本文只讲生产环境。先明确webpack打包好的项目是要交给服务端使用的，给出的输出要有几个需求： 1) 转义兼容浏览器和ES5并压缩。2)输出文件名附带哈希值，代码发生更改从新打包时要有不一样的哈希值，保证此时替换的资源不会被浏览器缓存而得不到第一时间更新。3)列出资源打包清单，由于附带了哈希值致使每次文件名都是很长一串奇怪字符，使用合适的webpack配置附带一个manifest清单列出都输出了哪几个文件，进一步在使用时动态读取其中的清单来操做输出的文件。

做为静态脚本添加到服务端

顺利的话开发完成的项目能获得相似下图的打包资源：

 

其中webpack-assets.json中列出了三个依赖文件：

 

以0、一、二、3打头的四个chunk文件是由angular动态引入的懒加载模块，不须要手动引入天然也不须要列出来，只须要保证angular能访问到它们便可。
把这些东西全都放到一个.Net MVC项目中去：

 

而后在View视图中引入三个脚本并配置base url：

 

如今运行MVC项目，定位到这个视图能够顺利渲染出angular项目来。问题在于手动输入前端路由的url时，此url会被MVC路由视为404错误(由于MVC路由中确实未定义这一规则，真正使用此规则的angular客户端尚未机会解析这个url就被一个错误页取代了)。

MVC路由配置

angular官方给出的指南是给服务端配置404的重定向，将全部的404错误都重定向到index.html，这样前端就能顺利开始解析输入的url了。在MVC中作法也相似，只要在MVC的路由规则中，将必要路由(好比还定义了其余的Api或者错误页)以外的全部请求都指向指定的Action，好比笔者的这条规则，将全部其余请求都指向AppController下的Index：

 

这样除了/page/打头的url外全部不知足默认路由的请求都会定位到/App/Index。

使用MVC的View取代index.html

下一步是要在这个/App/Index中读取前端打包生成的webpack-assets.json清单，将须要的文件渲染到视图中，笔者项目添加了一个academyid来区分多客户端，每一个客户端都有以本身id命名的一个资源目录，实现以下图所示：

 

笔者的C#比较抠脚，因此定义了一个class来解析json文件，而后才把解析到的文件名放到ViewData中以供前端使用。如今视图中就可使用Razer语法来渲染脚本依赖：

 

这样子配置下来，服务端其实不须要再关心客户端的更改，只关心从webpack-assets.json中解析要加载的依赖，并渲染这些依赖便可，每当客户端代码更改从新打包时，webpack-assets.json清单也会更新，绝不影响服务端。

总结

水平有限致使本文存在许多的不足之处，包括一直未涉及的SEO方案以及其余的隐藏问题，笔者还有不少须要学习完善的地方。