我正在寻找一些关于如何在 MVC 5 (非Core)中使用Visual Studio 2015设置和集成angular-cli(webpack)的最佳实践和说明。
我意识到这里有一个类似的问题(how to set up asp.net angular 2 project using Angular-Cli with ASP.NET Core in Visual Studio 2015?),但这仅适用于Asp.net Core。由于服务器技术问题,我的项目无法转移到Core。
答案 0 :(得分:4)
这是我的解决方案:
保持空的index.html
运行构建以生成index.html,并注入脚本和样式链接
它非常适合我的ASP.net MVC 5项目。
然而,在支持publicPath之前,它无法使用路由延迟加载,因为chunk js文件的url是从根文件夹而不是dist文件夹加载的。
例如:
正确的chunk js文件应为:
www.example.com/MyApp/dist/ [ID] .chunk.js
但它将从以下版本加载:
www.example.com/MyApp/ [ID] .chunk.js
我已经创建了一个PR来为angular-cli添加pulishPath来解决这个问题。
https://github.com/angular/angular-cli/pull/3285
<强>更新强>
publicPath的PR已经合并,延迟加载不再是一个问题。
答案 1 :(得分:4)
我整合Angular / CLI和MVC的方法: 这里的想法是将前端开发体验与MVC部分分开,因此您不必处理任何Visual Studio BS,并享受Angular CLI和VS Code的好处。
我的应用程序是一个混合应用程序 - 大多数页面和主导航都是经典的MVC,但有些视图实际上是单页面应用程序,其中NG应用程序嵌入到现有视图中。
ng new
创建)ng serve
为应用程序提供服务。 VS Code的开发经验非常棒!ng build --prod
为prod构建它。这会在 dist 文件夹中创建捆绑包。MVC项目中的 gulp任务负责将捆绑包从SPA的 dist 文件夹复制到 Scripts \ Frontend下的相应文件夹中。使用Task Runner,任务被绑定到Before Build,因此无论何时构建应用程序,它都会自动执行。 重要的gulp命令是:
gulp.src('../FrontEndProj/spa1/dist/*bundle.*')
.pipe(gulp.dest('Scripts/Frontend/spa1'));
当然,您需要删除现有文件等。
在bundle config中,我为样式创建了一个包,为脚本创建了一个包。由于CLI通过哈希生成prod包名称,因此我使用通配符:
bundles.add(new script("~/Scripts/spa1/js")
.IncludeDirectory("~/Scripts/Frontend/spa1", inline.*")
.IncludeDirectory("~/Scripts/Frontend/spa1", "polyfills.*")
.IncludeDirectory("~/Scripts/Frontend/spa1", "vendor.*")
.IncludeDirectory("~/Scripts/Frontend/spa1", "main.*"));
(请注意,将文件添加到捆绑包的顺序非常重要!)
bundles.add(
new StyleBundle("/Scripts/spa1.css")
.IncludeDirectory("~/Scripts/Frontend/spa1", "*.css")
在您的视图中,添加ng app指令并使用捆绑包:
@section head {
@Styles.Render("~Scripts/spa1/css")
}
<app-root>Loading...</app-root>
@Scripts.Render("~/Scripts/spa1/js")
答案 2 :(得分:1)
我对张畅使用的方法略有不同。 在运行build-prod之后,我将文件复制到根文件夹,并将index.html中的href属性更改为与我的IIS虚拟目录对应。