Webpack configuration for mixing cshtml and html (angular 2 + mvc)

Question

For our project we are working on mvc 5 application that serves an angular 2 application. For bundling we are using Webpack.

Now the issue is for some components the html must be loaded by using the mvc controllers that renders the cshtml views. For other components we use static html files.

I want to configure Webpack so that the "static" components html is rendered in the component as inline html, and that the templateUrl stays for the components that need dynamic rendered html.

Here is one of the many things i've tried, but i can't get the include and exclude working. The app component needs server rendered 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

What I suggest you to do is not to use the 'angular2-template-loader', since it just adds require() to templateUrls and you can do it yourself.

Then you need to add <base href="@Url.Content("~")" /> in the *.cshtml page that serves your main angular component

Then for the component that needs to get it's template from rendered MVC views set this:

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

For components that need static templates, try this:

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

Static templates will be bundled, the other ones will be downloaded from MVC action.