diff --git a/packages/angular/src/generators/remote/__snapshots__/remote.spec.ts.snap b/packages/angular/src/generators/remote/__snapshots__/remote.spec.ts.snap index db020db8e7535..7470ddc361e97 100644 --- a/packages/angular/src/generators/remote/__snapshots__/remote.spec.ts.snap +++ b/packages/angular/src/generators/remote/__snapshots__/remote.spec.ts.snap @@ -232,17 +232,12 @@ module.exports = withModuleFederation(config);" `; exports[`MF Remote App Generator should generate the a remote setup for standalone components 1`] = ` -"import {environment} from \\"./environments/environment\\"; -import {enableProdMode, importProvidersFrom} from \\"@angular/core\\"; +"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\\"; -if (environment.production) { - enableProdMode(); -} - bootstrapApplication(RemoteEntryComponent, { providers: [ importProvidersFrom( diff --git a/packages/angular/src/generators/setup-mf/lib/fix-bootstrap.ts b/packages/angular/src/generators/setup-mf/lib/fix-bootstrap.ts index dd8d3ac1c2a0e..8f6721c6f1eb8 100644 --- a/packages/angular/src/generators/setup-mf/lib/fix-bootstrap.ts +++ b/packages/angular/src/generators/setup-mf/lib/fix-bootstrap.ts @@ -1,12 +1,17 @@ import type { Tree } from '@nrwl/devkit'; import { joinPathFragments } from '@nrwl/devkit'; import type { Schema } from '../schema'; +import { getInstalledAngularMajorVersion } from '../../utils/version-utils'; export function fixBootstrap(tree: Tree, appRoot: string, options: Schema) { const mainFilePath = joinPathFragments(appRoot, 'src/main.ts'); const bootstrapCode = tree.read(mainFilePath, 'utf-8'); + const installedAngularMajor = getInstalledAngularMajorVersion(tree); if (options.standalone) { - tree.write(`${appRoot}/src/bootstrap.ts`, standaloneBootstrapCode); + tree.write( + `${appRoot}/src/bootstrap.ts`, + standaloneBootstrapCode(installedAngularMajor === 14) + ); } else { tree.write(joinPathFragments(appRoot, 'src/bootstrap.ts'), bootstrapCode); } @@ -28,17 +33,23 @@ export function fixBootstrap(tree: Tree, appRoot: string, options: Schema) { ); } -const standaloneBootstrapCode = `import {environment} from "./environments/environment"; -import {enableProdMode, importProvidersFrom} from "@angular/core"; +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"; - -if (environment.production) { +${ + includeEnvironments + ? `import {enableProdMode} from '@angular/core'; +import {environment} from './environments/environment'; +if(environment.production) { enableProdMode(); } - +` + : `` +} bootstrapApplication(RemoteEntryComponent, { providers: [ importProvidersFrom( diff --git a/packages/angular/src/generators/setup-mf/setup-mf.spec.ts b/packages/angular/src/generators/setup-mf/setup-mf.spec.ts index ab2430f7c9aa9..4f30836755d4b 100644 --- a/packages/angular/src/generators/setup-mf/setup-mf.spec.ts +++ b/packages/angular/src/generators/setup-mf/setup-mf.spec.ts @@ -317,6 +317,54 @@ describe('Init MF', () => { }); }); + it('should generate bootstrap with environments for ng14', async () => { + // ARRANGE + updateJson(tree, 'package.json', (json) => ({ + ...json, + dependencies: { + ...json.dependencies, + '@angular/core': '14.1.0', + }, + })); + + await applicationGenerator(tree, { + name: 'ng14', + routing: true, + standalone: true, + }); + + // ACT + await setupMf(tree, { + appName: 'ng14', + mfType: 'host', + routing: true, + standalone: true, + }); + + // 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 {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'}) + ) + ] + });" + `); + }); + it('should add a remote to dynamic host correctly', async () => { // ARRANGE await setupMf(tree, { diff --git a/packages/angular/src/utils/nx-devkit/testing.ts b/packages/angular/src/utils/nx-devkit/testing.ts index ab78f3c7c9de7..8b1c45f941e88 100644 --- a/packages/angular/src/utils/nx-devkit/testing.ts +++ b/packages/angular/src/utils/nx-devkit/testing.ts @@ -53,15 +53,9 @@ export function createApp( tree.write( `/apps/${appName}/src/main.ts`, ` - import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; - import { environment } from './environments/environment'; - - if (environment.production) { - enableProdMode(); - } platformBrowserDynamic() .bootstrapModule(AppModule)