uglifyjsplugin 打破 Angular 2 模板答案

【问题标题】：uglifyjsplugin breaking angular 2 templatesuglifyjsplugin 打破 Angular 2 模板
【发布时间】：2016-08-16 19:44:26
【问题描述】：

我的 webpack 配置文件中有这个 uglifyjsplugin 的配置：

exports.minify = function() {
 return {
 plugins: [
  new webpack.optimize.UglifyJsPlugin({
            beautify: false,
            comments: false,
            compress: {
                warnings: false,
                drop_console: true
            },
            // Mangling specific options
            mangle: false
        })
   ]
 }
}

我的问题是 uglify 破坏了我的代码，如果我在没有 uglify 的情况下运行构建，代码可以工作，但是如果我添加 uglify 步骤，我会收到此错误：

Unexpected closing tag "a" ("d-top"> <div class=container-fluid> <div class=navbar-header> <a href=/ class=navbar-brand>{{title}}[ERROR ->]</a> <button type=button class=navbar-toggle data-toggle=collapse data-target=.navbar-collapse> <span"): HeaderComponent@0:145

我已经为 uglify 运行了许多配置，但错误仍然存在。我给出错误的原始角度模板是：

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="/" class="navbar-brand">{{title}}</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse">
  <li><a href="#" data-toggle="dropdown">General Info</a></li>
  <li><a href="#" data-toggle="dropdown">Author</a></li>
</ul>
  </div>
    </nav>

【问题讨论】：

是外部html文件吗？
是的，它是一个外部 html 文件。
你在使用 angular2-template-loader 吗？我也在使用 webpack，但是在使用 uglifyjsplugin 时我没有任何问题
是的，像这样：loaders: [ { test: /\.ts$/, loaders: ['ts', 'angular2-template-loader'], include: PATHS.components }, {测试：/\.html$/，加载器：“html”}]
你能分享你的 webpack conf 吗？

标签： angularjs webpack uglifyjs

【解决方案1】：

模板解析无法正常工作，并且 Angular 团队目前已经在他们的文档上提供了解决方法，但希望它应该尽快修复在 webpack.config 文件中添加这个

  htmlLoader: {
    minimize: false // workaround for ng2
  },

workaround from angular.io

@pdcc 中提到的其他

{
    test: /\.html$/,
    loader: `html?-minimize`
}

【讨论】：

【解决方案2】：

几个小时后，我找到了解决方案。在 html 加载器中我们必须添加最小化：

{
    test: /\.html$/,
    loader: `html?-minimize`
}

【讨论】：