Angular-cli: Probable issue with uglify, causing signalr-client to fail to build in production

[williamBurgeson]

Refer to
https://github.com/aspnet/SignalR/issues/729
https://github.com/aspnet/SignalR/issues/765

for the issue I raised with the signalr-client team.

I have created a sample repo at https://github.com/williamBurgeson/signalr-client_angular-cli

Quite simply, download the above repo and run ng build --prod, and you will get the error. Note the signalr-client is not hosted in the usual place in npm (I use yarn, but the principles are the same; it is hosted at https://dotnet.myget.org/f/aspnetcore-ci-dev/npm/).

Failing that, run the steps I described in the first comment from that thread:
https://github.com/aspnet/SignalR/issues/729#issue-250646811

ERROR in vendor.a480795b35d0d09f117a.bundle.js from UglifyJs
Unexpected token: name (HubConnection) [vendor.a480795b35d0d09f117a.bundle.js:15675,6]

They have fixed the main problem, which was that when I included the current (at the time) version of signalr-client, it errored out when running ng build. Now that is fixed, but it still errors when running ng build --prod

If you see the last comments on that issue, they have implied the only way to fix this is to run ng eject (see https://github.com/aspnet/SignalR/issues/729#issuecomment-324569702) due to uglify not supporting ES6.

Is there anything which can be done from your end to mitigate this error, without having to ng eject? e.g. switch out dependencies or dependency versions etc. I'm not an expert on uglify by any means but would there be an option to use a newer version which does support ES6? (I assume the angular stack all still compiles down to ES5 to keep uglify happy if what they are saying is correct)

[filipesilva]

We don't overall support building for an es6/es2015 target, but that is being tracked in https://github.com/angular/angular-cli/issues/2907.

I'm beginning to think that we need to update uglify-js to support ES6 though... issues like yours are coming up more and more.

Bear in mind that such a change does not ensure output ES5 compatiblity - if you import a library that needs some es2015 support it will break at runtime if it's not available.

[Marcelh1983]

For anyone that want to use the signalr-client npm package with angular-cli:
I added the es5 jsfiles in .angular-cli.json under scripts.

  "scripts": [
    "../node_modules/@aspnet/signalr-client/dist/browser/signalr-clientES5.min.js",
    "../node_modules/@aspnet/signalr-client/dist/browser/signalr-msgpackprotocolES5.min.js"
  ],

In my signalR service I added two declarations:

this one for in development:
import * as signalR from '@aspnet/signalr-client';
this one for the production build
declare var signalR: any;
Its not ideal but works.
see: https://github.com/Marcelh1983/signalr-example

[filipesilva]

Fixed via https://github.com/angular/angular-cli/pull/7610

[yosigolan]

hey @filipesilva
i am using the latest angular cli (1.5.0 rc0) and still get this issue. i see it merged to master. does this means it is in the latest cli? if so, to problem was not resolved.

Thanks

[filipesilva]

@yosigolan did you set your tsconfig to use "target": "es2015" as https://github.com/angular/angular-cli/pull/7610 mentions?

[yosigolan]

thanks @filipesilva, i thought it is not required, i dont want to reduce the legacy support.

Yosi

[SergBozhko]

Angular-cli has updated 1.5.0. It's solved this problem.

Current version of @aspnet/signalr-client: '1.0.0-alpha2-final' in my project.
Now i'm using import { HubConnection } from '@aspnet/signalr-client' without errors while production building.

Angular-cli releases link: https://github.com/angular/angular-cli/releases

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}