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]

microsoft/TypeScript#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...