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"]
             },

@jkyadav yes i solved this by realizing that include and exclude expect a regex. So i replaced it with exclude: /!?app\.component.ts$/ — Jensdc
– Jensdc, Commented Feb 9, 2017 at 13:06

ekimpl · Accepted Answer · 2016-11-29 17:44:28Z

2

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.

answered Nov 29, 2016 at 17:44

ekimpl

5216 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related