Angular 19 - Problem to create microfrontend solution

I have issues with creating simple angular app with microfrontends.

I think I tried around 70 times, but always stuck on same place. Last try I tried to reconstruct from this video: https://www.youtube.com/watch?v=B4hAOf5lArk

But of course, my microfrontend didn't loading on host.

I made few changes in my approach like:

• my microfrontend is not microfrontend, its in microfrontends directory named auth
• I named my component login in auth microfrontend

Current status:

http://localhost:4201 - loading pretty fine http://localhost:4201/remoteEntry.json - loading pretty fine with this:

"exposes": [
{
"key": "./Component",
"outFileName": "Component.js",
"dev": {
"entryPoint": "/Users/myusername/WebstormProjects/Hekate.Portal/microfrontends/auth/src/app/pages/login/login.component.ts"
}
}
]


http://localhost:4200 - nothing shows up in my browser

Ok, lets move to the code (I post only changed files by me, not generated automatically by commands in a video).

First - auth microfrontend: login.component.html:

<p>login works!</p>


app.component.html:

<app-login>

</app-login>


app.component.ts:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {LoginComponent} from './pages/login/login.component';

@Component({
selector: 'app-root',
imports: [LoginComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
title = 'auth';
}


and federation.config.js:

const { withNativeFederation, shareAll } = require('@angular-architects/native-federation/config');

module.exports = withNativeFederation({

name: 'auth',

exposes: {
'./Component': './src/app/pages/login/login.component.ts',
},

shared: {
...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
},

skip: [
'rxjs/ajax',
'rxjs/fetch',
'rxjs/testing',
'rxjs/webSocket',
// Add further packages you don't need at runtime
]

// Please read our FAQ about sharing libs:
// https://shorturl.at/jmzH0

});


Now move on to host:

federation.manifest.json:

{
"mfe1": "http://localhost:4201/remoteEntry.json"
}


app.routes.ts:

import { Routes } from '@angular/router';
import {loadRemoteModule} from '@angular-architects/native-federation';

export const routes: Routes = [
{
path: 'login',
loadComponent: () => loadRemoteModule('mfe1', './Component')
.then((m) => m.HomeComponent),
}
];


and app.component.html:

<router-outlet></router-outlet>


What im doing wrong? If somebody want to check whole project, I made it public for it for now: https://github.com/oliwier93/Hekate.Portal

Continue reading...