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);
    }
}

Answer 1

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"
    ]
  }
}