miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

docs(angular): fix dynamic mf example #11516 (#11587)

Browse Source
This commit is contained in:
Colum Ferry 2022-08-15 12:29:10 +01:00 committed by GitHub
parent 6f1aedb070
commit 6b9f44f10e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
docs/shared/guides/module-federation/dynamic-mfe-angular.md
View File

@ -51,7 +51,7 @@ You'll also be prompted if you would like to setup Nx Cloud. For this tutorial s
To add Angular-related features to our newly created monorepo we need to install the Angular Plugin. Again, this is pretty easy to do: To add Angular-related features to our newly created monorepo we need to install the Angular Plugin. Again, this is pretty easy to do:
{% callout type="warning" title="Be at the root" %} {% callout type="warning" title="Be at the root" %}
Check that you are now at the root of your monorepo in your terminal. If not, run `cd ng-mfe`. Check that you are now at the root of your monorepo in your terminal. If not, run `cd ng-mf`.
{% /callout %} {% /callout %}
```bash ```bash
@ -236,7 +236,7 @@ Next we want to set up our `entry.component.ts` file so that it renders a login
```ts ```ts
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { UserService } from '@ng-mfe/shared/data-access-user'; import { UserService } from '@ng-mf/shared/data-access-user';
@Component({ @Component({
selector: 'ng-mf-login-entry', selector: 'ng-mf-login-entry',
template: ` template: `
@ -338,7 +338,7 @@ Finally, let's add our logic to `app.component.ts`. Change it to match the follo
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { distinctUntilChanged } from 'rxjs/operators'; import { distinctUntilChanged } from 'rxjs/operators';
import { UserService } from '@ng-mfe/shared/data-access-user'; import { UserService } from '@ng-mf/shared/data-access-user';
@Component({ @Component({
selector: 'ng-mf-root', selector: 'ng-mf-root',
template: ` template: `
@ -356,11 +356,14 @@ export class AppComponent implements OnInit {
this.isLoggedIn$ this.isLoggedIn$
.pipe(distinctUntilChanged()) .pipe(distinctUntilChanged())
.subscribe(async (loggedIn) => { .subscribe(async (loggedIn) => {
if (!loggedIn) { // Queue the navigation after initialNavigation blocking is completed
this.router.navigateByUrl('login'); setTimeout(() => {
} else { if (!loggedIn) {
this.router.navigateByUrl(''); this.router.navigateByUrl('login');
} } else {
this.router.navigateByUrl('');
}
});
}); });
} }
} }