Fixed multi instantiation #673

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Fixed error when importing `once` without context (#664)
 - Fixed issue with monorepos using Rush (#667)
 - Fixed issue with blocked port in case of full debug reload (#671)
+- Fixed `@Inject` with multiple instances in `piral-ng` (#673)
 - Removed legacy option in `piral-cli-webpack5` to support IE8
 - Removed pilet-related options in debug settings when running `piral debug` (#670)
 - Improved internal navigation Blazor pilets using `piral-blazor`

src/converters/piral-ng/README.md

@@ -363,6 +363,8 @@ Depending on your Angular needs you'd want to share more packages.
 
 Depending on the mounted component different services are injected. the following table lists the names of the injected services per component type.
 
+**Important**: These are all meant as constructor injectors. As injected services are always singletons in Angular you will *never* receive a changed value on them. Therefore, only use these values in the constructor and **don't** capture them. You might capture / store values *inside* the props (e.g., `props.params`), but don't capture the injected props. Instead, use `@Input` (see next section) if you need to continuously monitor the props.
+
 | Component | Props   | Piral   | Context   |
 |-----------|---------|---------|-----------|
 | Tile      | `Props` | `piral` | `Context` |
@@ -379,12 +381,15 @@ The following code snippet illustrates the injection of the `Props` service from
 @Component({
   template: `
     <div class="tile">
-      <p>{{ props.rows }} rows and {{ props.columns }} columns</p>
+      <p>{{ rows }} rows and {{ cols }} columns</p>
     </div>
   `,
 })
 export class SampleTileComponent {
-  constructor(@Inject('Props') public props: TileComponentProps<any>) {}
+  constructor(@Inject('Props') props: TileComponentProps<any>) {
+    this.rows = props.rows;
+    this.cols = props.columns;
+  }
 }
 ```
 

src/converters/piral-ng/src/module.ts

@@ -30,10 +30,16 @@ const availableModules: Array<ModuleDefinition> = [];
 function instantiateModule(moduleDef: ModuleDefinition, piral: PiletApi) {
   const { module, components } = moduleDef;
   const imports = [BrowserModule, SharedModule, module];
-  const props = { current: undefined as BehaviorSubject<any> };
+  const props = { current: undefined };
+  const createProxy = () =>
+    new Proxy(props.current, {
+      get(_, name) {
+        return props.current[name];
+      },
+    });
   const providers = [
     RoutingService,
-    { provide: 'Props', useFactory: () => props.current.value, deps: [] },
+    { provide: 'Props', useFactory: createProxy, deps: [] },
     { provide: 'piral', useFactory: () => piral, deps: [] },
   ];
 
@@ -60,7 +66,7 @@ function instantiateModule(moduleDef: ModuleDefinition, piral: PiletApi) {
 
     attach(component: any, node: HTMLElement, $props: BehaviorSubject<any>) {
       const factory = this.resolver.resolveComponentFactory(component);
-      props.current = $props;
+      props.current = $props.value;
 
       if (factory) {
         const ref = this.zone.run(() => this.appRef.bootstrap<any>(factory, node));