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

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.

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