Angular 4, Unexpected token error during ng build --prod

Question

I am working on an Angular 4 application that utilizes angular-cli and webpack2.

I can successfully build the project with ng build

However, when I run ng build --prod the following error is thrown:

ERROR in main.50d83f3f70f7e607ec7a.bundle.js from UglifyJs Unexpected token: name (FilterPipe) [main.50d83f3f70f7e607ec7a.bundle.js:7,6]

I don't understand what is wrong.

Here is my filter.pipe.ts file:

import {Pipe, PipeTransform } from '@angular/core';

@Pipe({ 
    name: 'filter'
})

export class FilterPipe implements PipeTransform {
    transform(items: any[], field : string, value : string): any[] { 
        if (!items) return [];  
        return items.filter(it => it[field] == value);
    }
}

Check that your target is not es6, which has known problems with uglify. — user663031
– user663031, Commented Apr 26, 2017 at 14:44

Parth Ghiya · Accepted Answer · 2017-04-26 14:51:28Z

2

This happens because Uglify doesnt support es6 syntax yet.

https://github.com/angular/angular-cli/issues/1663

Modify tsconfig.json to check fr sure that "target": "es5", is there Example :

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

answered Apr 26, 2017 at 14:51

Parth Ghiya

6,9692 gold badges32 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Justin Grahn Over a year ago

I've changed my tsconfig.json to have a "target": "es5" and I'm still getting this error. Is there any additional steps that I need to take to make sure this works?

kds23 Over a year ago

@JustinGrahn I am facing a similar issue. Did you manage to find a solution?

Justin Grahn Over a year ago

@kds23 oh boy, I did but there were multiple issues going on at once so let me try walk back. I think the first issue I had was resolved by forcing a different version of Uglify. Search around, but there is an Angular or Typescript thread detailing why this is necessary. Secondly the JIT compiler was allowing my component html to reference private variables, which for whatever reason, is not actually allowed when compiling with the AOT compiler that the —prod flag uses, so I had to convert every private variable that was being referenced by my HTML. I think the Uglify version is your best bet

Collectives™ on Stack Overflow

Angular 4, Unexpected token error during ng build --prod

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related