test(@ngtools/webpack): update lazy loading string syntax to use dynamic imports

Author: alan-agius4

packages/schematics/angular/migrations/migration-collection.json

@@ -143,7 +143,7 @@
     "lazy-loading-string-syntax": {
       "version": "12.0.0-next.4",
       "factory": "./update-8/#updateLazyModulePaths",
-      "description": "Lazy loading syntax migration. Update lazy loading syntax to use dynamic imports."
+      "description": "Lazy loading syntax migration. Update lazy loading string syntax to use dynamic imports."
     }
   }
 }

tests/legacy-cli/e2e/assets/webpack/test-app/app/app.module.ts

@@ -18,7 +18,7 @@ export class HomeView {}
   imports: [
     BrowserModule,
     RouterModule.forRoot([
-      {path: 'lazy', loadChildren: './lazy.module#LazyModule'},
+      {path: 'lazy', loadChildren: () => import('./lazy.module').then(m => m.LazyModule)},
       {path: '', component: HomeView}
     ])
   ],

tests/legacy-cli/e2e/assets/webpack/test-app/app/lazy.module.ts

@@ -11,8 +11,8 @@ export class LazyComponent {}
   imports: [
     RouterModule.forChild([
      {path: '', component: LazyComponent, pathMatch: 'full'},
-     {path: 'feature', loadChildren: './feature/feature.module#FeatureModule'},
-     {path: 'lazy-feature', loadChildren: './feature/lazy-feature.module#LazyFeatureModule'}
+     {path: 'feature', loadChildren: () => import( './feature/feature.module').then(m => m.FeatureModule)},
+     {path: 'lazy-feature', loadChildren: () => import( './feature/lazy-feature.module').then(m => m.LazyFeatureModule)},
     ]),
   ],
   declarations: [LazyComponent]

tests/legacy-cli/e2e/tests/build/dynamic-import.ts

@@ -84,13 +84,4 @@ export default async function () {
 
   await ng('e2e');
   await ng('e2e', '--configuration=production');
-
-  // Test string import.
-  // Both Ivy and View Engine should support it.
-  await updateJsonFile('tsconfig.app.json', tsConfig => {
-    tsConfig.files.push('src/app/lazy/lazy.module.ts');
-  });
-  await replaceLoadChildren(`'./lazy/lazy.module#LazyModule'`);
-  await ng('e2e');
-  await ng('e2e', '--configuration=production');
 }

tests/legacy-cli/e2e/tests/build/lazy-load-syntax.ts

@@ -23,9 +23,10 @@ export default async function (skipCleaning: () => void) {
 
   // Note: these sizes are without Build Optimizer or any advanced optimizations in the CLI.
   await expectFileSizeToBeUnder('dist/app.main.js', (isVe ? 483 : 565) * 1024);
-  await expectFileSizeToBeUnder('dist/0.app.main.js', 1 * 1024);
+  await expectFileSizeToBeUnder('dist/1.app.main.js', 1 * 1024);
   await expectFileSizeToBeUnder('dist/2.app.main.js', 2 * 1024);
 
+
   // test resource urls without ./
   await replaceInFile('app/app.component.ts', './app.component.html', 'app.component.html');
   await replaceInFile('app/app.component.ts', './app.component.scss', 'app.component.scss');