fix: standalone router api & component input binding

Author: Alain Boudard

application/ng-shell/src/bootstrap.ts

@@ -10,18 +10,19 @@ import { withInterceptorsFromDi, provideHttpClient } from '@angular/common/http'
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 import { CustomPageTitleStrategy } from './app/services/custom-page-title-strategy';
-import { RouterModule, TitleStrategy } from '@angular/router';
+import { provideRouter, TitleStrategy, withComponentInputBinding, withHashLocation, withRouterConfig } from '@angular/router';
 
 if (environment.production) {
   enableProdMode();
 }
 
 bootstrapApplication(AppComponent, {
     providers: [
+        provideRouter(APP_ROUTES, withComponentInputBinding(), withHashLocation(), withRouterConfig({paramsInheritanceStrategy: 'always'})),
+
         importProvidersFrom(
             FormsModule,
             BrowserModule,
-            RouterModule.forRoot(APP_ROUTES, { useHash: true  }),
             StoreModule.forRoot(reducers, { metaReducers }),
             CoreModule,
             !environment.production ? StoreDevtoolsModule.instrument() : []),

library/mfe1/src/app/orders/view/view.component.html

@@ -1,2 +1,2 @@
 <h2>Detail view of order ID</h2>
-<h3>Order N° : </h3>
+<h3>Order N° : {{ id }}</h3>

library/mfe1/src/app/orders/view/view.component.ts

@@ -9,12 +9,6 @@ import { Component, Input } from '@angular/core';
 })
 export class ViewComponent {
 
-    // @Input() id!: string;
-
-  // public id$: Observable<any>;
-
-  /*constructor(private activatedRoute: ActivatedRoute) {
-    this.id$ = this.activatedRoute.params.pipe(map((p) => p['id']));
-  }*/
+    @Input() id!: string;
 
 }

library/mfe1/src/bootstrap.ts

@@ -1,5 +1,5 @@
 import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { provideRouter, withComponentInputBinding, withHashLocation, withRouterConfig } from '@angular/router';
 import { APP_ROUTES } from './app/app.routes';
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
@@ -15,9 +15,11 @@ if (environment.production) {
 
 bootstrapApplication(AppComponent, {
     providers: [
+
+        provideRouter(APP_ROUTES, withComponentInputBinding(), withHashLocation(), withRouterConfig({paramsInheritanceStrategy: 'always'})),
+
         importProvidersFrom(
             BrowserModule,
-            RouterModule.forRoot(APP_ROUTES, { useHash: true }),
             StoreModule.forRoot(reducers, { metaReducers }),
             !environment.production ? StoreDevtoolsModule.instrument() : []),
         provideHttpClient(withInterceptorsFromDi())