feat(angular): create routes file pattern (#11930)

add host remote correctly

library routes

fix tests

docs/generated/packages/angular.json

@@ -892,10 +892,9 @@
             "default": false,
             "description": "Add `RouterModule.forChild` when set to true, and a simple array of routes when set to false."
           },
-          "parentModule": {
+          "parent": {
             "type": "string",
-            "description": "Update the router configuration of the parent module using `loadChildren` or `children`, depending on what `lazy` is set to.",
-            "alias": "parent"
+            "description": "Path to the parent route configuration using `loadChildren` or `children`, depending on what `lazy` is set to."
           },
           "tags": {
             "type": "string",

packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap

@@ -30,17 +30,24 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
 import { AppComponent } from './app/app.component';
 import { environment } from './environments/environment';
+import { appRoutes } from './app/app.routes';
 
 if (environment.production) {
   enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
-  providers: [importProvidersFrom(RouterModule.forRoot([], {initialNavigation: 'enabledBlocking'}))],
+  providers: [importProvidersFrom(RouterModule.forRoot(appRoutes, {initialNavigation: 'enabledBlocking'}))],
 }).catch((err) => console.error(err));"
 `;
 
 exports[`app --standalone should generate a standalone app correctly with routing 2`] = `
+"import { Route } from '@angular/router';
+
+export const appRoutes: Route[] = [];"
+`;
+
+exports[`app --standalone should generate a standalone app correctly with routing 3`] = `
 "import { NxWelcomeComponent } from './nx-welcome.component';
 import { RouterModule } from '@angular/router';
 import { Component } from '@angular/core';
@@ -57,7 +64,7 @@ export class AppComponent {
 }"
 `;
 
-exports[`app --standalone should generate a standalone app correctly with routing 3`] = `
+exports[`app --standalone should generate a standalone app correctly with routing 4`] = `
 "import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { NxWelcomeComponent } from './nx-welcome.component';
@@ -96,6 +103,7 @@ import { bootstrapApplication } from '@angular/platform-browser';;
 import { AppComponent } from './app/app.component';
 import { environment } from './environments/environment';
 
+
 if (environment.production) {
   enableProdMode();
 }

packages/angular/src/generators/application/application.spec.ts

@@ -1089,6 +1089,9 @@ describe('app', () => {
       expect(
         appTree.read('apps/standalone/src/main.ts', 'utf-8')
       ).toMatchSnapshot();
+      expect(
+        appTree.read('apps/standalone/src/app/app.routes.ts', 'utf-8')
+      ).toMatchSnapshot();
       expect(
         appTree.read('apps/standalone/src/app/app.component.ts', 'utf-8')
       ).toMatchSnapshot();

packages/angular/src/generators/application/files/src/app/app.routes.ts__tpl__

@@ -0,0 +1,3 @@
+import { Route } from '@angular/router';
+
+export const appRoutes: Route[] = [];

packages/angular/src/generators/application/lib/convert-to-standalone-app.ts

@@ -56,6 +56,7 @@ import { RouterModule } from '@angular/router'`
 };
 import { AppComponent } from './app/app.component';
 import { environment } from './environments/environment';
