cshtml과 html (angular 2 + mvc)을 혼합하기위한 Webpack 구성

Question

우리 프로젝트에서는 앵귤러 2 응용 프로그램을 제공하는 mvc 5 응용 프로그램을 개발 중입니다. 번들링을 위해 우리는 Webpack을 사용하고 있습니다.

이제 일부 구성 요소의 경우 cshtml 뷰를 렌더링하는 mvc 컨트롤러를 사용하여 html을로드해야합니다. 다른 구성 요소의 경우 정적 HTML 파일을 사용합니다.

"정적"구성 요소 html이 구성 요소에서 인라인 html로 렌더링되고 동적 렌더링 된 html이 필요한 구성 요소에 대해 templateUrl이 유지되도록 Webpack을 구성하려고합니다.

여기 제가 시도한 많은 것들 중 하나입니다. 그러나 포함 및 작업을 제외 할 수 없습니다. 앱 구성 요소에는 서버 렌더링 cshtml이 필요합니다. 그냥 templateUrls에 require()을 추가하고 당신이 그것을 스스로 할 수 있기 때문에 나는 당신이하는 것이 좋습니다 무엇

 { 
      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'입니다.

그런 다음 당신은 렌더링 MVC 뷰에서 템플릿 설정되어 얻을 필요가있는 구성 요소에 대한

그런 다음 주 각 구성 요소를 제공하는 *.cshtml 페이지에 <base href="@Url.Content("~")" />를 추가해야이 :

@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 작업에서 다운로드됩니다.