Question

我用angular-cli创建了一个项目，并且 ng build 没问题。出乎意料的是，当我使用 ng build --prod 时出现错误：

ERROR in vender.d6758a1e6b8a2151c741.bundle.js from UglifyJs
Unexpected character '`'

我谷歌并找到一些改变的解决方法 tsconfig.json文件中的“target”：“es5”，但默认情况下目标为es5。我不知道我的代码中是否存在问题或使用了错误的设置。

"dependencies": {
    "@angular/animations": "^4.0.1",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1", 
    "primeng": "^2.0.1",
    "rxjs": "^5.1.0",
     "underscore": "^1.8.3",
     "zone.js": "^0.8.4"
},
"devDependencies": {
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "@types/underscore": "^1.8.0",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0" 
}

谢谢！

Answer 1

在Webpack.prod.js中更改配置。

 plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
      mangle: {
        keep_fnames: true
      }
    }),
    new ExtractTextPlugin('[name].[hash].css'),
    new webpack.DefinePlugin({
      'process.env': {
        'ENV': JSON.stringify(ENV)
      }
    }),
    new webpack.LoaderOptionsPlugin({
      htmlLoader: {
        minimize: false // workaround for ng2
      }
    })
  ]

Answer 2

一旦我们使用ng eject从angular-cli弹出webpack.js，我们就会丢失build，ng serve和其他angular cli命令。因此，我会建议以下方法修复意外的角色＆＃39;`＆＃39;问题：

一个。在package.json中将@ angular / cli更新为1.5-rc.0版本：它修复了意外的令牌＆＃39;`＆＃39;问题

湾更新tsconfig.json以指向es2015依赖项：＆＃34;目标＆＃34;：＆＃34; es2015＆＃34;，＆＃34; lib＆＃34;：[ ＆＃34; ES2015＆＃34 ;, ＆＃34; DOM＆＃34; ]

这是一个有效的解决方法。

参考：https://github.com/angular/angular-cli/issues/7756

Answer 3

我遇到了同样的问题，实际上，为了解决这个错误，只需在@Vignesh给出的production.js文件中添加变通方法：

  htmlLoader: {
      minimize: false
  }

Answer 4

是的，在对这个问题进行了许多小时的研究之后，我们终于找到了答案。

第一个简单安装“ uglify-js”。

npm安装uglify-js -g

如果这不能解决问题，请在uglifyjs-webpack-plugin /uglifyjs-webpack-plugin/blob/v0.4.6/src/index.js#L90）中。

该行应为

而不是ast = compress.compress(ast);

ast = ast.transform(compress);

在大多数情况下，如果以上操作无效，则需要将角度版本升级到最新版本，并且必须将所有项目文件复制到新创建的文件夹中。这将万无一失，并且可以节省大量宝贵的研究时间。

来自UglifyJs的ng build --prod ERROR

4 个答案: