AOT使用file-loader生成outputPath将img标记转换为字符串

我在尝试使用文件加载器outputPath选项构建AOT版本时遇到了一个问题。生成的输出是一个<img>标签，并用引号括起来（"<img src=images/world.png alt=world />"）。AOT使用file-loader生成outputPath将img标记转换为字符串

这只发生在我的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。所以我做了一个Bug report on GitHub。在下面的评论中有一个workarround，但是如果能够修复这个bug，那将会很不错。

来源

2017-10-05 Mr.wiseguy

我认为这是一个错误。它呈现为字符串的原因是因为URL周围没有引号。

的解决办法是通过HTML加载器插件添加引号：

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

有没有更好的解决办法？

来源

2017-10-18 04:09:34 pixelbits

这工作！坏的是一个工作周而不是一个正确的解决方案。如果Angular看到有人知道修补程序（添加了该帖子的链接），我在github页面上创建了一张票据， –

AOT使用file-loader生成outputPath将img标记转换为字符串

回答

相关问题