Webpack混合cshtml和html的配置(角2+ mvc)

Question

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

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

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

这里是我尝试过的许多事情之一，但我无法获得包含和排除工作。应用程序组件需要服务器呈现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"]
             },

Answer 1

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

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

然后，对于需要从呈现的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操作中下载。