AoT Uglify error SyntaxError: Unexpected token: punc

[antonybudianto7]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
ngc -p . worked well, but when tried to bundle it with webpack, I got error like this

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
Error: bundle.js from UglifyJs
SyntaxError: Unexpected token: punc ({) [./~/@angular/core/src/change_detection/change_detection.js:8,0]

All angular version have been updated to rc.7 (rc.6 had the same issue too)

Expected behavior
It should bundle well

Reproduction of the problem
clone https://github.com/antonybudianto/angular2-starter
checkout to feat-compiler-cli branch
then

npm i

npm run serve-build

What is the motivation / use case for changing the behavior?
Bundle the AoT result

Please tell us about your environment:
Ubuntu 14.04

• Angular version: 2.0.0-rc.6 and 2.0.0-rc.7
• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  All
• Language: [all | TypeScript 2.0.2 ]
• Node (for AoT issues): node --version = v6.5.0

Thank you

[IgorMinar]

are you using webpack 2? you repo doesn't have a dependency on webpack so I can't reproduce it with webpack. the repo seems to be using systemjs builder for bundling.

[antonybudianto]

i used webpack 1
https://github.com/antonybudianto/angular2-starter/blob/feat-compiler-cli/package.json#L56 >
https://github.com/ngstarter/webpack-extension/blob/master/package.json#L28 >
https://github.com/shama/webpack-stream/blob/master/package.json#L35

[lacolaco]

I have same error without AoT. Only RC.7 + tsc(2.0.2) + Webpack(1.12.14)

ERROR in main.js from UglifyJs
SyntaxError: Unexpected token: punc ({) [./~/@angular/platform-browser/src/dom/dom_adapter.js:8,0]

[IgorMinar]

I see. Here is what's going on:

webpack 1 should never reach the js files under the src directory. it should only read the umd bundle file. if the files under src/ directory are reached, it means that your code or some third-party code that you use makes a direct deep import (e.g. require('@angular/platform-browser/src/....')). these imports access private parts of angular and are not supported. see the rc.6 blog post and release notes.

Please find these deep imports and remove them.

[antonybudianto7]

@IgorMinar , I don't find any deep import

I also use
import { platformBrowser } from '@angular/platform-browser';

not src one

[musabsudan]

Same here, couldn't figure out what is the reason yet. I don't use any require('....')

[readme42]

Same here but in upgradeComponent. Happens only in production build. Error occured when migrating to new staticUpgradeComponent. With UpgradeAdapter everything worked fine.
Webpack 1.13.3
Angular 2.2.1

ERROR in app.bundle.js from UglifyJs
SyntaxError: Unexpected token: punc ({) [./~/@angular/upgrade/static.js:8,0]

[jbubsk]

The same problem. When switch back to upgradeAdapter it works. Just try
import {UpgradeModule} from '@angular/upgrade/static' - it crashes.
Angular 2.2

[srhlv]

Guys, any progress on that? Also faced that issue with upgrade module

[KennethanCeyer]

Hello guys

Maybe i know what is the problem.

---

The problem is

Webpack plugin UglifyJS doen't support ES6 keywords.

But webpack2 support this.

---

UglifyJS does not support ES6 (ES6 support is in progress delopment)

SyntaxError: Unexpected token: punc ({) [./~/@angular/upgrade/static.js:8,0]

Unexpected token: punc ({) mean can be interpreted like this.

import { ModuleA, ModuleB } from 'import/file/path'
       ^ SyntaxError: Unexpected token: punc ({)

---

AngularJS 2 AOT main file generated like app.main.aot.ts and app.main.aot.js.

When you look app.main.aot.js file,

You can find require code line like follows:

var app_module_ngfactory_1 = require("../dist/app.module.ngfactory");

And app.module.ngfactory.js file like this:

var import0 = require("../src/app.component");
var import1 = require("@angular/core/src/linker/view"); // < Focus this code line.
var import3 = require("@angular/core/src/linker/view_utils");
// ...

@angular/core/src/linker/view file is not ES5.
import is ES6 feature check this

//@angular/core/src/linker/view
//...
import { ChangeDetectorStatus } from '../change_detection/change_detection';
import { THROW_IF_NOT_FOUND } from '../di/injector';
import { isPresent } from '../facade/lang';
import { wtfCreateScope, wtfLeave } from '../profile/profile';
import { AnimationViewContext } from './animation_view_context';
//...

Let's get to the point,

Webpack is using UglifyJS project for optimize the codes. (From now, Webpack using v2.7.5 version)

And I know UglifyJS master branch still does not support ES6 harmony spec. (harmony branch is support).

Check UglifyJS GitHub issue follows

But you can solve this problem by this way

Or you can follow this way.

1. Do not use -p option at webpack.

2. And do not use UglifyJsPlugin when you bundle AngularJS2 AOT.

---

By the way JIT Angular code is ES5 (support AMD and CommonJS) like this:

"use strict";
var platform_browser_dynamic_1 = require('@angular/platform-browser-dynamic');
var app_module_1 = require('./app.module');
//...

//app.module.js
//...
var core_1 = require("@angular/core");
var router_1 = require("@angular/router");
var platform_browser_1 = require("@angular/platform-browser");
//...

//@angular/core (@angular/core/bundles/core.umd.js)
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs/Subject'), require('rxjs/Observable')) :
    typeof define === 'function' && define.amd ? define(['exports', 'rxjs/Subject', 'rxjs/Observable'], factory) :
    (factory((global.ng = global.ng || {}, global.ng.core = global.ng.core || {}),global.Rx,global.Rx));
}(this, function (exports,rxjs_Subject,rxjs_Observable) { 'use strict';
//...

---

Important (Updated)

I think Webpack 2.2.0 (maybe 2.x.x) are support ECMA 2015 import statement.

Webpack explain this: (or check this link)

webpack 1 requires a specific loader to convert ES2015 import, however this is possible out of the box via webpack 2

And i tested with Webpack 2.2.0 and AngularJS 2.4.3 (latest versions).

AOT is working beautifully, And UglifyJS is working without any additional options.

babel-loader don't be needed.

Just upgrade your webpack to 2.x.x

---

I think this is why AngularJS 2 documentation is dealing rollup.js for complete AOT.

Hope you're understand the post.

I'm not good English.

[daggerok]

hi, can I achive worked angular aot + uglify with webpack 1?

[jskrzypek]

Fwiw, there is a harmony branch of UglifyJS2 with ES6 support, run npm install mishoo/UgnlifyJS2#harmony to get it, and switch to the stand-alone version of the plugin. See here for more details: https://github.com/webpack-contrib/uglifyjs-webpack-plugin#usage

Otoh, even with this we're still getting the error when importing the FESM versions of angular 4.0.0-rc.*

[ashishjain16]

Might be useful for someone.
After upgrading to angular 8 during production build, I was getting "Error in common-es2015.xxx.js from Terser Unexpected token: Punc(;) [common-es2015.xxx.js] "

After setting sourceMap to true in angular.json file - configurations- production section, compiler displayed actual file name with error line number. It was due to an extra semicolon in a variable declaration in the class file.

e.g. putGamma: any = 0.0;;