angular 9: '__importDefault is not defined' error if aot is not explicitly on

[bcmedeiros]

🐞 bug report

Affected Package

"@angular/cli": "^9.0.1"
"@angular/compiler": "^9.0.0"
"@angular/core": "^9.0.0"

Is this a regression?

Yes (maybe not if Ivy won't support that)

Description

I have an angular workspace with multiple apps, and after updating to Angular 9 (I started trying with rc.11, same behaviour since then) 2 of those apps were having the following problem right after opening then in the browser: Uncaught ReferenceError: __importDefault is not defined

Configuration file was as below:

        "one-plan-dashboard-app": {
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss"
                }
            },
            "root": "projects/one-plan-dashboard-app",
            "sourceRoot": "projects/one-plan-dashboard-app/src",
            "prefix": "dash-op",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/one-plan-dashboard-app",
                        "index": "projects/one-plan-dashboard-app/src/index.html",
                        "main": "projects/one-plan-dashboard-app/src/main.ts",
                        "polyfills": "projects/one-plan-dashboard-app/src/polyfills.ts",
                        "tsConfig": "projects/one-plan-dashboard-app/tsconfig.app.json",
                        "aot": false,
                        "assets": [
                            "projects/one-plan-dashboard-app/src/favicon.ico",
                            "projects/one-plan-dashboard-app/src/web.config",
                            "projects/one-plan-dashboard-app/src/assets"
                        ],
                        "styles": [
                            "projects/one-plan-dashboard-app/src/styles.scss"
                        ],
                        "scripts": []
                    },
                    ...
                },
                ...
            }
        },

Same error happens removing "aot": false, but having it as "aot": true does not trigger the issue.

🔬 Minimal Reproduction

EDIT: Please see https://github.com/angular/angular/issues/35208#issuecomment-583259763, it seems to be very hard to find a sequence of steps that reproduce the bug, if possible at all.

I compared a new workspace with mine and realised that "aot": true prevents the issue, but still could not reproduce the issue in an new workspace and changing "aot": false. I'm still working on that as it seems that something else is needed to trigger the problem.

🔥 Exception or Error

app.component.ts:7 Uncaught ReferenceError: __importDefault is not defined
    at Module../src/app/app.component.ts (app.component.ts:7)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/app.module.ts (app.component.ts:10)
    at __webpack_require__ (bootstrap:79)
    at Module../src/main.ts (environment.ts:19)
    at __webpack_require__ (bootstrap:79)
    at Object.0 (main.ts:12)
    at __webpack_require__ (bootstrap:79)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.1
Node: 12.15.0
OS: win32 x64

Angular: 9.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.20
@angular-devkit/build-angular      0.803.20
@angular-devkit/build-ng-packagr   0.803.20
@angular-devkit/build-optimizer    0.803.20
@angular-devkit/build-webpack      0.803.20
@angular-devkit/core               8.3.20
@angular-devkit/schematics         9.0.1
@angular/cli                       9.0.1
@ngtools/webpack                   8.3.20
@schematics/angular                9.0.1
@schematics/update                 0.900.1
ng-packagr                         5.7.1
rxjs                               6.5.4
typescript                         3.7.5
webpack                            4.39.2

Node version:

node --version
v12.15.0

OS:
Windows 10 Enterprise

[bcmedeiros]

I keep investigating all differences between my workspace and a new workspace and I found another cause for the issue. My package.json was like this:

  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.20",
    "@angular-devkit/build-ng-packagr": "~0.803.20",
    ....

After changing it to the versions below, the problem is gone, even with "aot": false:

  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.1",
    "@angular-devkit/build-ng-packagr": "~0.900.1",
    ....

So, somehow during the update process, those ones were not updated.

Due to some problems I had during the upgrade process, I had to do things slightly different. Here is what I did:

1. After updating everything to the latest Angular 8.x, I tried to update using the following command:

ng update rxjs @angular/core @angular/cli @angular/cdk

As, at that point in time, I had @angular/cli at 8.x, the cli tried to install a temporary version of itself, but for some reason it got stuck trying to do so. I tried a few times, without success, so I decided to split the update.

2. Because of the error in step 1, I decided to only install the cli first, issuing:

npm install -g @angular/cli@9.0.1
npm install @angular/cli@9.0.1

That worked, so I proceeded.

3. With the new cli, I run

ng update rxjs @angular/core @angular/cdk

Everything worked great, but the aforementioned deps were left behind.

Well, now it looks more like a cli issue to me, if an issue at all, so not to sure on what to do with this bug report.

[alan-agius4]