+${routerModuleSetup ? `import { appRoutes } from './app/app.routes';` : ''}
 
 if (environment.production) {
   enableProdMode();

packages/angular/src/generators/application/lib/create-files.ts

@@ -3,18 +3,24 @@ import { generateFiles, joinPathFragments } from '@nrwl/devkit';
 import { getRelativePathToRootTsConfig } from '@nrwl/workspace/src/utilities/typescript';
 import type { NormalizedSchema } from './normalized-schema';
 
-export function createFiles(host: Tree, options: NormalizedSchema) {
+export function createFiles(tree: Tree, options: NormalizedSchema) {
   generateFiles(
-    host,
+    tree,
     joinPathFragments(__dirname, '../files'),
     options.appProjectRoot,
     {
       ...options,
       rootTsConfigPath: getRelativePathToRootTsConfig(
-        host,
+        tree,
         options.appProjectRoot
       ),
       tpl: '',
     }
   );
+
+  if (!options.routing) {
+    tree.delete(
+      joinPathFragments(options.appProjectRoot, 'src/app/app.routes.ts')
+    );
+  }
 }

packages/angular/src/generators/application/lib/root-router-config.ts

@@ -26,10 +26,17 @@ export function addRouterRootConfiguration(
     'RouterModule',
     '@angular/router'
   );
+  sourceFile = insertImport(
+    host,
+    sourceFile,
+    modulePath,
+    'appRoutes',
+    './app.routes'
+  );
   sourceFile = addImportToModule(
     host,
     sourceFile,
     modulePath,
-    `RouterModule.forRoot([], {initialNavigation: 'enabledBlocking'})`
+    `RouterModule.forRoot(appRoutes, {initialNavigation: 'enabledBlocking'})`
   );
 }

packages/angular/src/generators/host/__snapshots__/host.spec.ts.snap

@@ -19,28 +19,20 @@ module.exports = withModuleFederation(config);"
 `;
 
 exports[`Host App Generator should generate a host with remotes using standalone components 1`] = `
-"import { NxWelcomeComponent } from './app/nx-welcome.component';
-    import { enableProdMode, importProvidersFrom } from '@angular/core';
+"import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
 import { AppComponent } from './app/app.component';
 import { environment } from './environments/environment';
+import { appRoutes } from './app/app.routes';
 
 if (environment.production) {
   enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
-  providers: [importProvidersFrom(RouterModule.forRoot([
-    {
-      path: '',
-      component: NxWelcomeComponent
-    },
-    {
-    path: 'remote1',
-    loadChildren: () => import('remote1/Routes').then(m => m.RemoteRoutes)
-    },], {initialNavigation: 'enabledBlocking'}))],
-}).catch((err) => console.error(err)"
+  providers: [importProvidersFrom(RouterModule.forRoot(appRoutes, {initialNavigation: 'enabledBlocking'}))],
+}).catch((err) => console.error(err));"
 `;
 
 exports[`Host App Generator should generate a host with remotes using standalone components 2`] = `

packages/angular/src/generators/host/host.ts

@@ -12,8 +12,7 @@ import applicationGenerator from '../application/application';
 import remoteGenerator from '../remote/remote';
 import { normalizeProjectName } from '../utils/project';
 import * as ts from 'typescript';
-import { addRoute } from '../../utils/nx-devkit/ast-utils';
-import { addStandaloneRoute } from '../../utils/nx-devkit/standalone-utils';
+import { addRoute } from '../../utils/nx-devkit/route-utils';
 import { setupMf } from '../setup-mf/setup-mf';
 import { E2eTestRunner } from '../../utils/test-runners';
 
@@ -106,13 +105,10 @@ ${remoteRoutes}
 
   const pathToHostRootRoutingFile = joinPathFragments(
     sourceRoot,
-    options.standalone ? 'bootstrap.ts' : 'app/app.module.ts'
+    'app/app.routes.ts'
   );
-  const hostRootRoutingFile = tree.read(pathToHostRootRoutingFile, 'utf-8');
 
-  if (!hostRootRoutingFile.includes('RouterModule.forRoot(')) {
-    return;
-  }
+  const hostRootRoutingFile = tree.read(pathToHostRootRoutingFile, 'utf-8');
 
   let sourceFile = ts.createSourceFile(
     pathToHostRootRoutingFile,
@@ -121,32 +117,20 @@ ${remoteRoutes}
     true
   );
 
