Angular 18.2 Native Federation, Firebase "serve" command doesn't work as expected

I am trying to create an angular project to work with the Firebase (@angular/fire) and Native Federation in an NX Monorepo.

This is my setup: tsconfig.base.json

{
"compileOnSave": false,
"compilerOptions": {
"rootDir": ".",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "ES2022",
"module": "esnext",
"lib": ["ES2022", "dom"],
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"baseUrl": ".",
"paths": {
"@ethi/common": ["libs/common/src/index.ts"],
"@ethi/schema": ["libs/schema/src/index.ts"]
}
},
"exclude": ["node_modules", "tmp"]
}


package.json

{
"name": "@ethi/source",
"version": "0.0.0",
"license": "MIT",
"scripts": {},
"private": true,
"dependencies": {
"@angular/animations": "~18.2.0",
"@angular/common": "~18.2.0",
"@angular/compiler": "~18.2.0",
"@angular/core": "~18.2.0",
"@angular/fire": "^18",
"@angular/forms": "~18.2.0",
"@angular/platform-browser": "~18.2.0",
"@angular/platform-browser-dynamic": "~18.2.0",
"@angular/router": "~18.2.0",
"es-module-shims": "^1.5.12",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
},
"devDependencies": {
"@angular-architects/native-federation": "^18.2.2",
"@angular-devkit/build-angular": "~18.2.0",
"@angular-devkit/core": "~18.2.0",
"@angular-devkit/schematics": "~18.2.0",
"@angular-eslint/eslint-plugin": "^18.0.1",
"@angular-eslint/eslint-plugin-template": "^18.0.1",
"@angular-eslint/template-parser": "^18.0.1",
"@angular/cli": "~18.2.0",
"@angular/compiler-cli": "~18.2.0",
"@angular/language-service": "~18.2.0",
"@nx/angular": "19.7.3",
"@nx/eslint": "19.7.3",
"@nx/eslint-plugin": "19.7.3",
"@nx/jest": "19.7.3",
"@nx/js": "19.7.3",
"@nx/node": "19.7.3",
"@nx/web": "19.7.3",
"@nx/workspace": "19.7.3",
"@schematics/angular": "~18.2.0",
"@swc-node/register": "~1.9.1",
"@swc/core": "~1.5.7",
"@swc/helpers": "~0.5.11",
"@types/jest": "^29.5.12",
"@types/node": "18.16.9",
"@typescript-eslint/eslint-plugin": "^7.16.0",
"@typescript-eslint/parser": "^7.16.0",
"@typescript-eslint/utils": "^7.16.0",
"eslint": "~8.57.0",
"eslint-config-prettier": "^9.0.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jest-environment-node": "^29.7.0",
"jest-preset-angular": "~14.1.0",
"nx": "19.7.3",
"prettier": "^2.6.2",
"ts-jest": "^29.1.0",
"ts-node": "10.9.1",
"typescript": "~5.5.2"
}
}


app.config.ts

export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(appRoutes),
provideFirebaseApp(() => initializeApp(environments.firebase),
provideAuth(() => getAuth()),
provideFirestore(() => getFirestore()),
provideFunctions(() => getFunctions()),
],
};


app.routes.ts

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);
const redirectLoggedInToHome = () => redirectLoggedInTo(['home']);

export const appRoutes: Routes = [
{
path: '',
component: HomeComponent,
pathMatch: 'full',
canActivate: [AuthGuard],
data: { authGuardPipe: redirectUnauthorizedToLogin },
},
{
path: 'home',
component: HomeComponent,
pathMatch: 'full',
canActivate: [AuthGuard],
data: { authGuardPipe: redirectUnauthorizedToLogin },
},
{
path: 'login',
component: LoginPageComponent,
canActivate: [AuthGuard],
data: { authGuardPipe: redirectLoggedInToHome },
},
];


app.component.ts

@Component({
standalone: true,
imports: [CommonModule, RouterModule],
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent {
title = 'broker-bi';
}


When I run the application through nx run broker-bi:serve-original it runs as expected but with no native federation. When I run it through nx run broker-bi:serve I get the following error:

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).
at getApp (_angular_fire_auth.r5LpLF_iJr-dev.js:1538:25)
at getAuth (_angular_fire_auth.r5LpLF_iJr-dev.js:9174:24)
at _angular_fire.hX3GNn6leI-dev.js:1316:44
at _angular_fire.hX3GNn6leI-dev.js:1263:57
at _ZoneDelegate.invoke (zone.js:369:28)
at _ZoneImpl.run (zone.js:111:43)
at _NgZone.runOutsideAngular (_angular_core.lGU3keLAQ5-dev.js:4134:24)
at runOutsideAngular (_angular_fire.hX3GNn6leI-dev.js:1263:33)
at _angular_fire.hX3GNn6leI-dev.js:1316:17
at app.config.ts:24:23


What am I dong wrong?

Continue reading...