ファイルローダーでAOTビルドoutputPathがimgタグを文字列に変換

Question

ファイルローダーoutputPathオプションをオンにしてAOTビルドをビルドしようとすると問題が発生することがあります。結果の出力は、<img>タグが引用符（"<img src=images/world.png alt=world />"）で囲まれています。

これは私のAOTビルドでのみ発生し、私の開発ビルドでは発生しません。だから私はファイルローダーがコンパイルサイクル中にカットされ、結果の文字列が挿入されていると推測しています。

バージョン：

Angular: 4.4.4 
@ngtools/webpack: 1.7.2, 
file-loader: 1.1.5, 
image-webpack-loader: 3.4.2, 
webpack: 3.6.0, 
webpack-dev-server: 2.9.1 

webpack.common.js |規則セクション

module: { 
     rules: [ 
      { 
       test: /\.html$/, 
       loader: 'html-loader', 
       options: { 
        minimize: true, 
        caseSensitive: true 
       } 
      }, 
      { 
       test: /\.scss$/, 
       exclude: /node_modules/, 
       loaders: ['raw-loader', 'sass-loader'] 
      }, 
      { 
       test: /\.(gif|png|jpe?g|svg)$/i, 
       use: [ 
        { 
         loader: 'file-loader', // Image loader 
         options: { 
          name: '[name].[ext]', 
          outputPath: 'images/' // Fails with AOT build. <img> tag gets turned into a string 
         } 
        }, 
        { 
         loader: 'image-webpack-loader' 
        } 
       ] 
      }, 
      { 
       test: /\.(eot|woff2?|ttf)([?]?.*)$/, // Font loader 
       use: 'file-loader' 
      } 
     ] 
    }, 

webpack.prod.js

module.exports = merge(common, { 
    module: { 
     rules: [ 
      { 
       test: /\.ts$/, 
       loaders: ['@ngtools/webpack'] 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.UglifyJsPlugin({ // Uglyfy the JavaScript output | Still gives a small win with AOT build 
      beautify: false, 
      mangle: { 
       screw_ie8: true, 
       keep_fnames: true 
      }, 
      compress: { 
       warnings: false, 
       screw_ie8: true 
      }, 
      comments: false 
     }), 
     new AotPlugin({ // Create AOT build 
      tsConfigPath: './tsconfig.json', 
      entryModule: __dirname + '/src/app/app.module#AppModule' 
     }), 
     new webpack.DefinePlugin({ // Set the node env so that the project knows what to enable or disable 
      'process.env': { 
       'NODE_ENV': JSON.stringify('production') 
      } 
     }) 
    ] 
}); 

これはバグか、私が間違っているのだけで何かですか？それがバグであれば、それはバグですか、@ngtools/webpackまたはfile-loader？

ご協力いただきましてありがとうございます。参照用

---

マイapp.html

<div> 
    <h1>Hello world</h1> 
    <img src="../assets/world.png" alt="world"/> 
</div> 

出力：

---

更新

これはAngularのAOTコンパイラのバグのようです。そこで私はBug report on GitHubを作った。下記のコメントにはワークラウンドがありますが、このバグの修正があればうれしいでしょう。

Answer 1

これはバグだと思います。文字列としてレンダリングされる理由は、URLの周りに引用符がないためです。

回避策は、HTML-ローダプラグインを通じて、引用符を追加することです：

{ 
    test: /\.html$/, loader: 'html-loader', options: { 
    removeAttributeQuotes: false 
    } 
} 

は、よりよい解決策はありますか？