파일 로더 출력으로 AOT 빌드 outputPath가 img 태그를 문자열로 변환

Question

파일 로더 outputPath 옵션을 켜고 AOT 빌드를 빌드 할 때 문제가 발생합니다. 결과 출력은 태그가 따옴표 ("<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' 
      } 
     ] 
    }, 

는

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') 
      } 
     }) 
    ] 
}); 

이 내가 잘못하고 있어요 버그의 뭔가가 webpack.prod.js? 그리고 그것이 버그 일 경우, 어느쪽에 버그입니까, @ngtools/webpack 또는 file-loader?

도움을 주시면 감사하겠습니다. 참조

---

내 app.html

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

출력 :

---

업데이트

AOT 컴파일러의 버그로 보입니다. 그래서 Bug report on GitHub을 만들었습니다. 아래의 주석에는 workarround가 있지만이 버그에 대한 수정 사항이 있으면 좋을 것입니다.

Answer 1

나는 이것이 버그라고 생각합니다. URL 주위에 따옴표가 없기 때문에 문자열로 렌더링 된 이유입니다.

더 - 주변의 작업은 HTML 로더 플러그인을 통해 따옴표를 추가하는 것입니다 더 나은 솔루션

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

있습니까?