test: update E2E tests to test against standalone apps

This commits updates E2E tests to reflect standalone by default.

tests/legacy-cli/e2e/tests/basic/aot.ts

@@ -3,8 +3,5 @@ import { ng } from '../../utils/process';
 
 export default async function () {
   await ng('build', '--aot=true', '--configuration=development');
-  await expectFileToMatch(
-    'dist/test-project/main.js',
-    /platformBrowser.*bootstrapModule.*AppModule/,
-  );
+  await expectFileToMatch('dist/test-project/main.js', 'AppComponent_Factory');
 }

tests/legacy-cli/e2e/tests/basic/rebuild.ts

@@ -1,17 +1,17 @@
 import fetch from 'node-fetch';
 import { getGlobalVariable } from '../../utils/env';
-import { writeFile, writeMultipleFiles } from '../../utils/fs';
+import { appendToFile, replaceInFile, writeMultipleFiles } from '../../utils/fs';
 import { silentNg, waitForAnyProcessOutputToMatch } from '../../utils/process';
 import { ngServe } from '../../utils/project';
 
 export default async function () {
   const esbuild = getGlobalVariable('argv')['esbuild'];
   const validBundleRegEx = esbuild ? /complete\./ : /Compiled successfully\./;
-  const lazyBundleRegEx = esbuild ? /chunk-/ : /lazy_module_ts\.js/;
+  const lazyBundleRegEx = esbuild ? /chunk-/ : /src_app_lazy_lazy_component_ts\.js/;
 
   const port = await ngServe();
-  // Add a lazy module.
-  await silentNg('generate', 'module', 'lazy', '--routing');
+  // Add a lazy route.
+  await silentNg('generate', 'component', 'lazy');
 
   // Should trigger a rebuild with a new bundle.
   // We need to use Promise.all to ensure we are waiting for the rebuild just before we write
@@ -20,98 +20,40 @@ export default async function () {
   // Verify that a new chunk was created.
   await Promise.all([
     waitForAnyProcessOutputToMatch(lazyBundleRegEx),
-    writeFile(
-      'src/app/app.module.ts',
-      `
-        import { BrowserModule } from '@angular/platform-browser';
-        import { NgModule } from '@angular/core';
-        import { FormsModule } from '@angular/forms';
-        import { HttpClientModule } from '@angular/common/http';
-
-        import { AppComponent } from './app.component';
-        import { RouterModule } from '@angular/router';
-
-        @NgModule({
-          declarations: [
-            AppComponent
-          ],
-          imports: [
-            BrowserModule,
-            FormsModule,
-            HttpClientModule,
-            RouterModule.forRoot([
-              { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }
-            ])
-          ],
-          providers: [],
-          bootstrap: [AppComponent]
-        })
-        export class AppModule { }
-      `,
+    replaceInFile(
+      'src/app/app.routes.ts',
+      'routes: Routes = [];',
+      `routes: Routes = [{path: 'lazy', loadComponent: () => import('./lazy/lazy.component').then(c => c.LazyComponent)}];`,
     ),
   ]);
 
   // Change multiple files and check that all of them are invalidated and recompiled.
   await Promise.all([
     waitForAnyProcessOutputToMatch(validBundleRegEx),
-    writeMultipleFiles({
-      'src/app/app.module.ts': `
-        import { BrowserModule } from '@angular/platform-browser';
-        import { NgModule } from '@angular/core';
-        import { RouterModule } from '@angular/router';
-
-        import { AppComponent } from './app.component';
-
-        @NgModule({
-          declarations: [
-            AppComponent
-          ],
-          imports: [
-            RouterModule,
-            BrowserModule
-          ],
-          providers: [],
-          bootstrap: [AppComponent]
-        })
-        export class AppModule { }
-
+    appendToFile(
+      'src/app/app.routes.ts',
+      `
         console.log('$$_E2E_GOLDEN_VALUE_1');
         export let X = '$$_E2E_GOLDEN_VALUE_2';
-        `,
-      'src/main.ts': `
-        import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-        import { AppModule } from './app/app.module';
-
-        platformBrowserDynamic().bootstrapModule(AppModule);
-
-        import * as m from './app/app.module';
+      `,
+    ),
+    appendToFile(
+      'src/main.ts',
+      `
+        import * as m from './app/app.routes';
         console.log(m.X);
         console.log('$$_E2E_GOLDEN_VALUE_3');
         `,
-    }),
+    ),
   ]);
 
   await Promise.all([
     waitForAnyProcessOutputToMatch(validBundleRegEx),
     writeMultipleFiles({
-      'src/app/app.module.ts': `
-        import { BrowserModule } from '@angular/platform-browser';
-        import { NgModule } from '@angular/core';
-        import { RouterModule } from '@angular/router';
-        import { AppComponent } from './app.component';
+      'src/app/app.routes.ts': `
+        import { Routes } from '@angular/router';
 
-        @NgModule({
-          declarations: [
-            AppComponent
-          ],
-          imports: [
-            RouterModule,
-            BrowserModule
-          ],
-          providers: [],
-          bootstrap: [AppComponent]
-        })
-        export class AppModule { }
+        export const routes: Routes = [];
 
         console.log('$$_E2E_GOLDEN_VALUE_1');
         export let X = '$$_E2E_GOLDEN_VALUE_2';

tests/legacy-cli/e2e/tests/build/app-shell/app-shell-standalone.ts → tests/legacy-cli/e2e/tests/build/app-shell/app-shell-ngmodule.ts

@@ -7,7 +7,7 @@ import { updateJsonFile } from '../../../utils/project';
 const snapshots = require('../../../ng-snapshot/package.json');
 
 export default async function () {
-  await ng('generate', 'app', 'test-project-two', '--routing', '--standalone', '--skip-install');
+  await ng('generate', 'app', 'test-project-two', '--routing', '--no-standalone', '--skip-install');
 
   const useWebpackBuilder = !getGlobalVariable('argv')['esbuild'];
 
@@ -26,11 +26,7 @@ export default async function () {
         ...build.configurations.development,
         vendorChunk: true,
         namedChunks: true,
-        buildOptimizer: false,
       };
-    } else {
-      // TODO(alanagius): enable once esbuild supports standalone route extraction.
-      build.configurations.production.prerender = false;
     }
   });
 

tests/legacy-cli/e2e/tests/build/jit-ngmodule.ts

@@ -0,0 +1,40 @@
+import { getGlobalVariable } from '../../utils/env';
+import { ng } from '../../utils/process';
+import { updateJsonFile, useCIChrome, useCIDefaults } from '../../utils/project';
+
+export default async function () {
+  await ng('generate', 'app', 'test-project-two', '--no-standalone', '--skip-install');
+  await ng('generate', 'e2e', '--related-app-name=test-project-two');
+
+  // Setup testing to use CI Chrome.
+  await useCIChrome('test-project-two', './projects/test-project-two/e2e');
+  await useCIDefaults('test-project-two');
+
+  // Make prod use JIT.
+
+  const useWebpackBuilder = !getGlobalVariable('argv')['esbuild'];
+  // Setup webpack builder if esbuild is not requested on the commandline
+  await updateJsonFile('angular.json', (json) => {
+    const build = json['projects']['test-project-two']['architect']['build'];
+    if (useWebpackBuilder) {
+      build.builder = '@angular-devkit/build-angular:browser';
+      build.options = {
+        ...build.options,
+        main: build.options.browser,
+        browser: undefined,
+        buildOptimizer: false,
+      };
+
+      build.configurations.development = {
+        ...build.configurations.development,
+        vendorChunk: true,
+        namedChunks: true,
+      };
+    }
+
+    build.options.aot = false;
+  });
+  // Test it works
+  await ng('e2e', 'test-project-two', '--configuration=production');
+  await ng('e2e', 'test-project-two', '--configuration=development');
+}

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

@@ -6,37 +6,20 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { readFile, replaceInFile, writeFile } from '../../utils/fs';
+import { replaceInFile, writeFile } from '../../utils/fs';
 import { ng } from '../../utils/process';
 import { updateJsonFile } from '../../utils/project';
 
 export default async function () {
-  const projectName = 'test-project';
-  const appRoutingModulePath = 'src/app/app-routing.module.ts';
-
-  const originalAppRoutingModule = await readFile(appRoutingModulePath);
-  // helper to replace loadChildren
-  const replaceLoadChildren = async (route: string) => {
-    const content = originalAppRoutingModule.replace(
-      'const routes: Routes = [];',
-      `
-       const routes: Routes = [{ path: 'lazy', loadChildren: ${route} }];
-      `,
-    );
-
-    return writeFile(appRoutingModulePath, content);
-  };
-
   // Add lazy route.
-  await ng('generate', 'module', 'lazy', '--routing');
-  await ng('generate', 'component', 'lazy/lazy-comp');
+  await ng('generate', 'component', 'lazy-comp');
   await replaceInFile(
-    'src/app/lazy/lazy-routing.module.ts',
-    'const routes: Routes = [];',
-    `
-      import { LazyCompComponent } from './lazy-comp/lazy-comp.component';
-      const routes: Routes = [{ path: '', component: LazyCompComponent }];
-    `,
+    'src/app/app.routes.ts',
+    'routes: Routes = [];',
+    `routes: Routes = [{
+      path: 'lazy',
+      loadComponent: () => import('./lazy-comp/lazy-comp.component').then(c => c.LazyCompComponent),
+    }];`,
   );
 
   // Add lazy route e2e
@@ -65,15 +48,11 @@ export default async function () {
   // Convert the default config to use JIT and prod to just do AOT.
   // This way we can use `ng e2e` to test JIT and `ng e2e --configuration=production` to test AOT.
   await updateJsonFile('angular.json', (json) => {
-    const buildTarget = json['projects'][projectName]['architect']['build'];
+    const buildTarget = json['projects']['test-project']['architect']['build'];
     buildTarget['options']['aot'] = true;
     buildTarget['configurations']['development']['aot'] = false;
   });
 
-  // Test `import()` style lazy load.
-  // Both Ivy and View Engine should support it.
-  await replaceLoadChildren(`() => import('./lazy/lazy.module').then(m => m.LazyModule)`);
-
   await ng('e2e');
   await ng('e2e', '--configuration=production');
 }

tests/legacy-cli/e2e/tests/build/library-with-demo-app.ts

@@ -6,46 +6,31 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { createDir, writeFile } from '../../utils/fs';
+import { appendToFile, createDir, writeFile } from '../../utils/fs';
 import { ng } from '../../utils/process';
 import { updateJsonFile } from '../../utils/project';
 
 export default async function () {
   await ng('generate', 'library', 'mylib');
-  await createLibraryEntryPoint('secondary', 'SecondaryModule', 'index.ts');
-  await createLibraryEntryPoint('another', 'AnotherModule', 'index.ts');
+  await createLibraryEntryPoint('secondary');
+  await createLibraryEntryPoint('another');
 
   // Scenario #1 where we use wildcard path mappings for secondary entry-points.
   await updateJsonFile('tsconfig.json', (json) => {
     json.compilerOptions.paths = { 'mylib': ['dist/mylib'], 'mylib/*': ['dist/mylib/*'] };
   });
 
-  await writeFile(
-    'src/app/app.module.ts',
+  await appendToFile(
+    'src/app/app.config.ts',
     `
-      import {NgModule} from '@angular/core';
-      import {BrowserModule} from '@angular/platform-browser';
-      import {RouterModule} from '@angular/router';
-      import {SecondaryModule} from 'mylib/secondary';
-      import {AnotherModule} from 'mylib/another';
-
-      import {AppComponent} from './app.component';
-
-      @NgModule({
-        declarations: [
-          AppComponent
-        ],
-        imports: [
-          RouterModule,
-          SecondaryModule,
-          AnotherModule,
-          BrowserModule
-        ],
-        providers: [],
-        bootstrap: [AppComponent]
-      })
-      export class AppModule { }
-    `,
+      import * as secondary from 'mylib/secondary';
+      import * as another from 'mylib/another';
+
+      console.log({
+        secondary,
+        another
+      });
+      `,
   );
 
   await ng('build', 'mylib');
@@ -63,23 +48,15 @@ export default async function () {
   await ng('build');
 }
 
-async function createLibraryEntryPoint(name: string, moduleName: string, entryFileName: string) {
+async function createLibraryEntryPoint(name: string): Promise<void> {
   await createDir(`projects/mylib/${name}`);
-  await writeFile(
-    `projects/mylib/${name}/${entryFileName}`,
-    `
-      import {NgModule} from '@angular/core';
-
-      @NgModule({})
-      export class ${moduleName} {}
-    `,
-  );
+  await writeFile(`projects/mylib/${name}/index.ts`, `export const foo = 'foo';`);
 
   await writeFile(
     `projects/mylib/${name}/ng-package.json`,
     JSON.stringify({
       lib: {
-        entryFile: entryFileName,
+        entryFile: 'index.ts',
       },
     }),
   );