Hi @brunojcm, if you update the Angular CLI directly without using ng update you will end up in a "broken" state, this is because the CLI migrations will not be executed.

To run the migrations when doing so you'd need to run ng update @angular/cli --migrate-only --from 8 --to 9

With regards to the following;

As, at that point in time, I had @angular/cli at 8.x, the cli tried to install a temporary version of itself, but for some reason it got stuck trying to do so. I tried a few times, without success, so I decided to split the update.

It would be great to understand what's going on. Can you provide a repro?

[bcmedeiros]

Hi, @alan-agius4, thanks for the quick reply. See answers below.

Hi @brunojcm, if you update the Angular CLI directly without using ng update you will end up in a "broken" state, this is because the CLI migrations will not be executed.

To run the migrations when doing so you'd need to run ng update @angular/cli --migrate-only --from 8 --to 9

Yeah, I completely missed CLI migrations... Thanks for pointing that out! I ran the core ones, but completely forgot about the CLI's.

I can confirm that the following sequence of steps works:

npm install @angular/cli@9.0.1
git commit -a -m "chore(angular): cli - npm update"
ng update @angular/cli --migrate-only --from 8 --to 9
git commit -a -m "chore(angular): cli - migration"
ng update rxjs @angular/core @angular/cdk
git commit -a -m "chore(angular): core - install with migration"

I had to run some ng add @angular/localize as well, but that's expected.

Also had to enable Ivy in some apps that where explicitly disabling it, as I assumed the migrations are not expected to change those cases.

---

As, at that point in time, I had @angular/cli at 8.x, the cli tried to install a temporary version of itself, but for some reason it got stuck trying to do so. I tried a few times, without success, so I decided to split the update.

It would be great to understand what's going on. Can you provide a repro?

I'm not sure I can.. it seems something is happening in my computer, maybe with Node.js or something else. Having the CLI at 8.x, the symptoms for me are:

medeb8@host MINGW64 /c/Users/bruno/git/myapp/angular-workspace (master)
$ ng update rxjs @angular/core @angular/cli @angular/cdk
The installed Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.

Then, it hangs forever. At least for a long time. I gave up eventually, as all my running Node.JS processes were using 0% CPU and network.

That's when I decided to update the CLI first, then the rest. I did that in the wrong way, though. :)

---

Having all that said, the only thing that can be improved here in my point of view (assuming that this temporary CLI installation problem is my Node.JS' fault or anything else out of control of the Angular team) is to extend the error message an provide instructions in case of failure.

Instead of having

Installing a temporary version to perform the update.

We could have something like

Installing a temporary version to perform the update.
If this temporary installation fails, you can try to npm install @angular/cli@latest and ng update @angular/cli --migrate-only --from x --to y after that.

[filipesilva]

@brunojcm we are looking are more ng update improvements for v10. Some of them focus on recovering from bad states, like you are suggesting.

[filipesilva]

The root of this particular error was #15355 I believe, but you ended up there because of a bad update state.

[gkalpak]

From what I understand, there is nothing to be fixed on the framework side (or is there).
Should we close this (or move it over to angular/angular-cli for more investigation)?

[filipesilva]

Unsure, would like @clydin's input as well when he has time.

[clydin]

It appears that the broken builds where due to the manual package updates which doesn't allow the migrations to execute. This also appears to have been corrected though by manually executing the necessary migrations.

The remaining item would be the freezing during update bootstrapping. Any additional information regarding the circumstances would be helpful. Did this happen with 9.0 final or one of the prerelease versions? Is it consistently reproducible on your machine? Or any other information that may seem relevant.

[bcmedeiros]

Thanks everyone for the attention to the problem, I really appreciate it.

@brunojcm we are looking are more ng update improvements for v10. Some of them focus on recovering from bad states, like you are suggesting.

Just clarifying one thing, in the end my suggestion was just an improvement in the message when bootstrapping is necessary, in case it fails, not necessarily any inconsistent state recovery. It would be nice to have, though, good to hear you are working on that for v10.

The remaining item would be the freezing during update bootstrapping. Any additional information regarding the circumstances would be helpful. Did this happen with 9.0 final or one of the prerelease versions?

I started testing on rc.12, but my last try was with CLI 9.0.1 a few hours ago. Bootstrapping process froze in all my tries.

Is it consistently reproducible on your machine? Or any other information that may seem relevant.

Yes, it happened almost tens of times. I can easily reset my git to a revision before the update and run it again with any debug flags you may find useful, if you think it's worth porsuing that. Just let me know what should I run. Only problem is that I live in Australia, so the week is gone (I will be out for the weekend), so I'll only be able to test on Monday.