- fixed typo in readme

 - made visualisation a bit more clear

Author: faileon

README.md

@@ -1,7 +1,7 @@
 # Plugin Architektura s Webpack5, NX a Angular 14+ (Ivy + AOT)
 ## Jak spustit:
 1. Vybuildit plugin a widget (mělo by být součástí gitu, lze přeskočit na krok 3.)
-   1. `npm run build:all`
+   1. `npm run build:remotes`
 1. přetáhnout obsah složky `dist/apps` do `apps/shell/assets` (v assets tedy bude složka `plugins` a `widgets`)
 1. spustit aplikaci pomocí: `nx run shell:serve:production`
 1. otevřít [aplikaci](http://localhost:4200)

apps/plugins/calendar/src/app/exposed/exposed.component.html

@@ -1,2 +1,5 @@
 <p>exposed component from calendar plugin</p>
-<p>{{randomService.randomString$ | async}}</p>
+<p class="component">
+  <strong>Sdílený stav aplikace v pluginu:</strong>
+  {{randomService.randomString$ | async}}
+</p>

apps/plugins/calendar/src/app/exposed/exposed.component.scss

@@ -0,0 +1,10 @@
+:host {
+  border: 1px dashed red;
+  border-radius: 1rem;
+  padding: 1rem;
+
+  .component {
+    display: flex;
+    flex-direction: column;
+  }
+}

apps/shell/src/app/app.component.html

@@ -1,5 +1,8 @@
 <h1>{{title}}</h1>
-<p>{{randomService.randomString$ | async}}</p>
+<p class="component">
+  <strong>Sdílený stav v aplikaci:</strong>
+  {{randomService.randomString$ | async}}
+</p>
 
 <ul class="remote-menu">
   <li><a routerLink="/">Home</a></li>

apps/shell/src/app/app.component.ts

@@ -1,7 +1,6 @@
 import {Component, OnInit, ViewChild, ViewContainerRef} from '@angular/core';
 import {loadRemoteModule} from "@nrwl/angular/mf";
 import {RandomService} from "@ng-mfa/shared/data-access/random";
-import {delay} from "rxjs";
 
 @Component({
   selector: 'ng-mfa-root',

apps/widgets/standalone/src/app/remote-entry/entry.component.scss

@@ -0,0 +1,5 @@
+:host {
+  border: 1px dashed blue;
+  border-radius: 1rem;
+  padding: 1rem;
+}

apps/widgets/standalone/src/app/remote-entry/entry.component.ts

@@ -7,5 +7,6 @@ import { CommonModule } from '@angular/common';
   imports: [CommonModule],
   selector: 'ng-mfa-widgets-standalone-entry',
   templateUrl: './entry.component.html',
+  styleUrls: ['./entry.component.scss'],
 })
 export class RemoteEntryComponent {}

libs/shared/data-access/random/src/lib/random.service.ts

@@ -1,5 +1,5 @@
 import {Injectable, NgModuleRef} from '@angular/core';
-import {map, Observable, share, timer} from "rxjs";
+import {map, Observable, shareReplay, timer} from "rxjs";
 
 @Injectable({
   providedIn: 'root'
@@ -12,7 +12,7 @@ export class RandomService {
     this.randomString$ = timer(0, 5000)
       .pipe(
         map(() => Math.random().toString(36)),
-        share(),
+        shareReplay(),
       )
 
   }