使用文件加载器 outputPath 的 AOT 构建将 img 标签转换为字符串

Question

我在尝试使用文件加载器 outputPath 选项构建 AOT 构建时遇到了一个问题。生成的输出是一个用引号 ("<img src=images/world.png alt=world />") 括起来的 <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 report on GitHub。下面的评论中有一个解决方法，但如果能修复此错误，那就太好了。

Answer 1

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

解决方法是通过 html-loader 插件添加引号：

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

有更好的解决方案吗？

使用文件加载器 outputPath 的 AOT 构建将 img 标签转换为字符串

AOT build with file-loader outputPath turns img tag into string

javascript

webpack

webpack-file-loader

angular2-aot

angular