cshtmlとhtml（angular 2 + mvc）を混合するWebpackの設定

Question

私たちのプロジェクトでは、角度2のアプリケーションを提供するmvc 5アプリケーションに取り組んでいます。バンドルの場合はWebpackを使用しています。

ここで問題となるのは、cshtmlビューをレンダリングするmvcコントローラを使用してhtmlをロードする必要があるコンポーネントです。他のコンポーネントについては、静的なhtmlファイルを使用します。

"静的な"コンポーネントhtmlがインラインhtmlとしてコンポーネントにレンダリングされ、動的にレンダリングされるhtmlを必要とするコンポーネントのためにtemplateUrlが保持されるようにWebpackを設定したいとします。

ここには私が試した多くのものの1つがありますが、インクルードを取得して作業を除外できません。 appコンポーネントには、サーバーレンダリングされた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アクションからダウンロードされます。