Angular-cli: 1.7.0-beta.3 or higher breaks production build in existing application

[alfaproject]

I'm going to report on the latest version because that's what we want to be fixed but the issue being reported started on 1.7.0-beta.3 and manifests in all versions after.

Versions

macOS 10.13.13 (High Sierra)

Angular CLI: 1.7.0
Node: 8.9.1
OS: darwin x64
Angular: 5.2.5
... common, compiler, compiler-cli, core, http, platform-browser
... platform-browser-dynamic

@angular/cli: 1.7.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.6.2
webpack: 3.11.0

Repro steps

• Clone https://github.com/alfaproject/ng-cli-issue-9667
• npm install
• npm run serve (this works)
• npm run serve:prod (this breaks)

Observed behavior

I've created a minimal repro closest to what I have in my applications. See the repro steps above.

Not quite sure how to explain, but it seems like Webpack or Rollup or something along those lines is not replacing imports/exports correctly in all cases.

Example source:

import { query } from './query';

@Component({ /* ... */ })
class BrokenComponent {
  q$ = this.apollo.query({ query });

  constructor(private apollo: Apollo) { }
}

Gets transpiled to something like:

// ...
, $s = tu(/* ... */), // `$s` is the query import
function() {
  function t(t) {
    this.apollo = t,
    this.q$ = this.apollo.query({ query: query }) // `query` instead of `$s`
  }
  // ...
}()

Browser stack trace:

main.e038a7c30f039f88a388.bundle.js:1 ERROR ReferenceError: query is not defined
    at new t (main.e038a7c30f039f88a388.bundle.js:1)
    at bo (main.e038a7c30f039f88a388.bundle.js:1)
    at go (main.e038a7c30f039f88a388.bundle.js:1)
    at Yo (main.e038a7c30f039f88a388.bundle.js:1)
    at ll (main.e038a7c30f039f88a388.bundle.js:1)
    at il (main.e038a7c30f039f88a388.bundle.js:1)
    at Yo (main.e038a7c30f039f88a388.bundle.js:1)
    at Ho (main.e038a7c30f039f88a388.bundle.js:1)
    at Object.dl [as createRootView] (main.e038a7c30f039f88a388.bundle.js:1)
    at e.create (main.e038a7c30f039f88a388.bundle.js:1)

If I rename that query on the import, for example: import { query as BrokenQuery } from './query'; then the import is correctly used and this error will go away, but another one appears in something unrelated, which I try to work around until an error in some vendor module appears which I can't work around. ):

Desired behavior

Same behaviour as any version before 1.7.0-beta.3. The application gets transpiled correctly and everything works fine.

[alfaproject]

I've updated the original description with a minimal repro that resembles what I have in my applications.

[dldavis]

I believe this is related to this issue

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

[alfaproject]

I thought that as well, but I'm already using es5 as target as you can see in the repo I linked. ):

[dldavis]

I found I had to target es5 in the tsconfig.json file and also in the tsconfig.app.json file and it will fixed my problem. I never realized there was a separate tsconfig file in the app root as well as the main root. Both have to be targeting es5. I figured it out by creating a new app with cli and adding a very basic HttpClient call to the main app.component. Once it was working, I was able to find the difference in my app.

From: João Dias [mailto:[email protected]]
Sent: Monday, February 19, 2018 1:25 PM
To: angular/angular-cli
Cc: dldavis; Comment
Subject: Re: [angular/angular-cli] 1.7.0-beta.3 or higher breaks production build in existing application (#9667)

I thought that as well, but I'm already using es5 as target as you can see in the repo I linked. ):

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/angular/angular-cli/issues/9667#issuecomment-366783170 , or mute the thread https://github.com/notifications/unsubscribe-auth/AUIjsuN_mKljPh6ytyock-smqQptsTauks5tWcp7gaJpZM4SJZyN .Image removed by sender.

[alfaproject]

As I said the target is already es5, but you gave me an idea. I changed the module to commonjs and now it seems to work in the repro app.

@clydin is it ok to use commonjs as module?

[clydin]

I’ve traced the root cause to an improper interaction in the import eliding transformer regarding the usage of a shorthand property assignment that also happens to be an import. A fix is incoming and should be available in the next patch release.

[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._}