-  if (hostRootRoutingFile.includes('@NgModule')) {
-    sourceFile = addRoute(
-      tree,
-      pathToHostRootRoutingFile,
-      sourceFile,
-      `{
-         path: '', 
-         component: NxWelcomeComponent
-     }`
-    );
-  } else {
-    addStandaloneRoute(
-      tree,
-      pathToHostRootRoutingFile,
-      `{
+  addRoute(
+    tree,
+    pathToHostRootRoutingFile,
+    `{
       path: '',
       component: NxWelcomeComponent
     }`
-    );
+  );
 
-    tree.write(
-      pathToHostRootRoutingFile,
-      `import { NxWelcomeComponent } from './app/nx-welcome.component';
+  tree.write(
+    pathToHostRootRoutingFile,
+    `import { NxWelcomeComponent } from './nx-welcome.component';
     ${tree.read(pathToHostRootRoutingFile, 'utf-8')}`
-    );
-  }
+  );
 
   generateFiles(
     tree,

packages/angular/src/generators/library/__snapshots__/library.spec.ts.snap

@@ -169,14 +169,14 @@ describe('MyLibComponent', () => {
 
 exports[`lib --standalone should generate a library with a standalone component as entry point with routing setup 1`] = `
 "export * from \\"./lib/my-lib/my-lib.component\\";
-        export * from './lib/routes'"
+        export * from './lib/lib.routes'"
 `;
 
 exports[`lib --standalone should generate a library with a standalone component as entry point with routing setup 2`] = `
 "import { Route } from '@angular/router';
     import { MyLibComponent } from './my-lib/my-lib.component';
     
-        export const MYLIB_ROUTES: Route[] = [
+        export const myLibRoutes: Route[] = [
           {path: '', component: MyLibComponent}
         ];"
 `;
@@ -232,77 +232,43 @@ describe('MyLibComponent', () => {
 
 exports[`lib --standalone should generate a library with a standalone component as entry point with routing setup and attach it to parent module as a lazy child 1`] = `
 "export * from \\"./lib/my-lib/my-lib.component\\";
-        export * from './lib/routes'"
+        export * from './lib/lib.routes'"
 `;
 
 exports[`lib --standalone should generate a library with a standalone component as entry point with routing setup and attach it to parent module as a lazy child 2`] = `
 "import { Route } from '@angular/router';
     import { MyLibComponent } from './my-lib/my-lib.component';
     
-        export const MYLIB_ROUTES: Route[] = [
+        export const myLibRoutes: Route[] = [
           {path: '', component: MyLibComponent}
         ];"
 `;
 
 exports[`lib --standalone should generate a library with a standalone component as entry point with routing setup and attach it to parent module as a lazy child 3`] = `
-"import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { NxWelcomeComponent } from './nx-welcome.component';
-import { RouterModule } from '@angular/router';
+"import { Route } from '@angular/router';
 
-@NgModule({
-  declarations: [
-    AppComponent,
-    NxWelcomeComponent
-  ],
-  imports: [
-    BrowserModule,
-    RouterModule.forRoot([{path: 'my-lib', loadChildren: () => import('@proj/my-lib').then(m => m.MYLIB_ROUTES)}], {initialNavigation: 'enabledBlocking'})
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-"
+export const appRoutes: Route[] = [
+    {path: 'my-lib', loadChildren: () => import('@proj/my-lib').then(m => m.myLibRoutes)},]"
 `;
 
 exports[`lib --standalone should generate a library with a standalone component as entry point with routing setup and attach it to parent module as direct child 1`] = `
 "export * from \\"./lib/my-lib/my-lib.component\\";
-        export * from './lib/routes'"
+        export * from './lib/lib.routes'"
 `;
 
 exports[`lib --standalone should generate a library with a standalone component as entry point with routing setup and attach it to parent module as direct child 2`] = `
 "import { Route } from '@angular/router';
     import { MyLibComponent } from './my-lib/my-lib.component';
     
-        export const MYLIB_ROUTES: Route[] = [
+        export const myLibRoutes: Route[] = [
           {path: '', component: MyLibComponent}
         ];"
 `;
 
 exports[`lib --standalone should generate a library with a standalone component as entry point with routing setup and attach it to parent module as direct child 3`] = `
-"import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { NxWelcomeComponent } from './nx-welcome.component';
-import { RouterModule } from '@angular/router';
-import { MYLIB_ROUTES } from '@proj/my-lib';
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    NxWelcomeComponent
-  ],
-  imports: [
-    BrowserModule,
-    RouterModule.forRoot([{ path: 'my-lib', children: MYLIB_ROUTES }], {initialNavigation: 'enabledBlocking'})
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-"
+"import { Route } from '@angular/router';
+import { myLibRoutes } from '@proj/my-lib';
+
+export const appRoutes: Route[] = [
+    { path: 'my-lib', children: myLibRoutes },]"
 `;