角2 - Webpack 2 - テンプレートローダーがtemplateUrlで動作しない

Question

私のアプリケーション用の最小限のWebpackの例を作成しましたが、 "./file.name.html"でtemplateUrlを使用してコンパイルしてみます。しかし私のアプリケーションが示す唯一の事は、私のインデックスページのtemplateUrl "./file.name.html"の名前です。コンソールにエラーがなく、アプリケーションに問題がないと思われます。

<app>... Loading </app> 

はもう表示されません。 Webpackを使用しようとする前に、私はsystemJsを使い、My Appはうまくいっていました。だから私はそのアプリの問題とは思わない。

私の出発ファイル名がapp.component定義が

.... Imports 

@Component({ 
    selector: 'sxp-app', 
    templateUrl: "./app.component.html" 
}) 
export class AppComponent { ... } 

私webpack.config.js

var path = require('path'); 

module.exports = { 
    entry: "./App/boot.ts", 
    output: { 
     path: path.join(__dirname, './Scripts/dist'), 
     filename: "bundle.js" 
    }, 
    resolve: { 
     extensions: ['.ts', '.js'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.ts$/, 
       loader: ['awesome-typescript-loader', 'angular2-template-loader'] 
      }, 
      { 
       test: /\.html$/, 
       loader: 'raw-loader' 
      } 
     ] 
    } 
}; 

package.jsonのように見えますboot.ts

/// <reference path="../typings/index.d.ts" /> 
import 'core-js/es6'; 
import 'core-js/es7/reflect'; 
import "zone.js/dist/zone"; 

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 

const platform = platformBrowserDynamic(); 
platform.bootstrapModule(AppModule); 

です

{ 
    "scripts": { 
    "start": "webpack-dev-server --inline --progress --port 8080", 
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail" 
    }, 
    "dependencies": { 
    "@angular/common": "~2.2.0", 
    "@angular/compiler": "~2.2.0", 
    "@angular/core": "~2.2.0", 
    "@angular/forms": "~2.2.0", 
    "@angular/http": "~2.2.0", 
    "@angular/platform-browser": "~2.2.0", 
    "@angular/platform-browser-dynamic": "~2.2.0", 
    "@angularclass/hmr": "~1.2.2", 
    "@angularclass/hmr-loader": "~3.0.2", 
    "@angular/router": "~3.2.0", 
    "@angular/upgrade": "~2.2.0", 
    "core-js": "^2.4.1", 
    "rxjs": "5.0.0-beta.12", 
    "zone.js": "^0.6.26", 
    "ui-router-ng2": "1.0.0-beta.3" 
    }, 
    "devDependencies": { 
    "@types/node": "^6.0.51", 
    "@types/requirejs": "2.3.1", 
    "angular2-router-loader": "^0.3.4", 
    "angular2-template-loader": "^0.6.0", 
    "css-loader": "0.26.0", 
    "file-loader": "0.9.0", 
    "html-loader": "0.4.4", 
    "html-webpack-plugin": "2.24.1", 
    "raw-loader": "0.5.1", 
    "rimraf": "~2.5.4", 
    "style-loader": "0.13.1", 
    "typescript": "^2.0.10", 
    "typings": "2.0.0", 
    "webpack": "2.1.0-beta.27", 
    "webpack-dev-server": "2.1.0-beta.12", 
    "webpack-merge": "0.17.0", 
    "webpack-notifier": "^1.4.1" 
    } 
} 

私はUI-ルータを使用していますが、私は右のURLがロードされていることがわかりますが、そののみ「./appHeader.component.html」などのテンプレートファイル名を示すが、無

とtsconfig.json

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "types": [ 
     "node" 
    ] 
    }, 
    "awesomeTypescriptLoaderOptions": { 
    "useWebpackText": true 
    }, 
    "exclude": [ 
     "node_modules", 
     "dist", 
     "typings/main", 
     "typings/index.d.ts" 
    ], 
    "compileOnSave": true 
    } 

テンプレート。

Answer 1

私の問題が見つかりました！

：

は、以下のようなあなたのアプリで

使用、通常の引用符を単に "./app.component.html" をレンダリングします

templateUrl: \`./app.component.html` 

このようES6の引用符を使用しません

templateUrl: './app.component.html' 
templateUrl: "./app.component.html" 

Answer 2

templateUrl:"..."の代わりにtemplate: require("./app.component.html")を使用する必要があります。

Webpackはファイルをスキャンして、 require（...）タグ。

Answer 3

これがうまくいかない別の理由は、.tsファイルに対応するファイルを既にコンパイルしている場合です。いくつかのIDEは、保存またはコンパイルするときに、これらのIDEを単独で作成します。

これは、 'module'がリクエストされたときに、最初に.jsファイルを見つけ、.tsファイルを処理しないため、この 'チェーン'を通過しないという効果があります。

.csprojファイルを編集し、これを新しいプロパティグループとして追加します（最初に検索します）。これにより、Visual Studioが保存時に.jsファイルを自動生成できなくなります。

<PropertyGroup> 
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> 
</PropertyGroup> 

はあなたのClientAppフォルダ（コンポーネントなど）の下で、対応する.tsファイルを持っているすべての生成.jsと.js.mapファイルを削除することを確認します。まずソース管理/バックアップをチェックしてください。