`import as` results in the alias being undefined with Typescript 3.2

[IgorMinar]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting

Command (mark with an x)

- [x] serve
- [x] e2e

Versions

Angular CLI: 7.1.3
Node: 10.11.0
OS: darwin x64
Angular: 7.2.0-beta.2+55.sha-a6e6763
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.7
@angular-devkit/build-angular     0.10.7
@angular-devkit/build-optimizer   0.10.7
@angular-devkit/build-webpack     0.10.7
@angular-devkit/core              7.1.3
@angular-devkit/schematics        7.1.3
@angular/cdk                      7.0.0
@angular/cli                      7.1.3
@angular/material                 7.0.0
@ngtools/webpack                  7.0.7
@schematics/angular               7.1.3
@schematics/update                0.11.3
rxjs                              6.3.3
typescript                        3.2.2
webpack                           4.19.1

Repro steps

After typescript 3.2 upgrade, I've started seeing e2e test failures due to certain symbols not being defined - in all cases these symbols came from rxjs and were aliased to a different name.

The problem occurs during dev builds without optimizations turned on and causes both ng serve and ng e2e to fail with runtime errors in the browser

For example:

import { from as fromPromise, Observable } from 'rxjs';

Would end up with fromPromise being undefined at runtime.

Workarounds

• remove the as alias and refactor the code to use the original symbol name.
• revert back to typescript 3.1

More info

I'll try to create a minimal reproduction outside of aio but for now you can review the "workaround" commit in https://github.com/angular/angular/pull/27536/commits

In the meantime I've tested the as imports in vanilla tsc and it seems to be working just fine there, so I suspect that it's some kind of interaction with cli or webpack that is causing this.

[IgorMinar]

hmm.. unfortunately I can't seem to be able to reproduce this outside of angular.io... in aio it's quite easy to repro this, but I don't know what makes aio special.

[thw0rted]

I have spent all day tearing my hair out trying to nail this down... I'm glad to see I'm not alone. I also haven't been able to make a lightweight reproduction yet -- I have a lot of moving pieces in my (broken) build and thought it might have been some interaction between webpack, the DLL/DLLReference plugins, and the AOT compiler. I just finally figured out that it must be something to do with @ngtools/webpack because I couldn't get the error to happen without it.

I'm going to spend a little more time trying to make a compact reproduction but if it's impossible to build core Angular as-is under TS 3.2, that's probably good enough to make sure it gets addressed. I just hope we don't spend too long with "workarounds" like taking out aliasing completely. I don't just use those as a nice-to-have, I have a dependency where they export a variable I need called "Math"... and I need to access the actual Math object in the same place. As far as I can tell I don't really have any recourse other than aliasing (or renaming the global Math somewhere, which is definitely worse).

[thw0rted]

Just noticed that this corresponds with a change in import-alias behavior in a recent VSCode version, and I'm wondering if there's some connection? See e.g. this issue.

[alan-agius4]

I had a quick look at this, and it seems that this is only happening in AOT mode.

AIO is "special" because it's serve uses AOT and buildOptimizer. Running node_modules/.bin/ngc -p src/tsconfig.app.json in the AIO folder, does output the correct import as statements.