UglifyJs compile exception with @aspnet/signalr-client

[damienbod]

The following 2 lines causes an UglifyJs compile exception:

UglifyJs Unexpected token: name (NullLogger)

const httpConnection = new HttpConnection('/loopy');
this._hubConnection = new HubConnection(httpConnection);

https://dotnet.myget.org/feed/aspnetcore-ci-dev/package/npm/@aspnet/signalr-client

package version: 1.0.0-alpha1-26985

[damienbod]

demo repo:
https://github.com/damienbod/AspNetCoreAngularSignalR

https://github.com/damienbod/AspNetCoreAngularSignalR/blob/master/src/AspNetCoreAngularSignalR/angularApp/app/home/components/home.component.ts#L28

[davidfowl]

@damienbod Just as an FYI, that can be simplified to:

this._hubConnection = new HubConnection('/loopy');

The Uglify issue came up before here #729 (comment). It's an ES5 vs ES6 issue.

[damienbod]

@davidfowl This fix did not work. I replaced the lines here:

https://github.com/damienbod/AspNetCoreAngularSignalR/blob/master/src/AspNetCoreAngularSignalR/config/webpack.prod.js#L100

This is where I do the Uglify configuration for the production build
package.json

https://github.com/damienbod/AspNetCoreAngularSignalR/blob/master/src/AspNetCoreAngularSignalR/package.json

tried:

new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            output: {
                comments: false
            },
            parallel: {
                cache: true,
                workers: 2
            },
            sourceMap: false
        }),

[damienbod]

Looks like webpack.optimize.UglifyJsPlugin is not ready yet for this, so The SignalR lib cannot be uglified.

[damienbod]

This works if you use the new uglify packages, not the old. new packages => S is a capital letter... @FabianGosebrink thanks for your help.

The fix:

Step 1:

in the package.json add:

"uglifyjs-webpack-plugin": "1.0.0-beta.2",

Step 2:

add the UglifyJSPlugin webpack plugin (S is capital), in the webpack production build file

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

Step 3:

Update the webpack production build

        new UglifyJSPlugin({
            parallel: {
                cache: true,
                workers: 2
            }
        }),

[moozzyk]

This is because of Uglify not supporting ES6. See also #729 (which contains the same workaround you have)

[davidfowl]

Lets put this in the known issues

[moozzyk]

Done

[williamBurgeson]

This might be fixed with angular/angular-cli#7610 - I will probably be checking this in the near future...

[pieterlouw1974]

What i did to get it working
tsconfig.app.json
{
"compilerOptions": {
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"es2017",
"dom"
],
"outDir": "../out-tsc/app",
"target": "es6",
"module": "es2015",
"baseUrl": "",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}

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

package,jason
"devDependencies": {
"@angular/cli": "1.5.0-beta.1",
"@angular/compiler-cli": "4.4.4",

angular 4.4.4