Webpack Html-loaderがバンドルにテンプレートを追加しない

Question

角（4.4.4）とWebpack（3.6.0）のスタータープロジェクトを作成できません。私の設定は、のAOTビルドとtemplate宣言で動作していますが、htmlテンプレートを追加すると（templateをtemplateUrlに置き換えると）Webpackは無限ループに入り、95% emtittingに固執します。私は、テンプレートの読み込みのために

webpack.common.js

module.exports = { 
    entry: { 
     app: './src/main.ts', 
     vendor: getVendorPackages() 
    }, 
    output: { 
     path: __dirname + '/dist', 
     filename: "app.bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.ts$/, 
       loaders: ['awesome-typescript-loader', 'angular2-template-loader'] 
      }, 
      { 
       test: /\.html$/, 
       loader: 'html-loader' 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.ContextReplacementPlugin(//Resolve Angular warnings 
      /angular(\\|\/)core(\\|\/)@angular/, 
      path.resolve(__dirname, '../src') 
     ), 
     new webpack.optimize.CommonsChunkPlugin({ //Create secondary bundle containing dependencies 
      name: 'vendor', 
      filename: 'vendor.bundle.js', 
      minChunks(module) { 
       const context = module.context; 
       return context && context.indexOf('node_modules') >= 0; 
      }, 
     }), 
     new htmlWebpackPlugin({ //Generate index.html 
      template: './src/index.html' 
     }), 
     new webpack.ContextReplacementPlugin(//Only export the locals we need | https://github.com/moment/moment/issues/2517 
      /moment[\/\\]locale$/, /en|nl/ 
     ) 
    ], 
    resolve: { 
     extensions: ['.js', '.ts'] 
    } 
}; 

app.component.ts

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'hn-root', 
    // template: `<h1>Hello world</h1>` 
    templateUrl: 'app.html', 
    // styleUrls: ['./app.scss'] 
}) 
export class AppComponent { 
} 

app.html

<h1>Hello big world</h1> 

を html-loader V0.5.1を使用しています10

私が試した

{ 
    "name": "angular-webpack-starter", 
    "version": "0.1.0", 
    "scripts": { 
    "build": "webpack --config webpack.dev.js", 
    "serve": "webpack-dev-server --config webpack.dev.js", 
    "build --prod": "webpack -p --config webpack.prod.js --progress" 
    }, 
    "dependencies": { 
    "@angular/common": "4.4.4", 
    "@angular/compiler": "4.4.4", 
    "@angular/core": "4.4.4", 
    "@angular/forms": "4.4.4", 
    "@angular/http": "4.4.4", 
    "@angular/platform-browser": "4.4.4", 
    "@angular/platform-browser-dynamic": "4.4.4", 
    "@angular/router": "4.4.4", 
    "core-js": "2.5.1", 
    "reflect-metadata": "0.1.10", 
    "rxjs": "5.4.3", 
    "zone.js": "0.8.18" 
    }, 
    "devDependencies": { 
    "@angular/compiler-cli": "4.4.4", 
    "@ngtools/webpack": "1.7.2", 
    "@types/core-js": "0.9.43", 
    "@types/node": "8.0.31", 
    "angular2-template-loader": "0.6.2", 
    "awesome-typescript-loader": "3.2.3", 
    "codelyzer": "3.2.0", 
    "html-loader": "0.5.1", 
    "html-webpack-plugin": "2.30.1", 
    "tslint": "5.7.0", 
    "typescript": "2.5.3", 
    "webpack": "3.6.0", 
    "webpack-bundle-analyzer": "2.9.0", 
    "webpack-dev-server": "2.9.1", 
    "webpack-merge": "4.1.0" 
    } 
} 

私は明らかに間違って何かをやっているが、私はそれが何であるかを把握することはできません。..

---

package.json

• 変更する私もほとんど角度のwebpack.config.jsを確認loaders:[angular2-template-loader]

