Angular-cli: ng update did not change my import statements

[markgoho]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [ ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [X] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

No, this behavior did not exist prior to 8.x

Description

ran ng update @angular/cli @angular/core
loadChildren import statements were not updated to new syntax

🔬 Minimal Reproduction

I haven't dug into the migration code, but I have my routes in a app-routing.module.ts file:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    loadChildren: './home/home.module#HomeModule',
    data: { depth: 0 },
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

🔥 Exception or Error

No error, just old import pattern instead of new.

🌍 Your Environment

I was on Angular 7.2.15 and this was part of the update process to 8.0.0.

Anything else relevant?
I'm wondering if the migration code is targeting a certain file or something else that would have excluded this file from being updated to the new import pattern.

Here's the last bit from the ng update command:

    ** Executing migrations for package '@angular/core' **
            ------ Static Query Migration ------
            With Angular version 8, developers need to
            explicitly specify the timing of ViewChild and
            ContentChild queries. Read more about this here:
            https://v8.angular.io/guide/static-query-migration
            ------------------------------------------------
UPDATE src/app/search/search.component.ts (2049 bytes)

[alan-agius4]

Can you also confirm that you were not using an RC or beta version of Angular CLi?

[markgoho]

@alan-agius4 not using an RC or beta.

When I try to manually update the import statements, I'm getting a Typescript error:
Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'.ts(1323)

  {
    path: '',
    pathMatch: 'full',
    // loadChildren: './home/home.module#HomeModule',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
    data: { depth: 0 },
  },

Here is my tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

[markgoho]

https://github.com/Microsoft/TypeScript/issues/16675 seems related here

[markgoho]

I see in a newly created v8 project the root tsconfig.json shows the module property set to esnext

UPDATE: I tried setting this manually in my root tsconfig.json before upgrading to v8 but it still did not update my module imports. However, if now after the upgrade, I manually change the import paths, I'm not getting the above error anymore.

[filipesilva]

Those should have been migrated. We also automatically migrate the module in tsconfig to esnext when the migration runs. So that makes me think the migration didn't run at all, for some reason.

[filipesilva]

Any chance you can provide a repro of what you see? We test for this update so I'm not sure of what's going wrong.

[markgoho]

Sure, do you want me to do like a screen capture or something? Is there a debugging flag?

Here is my repo (pre v8 upgrade): https://github.com/markgoho/glWp

[alan-agius4]

@markgoho the repo link seems to be incorrect as I am getting a 404

[markgoho]

Whoops! I had it set to private. Should be good to go now.

[slubowsky]

I had same issue. Migrated them using https://www.npmjs.com/package/@phenomnomnominal/angular-lazy-routes-fix instead...

[filipesilva]

We're looking at how update behaves in your project and it's odd. It doesn't seem to be running the right migrations. Looks like it's related to npm hoisting, but unsure.

[benbrownlol]

I'm also getting this bug, Angular Material correctly updated my paths etc but my imports did not upgrade and I had to manually do it myself as well as change my module param in the ts.config

[aaronte]

Same problem with loadChildren not automatically updating. Migrations for ViewChildren() happened though.

[MaciejWWojcik]

same problem

• not working auto migrate - ViewChildren()
• not working auto migrate - router routes

are there any info about the time this will be fixed?

[jtsom]

Just a note that ViewChild() also did not migrate automatically.

[filipesilva]

A workaround for now is to run the following commands after you are already on Angular and CLI version 8:

ng update @angular/cli --from 7 --to 8 --migrate-only
ng update @angular/core --from 7 --to 8 --migrate-only

[jtsom]

Tried that. It said "you're up to date"

[filipesilva]

@jtsom that's odd, I just ran that in a project that's completely up to date and the migration still happens:

kamik@RED-X1C6 MINGW64 /d/sandbox/memory-debug/awesome-angular-workshop/v8 (v8)
$ ng update @angular/cli --from 7 --to 8 --migrate-only
Using package manager: 'npm'
Collecting installed dependencies...
Found 44 dependencies.
    ** Executing migrations for package '@angular/cli' **
UPDATE package.json (2763 bytes)
UPDATE tslint.json (2991 bytes)
UPDATE tsconfig.json (417 bytes)
UPDATE src/tsconfig.app.json (177 bytes)
UPDATE src/tsconfig.spec.json (219 bytes)
npm WARN [email protected] requires a peer of @angular/common@>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\@angular\compiler-cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 19221 packages in 7.904s
found 3 high severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
npm WARN [email protected] requires a peer of @angular/common@>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\@angular\compiler-cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 19221 packages in 8.58s
found 3 high severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

I was also using local @angular/[email protected]. Might be related.

[aaronte]

Tried running:

ng update @angular/cli --from 7 --to 8 --migrate-only
ng update @angular/core --from 7 --to 8 --migrate-only

From the state I got stuck on when I updated the first time and nothing happened. But I restarted the update by resetting my repo to the latest v7 I was on then ran:

ng update @angular/cli
ng update @angular/cli --from 7 --to 8 --migrate-only # this finally updated tsconfigs, lazy imports, polyfills
ng update @angular/core
ng update @angular/cli --from 7 --to 8 --migrate-only # this updated @ViewChild references

So it finally worked for me when I re-did the whole update process again and explicitly calling the --migrate-only commands

[clydin]

The local CLI version needs to be 8.0.2 or greater for the migrate only part to work properly for these cases.

[EzyHow]

Following worked for me:

ng update @angular/cli --from 7 --to 8 --migrate-only
ng update @angular/core --from 7 --to 8 --migrate-only
ng update @angular/material --from 7 --to 8 --migrate-only

---

Before above, I tried running:

ng update @angular/cli
ng update @angular/core
ng update @angular/material

But these only updated package.json. Not updated @Viewchild(), loadChildren and material imports.

[alexfung888]

I found that the following steps should be followed to upgrade from 7 to 8:

yarn Upgrade typescript@~3.4.5
# cannot work if still @3.2
git commit
# cannot upgrade if working tree is not clean
ng update @angular/cli @angular/core
# according to documentation, only the above line is needed, but alas no
git commit
# need to clean working tree again
ng update @angular/cli --from 7 --to 8 --migrate-only
# This time, will work.
# updates lazy loading modules, tsconfig.json, targets es2015 and creates the browserlist file
# you may want to edit the package.json now to include the browserlist information
git commit
yarn upgrade @angular/flex-layout@=8.0.0-beta.26
# since flex-layout betas often have breaking changes, I always = it to a particular release
# and you need 800b26 before you can update material
git commit
# yet another clean tree for material
ng update @angular/material
git commit
# finally completed.

[Splaktar]

@alexfung888 I opened https://github.com/StephenFluin/angular-update-guide/issues/35 to track the issue of having to run a lot of git commits. Have you seen any other areas where the docs need to be updated for this?

[alexfung888]

@alexfung888 I opened StephenFluin/angular-update-guide#35 to track the issue of having to run a lot of git commits. Have you seen any other areas where the docs need to be updated for this?

Actually I can tolerate making lots of git commits, as long as the update guide didn't sound as if none is necessary. And a clean working tree has the advantage of easily restore when the update went south.

More problematic is that on both repositories I tried, the update did not work and I need to do a separate --migrate-only with cli before the files (lazy loading modules, tsconfig.json, setting target to es2015 and the browserlist file) are updated.

And the dependencies were not spelt out. Like I listed in my comment above, you need to manually upgrade typescript and flex-layout for the update to work.

[juristr]

@alan-agius4 @filipesilva I briefly mentioned this in the GDE slack and it very much looks that my issue might be related to this. I created a reproduction repo here: https://github.com/juristr/ngv7upgradetest

If you try to upgrade this repo with ng update @angular/cli @angular/core, the lazy route here

https://github.com/juristr/ngv7upgradetest/blob/177e9dacdb97367657b61e227fdb691fa51be19c/src/app/app-routing-routing.module.ts#L7

..doesn't get upgraded. In fact if you take a look at the output log, the CLI schematics don't seem to be executed at all.

Instead, by trial-and-error I found that for some reason it was due to the @angular/pwa package I was having in my repo. If you remove this line and do the upgrade again, it strangely works.

I'm very curious what the reason for this might be, so let me know in case you find a fix, or need help reproducing something.
Just for the record, I encountered a similar scenario where my workspace was upgraded to v8.1.0-rc.0 instead of the latest stable v8. I reported it here on the NX repo (https://github.com/nrwl/nx/issues/1540) since it happened with my NX based monorepo. However it might be a CLI schematic issue as well. The culprit there was having ng-packagr

[alexfung888]

Instead, by trial-and-error I found that for some reason it was due to the @angular/pwa package I was having in my repo. If you remove this line and do the upgrade again, it strangely works.

Ah yes, even with my procedure above, pwa is not updated and I need to manually align it with cli.

[juristr]

@alexfung888 well, it's even less the problem that the @angular/pwa is not updated, but more that if it is present, other migration schematics, like the one of the CLI are note being executed at all. If you remove the @angular/pwa package for a moment and you do the upgrade, then it works.

[juristr]

Just as an additional note. In another project I had the same issue, removed the @angular/pwa there, but the upgrade still didn't happen. Looks like there must be something else still. Also the @angular/core migrations don't seem to have fully completed. After a first successful run, I re-executed them via ng update @angular/core --from 7 --to 8 --migrate-only and got some more @ViewChild(...) transformations 🤔

[clydin]

Unfortunately, there was a defect in the update functionality that was fixed in 8.0.2 that caused the wrong version of the @schematics/angular package to be used when executing migrations if an older version of the package happened to be hoisted to the root by the package manager. Manually running the migrations in this situation as shown in the comment above this one would indeed be the correct course of action.
This issue was also not limited to the @schematics/angular package but it is the most commonly used and therefore the most likely to exhibit the issue.

[mart2k]

Same here: Updating from 7.14 --> 8.10

Update routine did NOT update @ViewChild(), loadChildren and tsconfig.

[juristr]

@mart2k What happens if you re-run the migrations manually afterwards again?

ng update @angular/cli --from 7 --to 8 --migrate-only
ng update @angular/core --from 7 --to 8 --migrate-only

[mart2k]

@juristr that worked for me. Thanks to all.
Maybe this should be mentioned in the Angular Update Guide.

[jtsom]

I think the issue is you _shouldn't_ have to manually run those migrate-only scripts.

[juristr]

Exactly. Usually this shouldn't be necessary but read this comment: https://github.com/angular/angular-cli/issues/14589#issuecomment-508149437

[edinsonjp]

Updating to Angular 8.1.2 right now and had the same behaviour.
Re-running the commands as @juristr said worked just fine.

[alan-agius4]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

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