feat(angular): use provideRouter for standalone remote apps (#18468)

nrwl · Aug 3, 2023 · 64492ec · 64492ec · vercel · Aug 3, 2023
1 parent e9d50af
commit 64492ec
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 34 deletions.
diff --git a/packages/angular/src/generators/remote/__snapshots__/remote.spec.ts.snap b/packages/angular/src/generators/remote/__snapshots__/remote.spec.ts.snap
@@ -252,19 +252,13 @@ module.exports = withModuleFederation(config);
 `;
 
 exports[`MF Remote App Generator should generate the a remote setup for standalone components 1`] = `
-"import { importProvidersFrom } from '@angular/core';
-import { bootstrapApplication } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
+"import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
 import { RemoteEntryComponent } from './app/remote-entry/entry.component';
-import { appRoutes } from './app/app.routes';
 
-bootstrapApplication(RemoteEntryComponent, {
-  providers: [
-    importProvidersFrom(
-      RouterModule.forRoot(appRoutes, { initialNavigation: 'enabledBlocking' })
-    ),
-  ],
-});
+bootstrapApplication(RemoteEntryComponent, appConfig).catch((err) =>
+  console.error(err)
+);
 "
 `;
 

diff --git a/packages/angular/src/generators/setup-mf/lib/fix-bootstrap.ts b/packages/angular/src/generators/setup-mf/lib/fix-bootstrap.ts
@@ -35,11 +35,9 @@ export function fixBootstrap(tree: Tree, appRoot: string, options: Schema) {
 
 const standaloneBootstrapCode = (
   includeEnvironments: boolean = false
-) => `import {importProvidersFrom} from "@angular/core";
-import {bootstrapApplication} from "@angular/platform-browser";
-import {RouterModule} from "@angular/router";
-import {RemoteEntryComponent} from "./app/remote-entry/entry.component";
-import {appRoutes} from "./app/app.routes";
+) => `import {bootstrapApplication} from "@angular/platform-browser";
+import {appConfig} from './app/app.config';
+import {RemoteEntryComponent} from './app/remote-entry/entry.component';
 ${
   includeEnvironments
     ? `import {enableProdMode} from '@angular/core';
@@ -50,10 +48,6 @@ if(environment.production) {
 `
     : ``
 }
-bootstrapApplication(RemoteEntryComponent, {
-  providers: [
-    importProvidersFrom(
-      RouterModule.forRoot(appRoutes, {initialNavigation: 'enabledBlocking'})
-    )
-  ]
-});`;
+bootstrapApplication(RemoteEntryComponent, appConfig).catch((err) =>
+  console.error(err)
+);`;
diff --git a/packages/angular/src/generators/setup-mf/setup-mf.spec.ts b/packages/angular/src/generators/setup-mf/setup-mf.spec.ts
@@ -357,24 +357,18 @@ describe('Init MF', () => {
     // ASSERT
     expect(tree.read('apps/ng14/src/bootstrap.ts', 'utf-8'))
       .toMatchInlineSnapshot(`
-      "import { importProvidersFrom } from '@angular/core';
-      import { bootstrapApplication } from '@angular/platform-browser';
-      import { RouterModule } from '@angular/router';
+      "import { bootstrapApplication } from '@angular/platform-browser';
+      import { appConfig } from './app/app.config';
       import { RemoteEntryComponent } from './app/remote-entry/entry.component';
-      import { appRoutes } from './app/app.routes';
       import { enableProdMode } from '@angular/core';
       import { environment } from './environments/environment';
       if (environment.production) {
         enableProdMode();
       }
 
-      bootstrapApplication(RemoteEntryComponent, {
-        providers: [
-          importProvidersFrom(
-            RouterModule.forRoot(appRoutes, { initialNavigation: 'enabledBlocking' })
-          ),
-        ],
-      });
+      bootstrapApplication(RemoteEntryComponent, appConfig).catch((err) =>
+        console.error(err)
+      );
       "
     `);
   });