Nx Micro frontend: problem injecting a shared library service into shell/host and remote apps

I am having problem injecting a service from a library into the host and remote applications of my Angular Nx micro frontend. When the service is injected into the constructor of host/shell or the constructor of the remote app and I start the application I get a blank/empty screen instead of the default welcome page of Nx.

I have one host/shell app called host and two remotes: book and marketing. I have a lib folder which contains the shared services like auth and navigation. In the lib folder now I have navigation.service.ts which I want to share between the host and the remote apps.

Here is the structure of my workspace (certain folders and files are omitted for clarity):

workspace
- apps
- host
- book
- marketing
- libs
- navigation
- libs
- src
- navigation.service.ts
- index.ts
- package.json
- tsconfig.base.json


=====> navigation.service.ts

@Injectable({
providedIn: "root"
})
export class NavigationService {
constructor() {
console.log('======constructor=======NavigationService=======')
}
}


=====> index.ts of the lib looks like this

export * from './lib/navigation.service';


==============> tsconfig.base.json : the path section of the workspace's tsconfig.base.json looks like this:

"paths": {
"@connectlemon/navigation": ["libs/core/navigation/src/index.ts"],


========HOST/SHELL APP======> app.ts of the host/shell application looks like this:

@Component({
imports: [RouterModule],
selector: 'app-root',
templateUrl: './app.html',
styleUrl: './app.scss',
})
export class App {
protected title = 'host';

constructor(private navigation: NavigationService) {
console.log('==========App===========')
}
}


Note:: The content of book.ts (the remote app) where i inject the navigation service also looks the same as the code above so am omitting it here for clarity

===============The module-federation.config.ts of the host/shell app looks like this (i havn't make any changes to it) ::

const config: ModuleFederationConfig = {
name: 'host',
/**
* To use a remote that does not exist in your current Nx Workspace
* You can use the tuple-syntax to define your remote
*
* remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
*
* You _may_ need to add a `remotes.d.ts` file to your `src/` folder declaring the external remote for tsc, with the
* following content:
*
* declare module 'my-external-remote';
*
*/
remotes: ['book', 'marketing'],

};

/**
* Nx requires a default export of the config to allow correct resolution of the module federation graph.
**/
export default config;


Note:: The contents of module-federation.config.ts of the remote apps are never edited so am omitting them here for clarity

Now when i run nx serve host --devRemotes=book,marketing from the command line the application starts but i get empty screen instead of the default Nx welcome page. The console.log('==========App===========') inside the host/shell application and the console.log('======constructor=======NavigationService=======') inside the navigation service never get printed in the console.

Besides that there are also no error messages in the console to help me debug the problem.

(When I comment out the injections then everything works fine)

What am I doing wrong?

Continue reading...