fix: add core library for shared access purpose

Author: Alain BOUDARD

application/ng-shell/package-lock.json

@@ -20,6 +20,9 @@
     "@angular/platform-browser": "^14.2.0",
     "@angular/platform-browser-dynamic": "^14.2.0",
     "@angular/router": "^14.2.0",
+    "@ngrx/store": "^14.3.3",
+    "@ngrx/store-devtools": "^14.3.3",
+    "core": "0.0.2",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

application/ng-shell/package.json

@@ -1,5 +1,6 @@
 <h1>{{title}}</h1>
 <ul>
+  <li class="user">## {{(user$ | async)?.name}} ##</li>
   <li><a routerLink="/">Home</a></li>
   <li><a routerLink="users">Users</a></li>
   <li *ngFor="let remote of remotes">

application/ng-shell/src/app/app.component.html

@@ -0,0 +1,3 @@
+li.user {
+  color: crimson;
+}

application/ng-shell/src/app/app.component.scss

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { getUser } from 'core';
 import { CustomManifest, CustomRemoteConfig } from './utils/config';
 import { getManifest, loadManifest } from '@angular-architects/module-federation';
 import { buildRoutes } from './utils/routes';
@@ -10,11 +12,15 @@ import { buildRoutes } from './utils/routes';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
+
   title = 'ng-shell';
   remotes: CustomRemoteConfig[] = [];
+  user$ = this.store.select(getUser);
 
   constructor(
-    private router: Router) {
+    private router: Router,
+    private store: Store
+  ) {
   }
 
   async ngOnInit() {

application/ng-shell/src/app/app.component.ts

@@ -1,9 +1,14 @@
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { CoreModule } from 'core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { environment } from '../environments/environment';
+import { reducers, metaReducers } from './store';
 
 @NgModule({
   declarations: [
@@ -12,7 +17,10 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     HttpClientModule,
-    AppRoutingModule
+    AppRoutingModule,
+    StoreModule.forRoot(reducers, { metaReducers }),
+    CoreModule,
+    !environment.production ? StoreDevtoolsModule.instrument() : []
   ],
   providers: [],
   bootstrap: [AppComponent]

application/ng-shell/src/app/app.module.ts

@@ -0,0 +1,20 @@
+import {
+  ActionReducer,
+  ActionReducerMap,
+  createFeatureSelector,
+  createSelector,
+  MetaReducer
+} from '@ngrx/store';
+import { environment } from '../../environments/environment';
+
+
+export interface State {
+
+}
+
+export const reducers: ActionReducerMap<State> = {
+
+};
+
+
+export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];

application/ng-shell/src/app/store/index.ts

@@ -1,9 +1,14 @@
-const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');
+const { share, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');
 
 module.exports = withModuleFederationPlugin({
 
-  shared: {
-    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
-  },
+  // Explicitly share packages:
+  shared: share({
+    "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
+    "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
+    "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
+    "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
+    "@ngrx/store": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
+  })
 
 });

application/ng-shell/webpack.config.js

@@ -33,13 +33,13 @@ public String index() {
 	}
 
 	@GetMapping("/api/manifest")
-	public EmptyObject microfontend() {
+	/*public EmptyObject microfontend() {
 		return new EmptyObject();
-	}
-	/*public MicroFrontend microfontend() {
+	}*/
+	public MicroFrontend microfontend() {
 		Manifest mfe1 = new Manifest(remoteEntry, exposedModule, displayName, routePath, ngModuleName, type);
 		return new MicroFrontend(mfe1);
-	}*/
+	}
 
 	public static class MicroFrontend {
 		private Manifest mfe1;