用于混合 cshtml 和 html (angular 2 + mvc) 的 Webpack 配置答案

【问题标题】：Webpack configuration for mixing cshtml and html (angular 2 + mvc)用于混合 cshtml 和 html (angular 2 + mvc) 的 Webpack 配置
【发布时间】：2016-11-23 09:14:09
【问题描述】：

对于我们的项目，我们正在开发服务于 Angular 2 应用程序的 mvc 5 应用程序。对于捆绑，我们使用 Webpack。

现在的问题是对于某些组件，必须使用呈现 cshtml 视图的 mvc 控制器来加载 html。对于其他组件，我们使用静态 html 文件。

我想配置 Webpack 以便“静态”组件 html 在组件中呈现为内联 html，并且 templateUrl 保留用于需要动态呈现 html 的组件。

这是我尝试过的许多事情之一，但我无法让包含和排除工作。应用组件需要服务器渲染的 cshtml。

      {
          test: /\.ts$/,
          loaders: ['awesome-typescript-loader', 'angular2-template-loader'], // here i want to inline the html
          exclude: ["/client/src/app/app.component.ts"]
      },
             {
                 test: /\.ts$/,
                 loaders: ['awesome-typescript-loader'], //  here i want to keep the templateUrl so that the cshtml can be rendered
                 include: ["/client/src/app/app.component.ts"]
             },

【问题讨论】：

你解决了吗？
@jkyadav 是的，我通过实现包含和排除期望正则表达式解决了这个问题。所以我将其替换为 exclude: /!?app\.component.ts$/
谢谢，我去看看

标签： asp.net-mvc angular webpack

【解决方案1】：

我建议你不要使用'angular2-template-loader'，因为它只是将require()添加到templateUrls，你可以自己做。

然后您需要在为您的主要角度组件提供服务的*.cshtml 页面中添加<base href="@Url.Content("~")" />

然后对于需要从渲染的 MVC 视图获取模板的组件，设置如下：

@Component({
  templateUrl: "MvcController/MvcActionName",
})
export class AppComponent {

对于需要静态模板的组件，试试这个：

@Component({
    moduleId: module.id,
    template: require("./app.some.component.html"),
    styleUrls: [require("./app.some.component.css")],
})
export class SomeComponent {

静态模板将被捆绑，其他模板将从 MVC 动作中下载。

【讨论】：