loaders:[angular2-template-loader?keepUrl=true]に変更app.component.html（角条約）にapp.htmlを変更する './app.html'

へスターター（角速度を含む）は、html-loaderの代わりにraw-loaderを使用しています。インラインhtmlを作成するので、html-loaderをAOT compilationと組み合わせて使用​​することができますか？

Answer 1

私自身の質問に答えるために、私はwebpack.common.jsで間違いを犯しました。私は鍵を使用しました。ここでは鍵rulesを使用してください。

だから、新しいコードは次のようになります。

module.exports = { 
    entry: { 
     app: './src/main.ts', 
     vendor: getVendorPackages() 
    }, 
    output: { 
     path: __dirname + '/dist', 
     filename: "website.bundle.js" 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.html$/, 
       loader: 'html-loader' 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.ContextReplacementPlugin(//Resolve Angular warnings 
      /angular(\\|\/)core(\\|\/)@angular/, 
      path.resolve(__dirname, '../src') 
     ), 
     new webpack.optimize.CommonsChunkPlugin({ //Create secondary bundle containing dependencies 
      name: 'vendor', 
      filename: 'vendor.bundle.js', 
      minChunks(module) { 
       const context = module.context; 
       return context && context.indexOf('node_modules') >= 0; 
      }, 
     }), 
     new htmlWebpackPlugin({ //Generate index.html 
      template: './src/index.html' 
     }), 
     new webpack.ContextReplacementPlugin(//Only export the locals we need | https://github.com/moment/moment/issues/2517 
      /moment[\/\\]locale$/, /en|nl/ 
     ) 
    ], 
    resolve: { 
     extensions: ['.js', '.ts'] 
    } 
}; 

以上の特定：

module: { 
    rules: [ 
     { 
      test: /\.html$/, 
      loader: 'html-loader' 
     } 
    ] 
}, 

you'lも/\.ts$/ルールがなくなっていることに気づくかもしれません。これは、AOTコンパイルでは独自のタイプコピーコンパイラを使用し、webpack-mergeはルールをオーバーライドしないためです。このため、コンパイルをdev設定に移動しなければならなかった：

webpack.dev。

"files": [ 
    "src/app/app.module.ts", 
    "src/main.ts" 
    ], 

    "angularCompilerOptions": { 
    "genDir": "aot", 
    "skipMetadataEmit" : true 
    } 

合わせてこの：TS

module.exports = merge(common, { 
    module: { 
     rules: [ 
      { 
       test: /\.ts$/, //Prod uses AOT for .ts and webpack does not override the rules, so they need to be separated 
       loaders: ['awesome-typescript-loader', 'angular2-template-loader'] 
      }, 
     ] 
    }, 
    plugins: [ 
     new BundleAnalyzerPlugin({ //Make bundle sizes visible 
      analyzerMode: 'static', 
      openAnalyzer: false 
     }), 
     new webpack.DefinePlugin({ //Set the node env so that the project knows what to enable or disable 
      'process.env': { 
       'NODE_ENV': JSON.stringify('development') 
      } 
     }) 
    ], 
    devtool: 'eval-source-map', 
}); 

---

私はまた私のtsconfig.json（AOT documentationを参照）にいくつかのデータを追加する必要がありました私の答えを拡張し、（AOTコンパイルで）作業例を作成するには次を作成しましたtsconfig.json：

{ 
    "compilerOptions": { 
    "target": "es5", 
    "experimentalDecorators": true, 
    "emitDecoratorMetadata": true, 
    "module": "es2015", 
    "moduleResolution": "node", 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors": true, 
    "removeComments": false, 
    "sourceMap": true, 
    "typeRoots": [ 
     "node_modules/@types" 
    ], 
    "lib": [ 
     "es2017", 
     "dom" 
    ] 
    }, 

    "files": [ 
    "src/app/app.module.ts", 
    "src/main.ts" 
    ], 

    "angularCompilerOptions": { 
    "genDir": "aot", 
    "skipMetadataEmit" : true 
    } 
}