question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Docs: mfe tutorial does not work with version 14.2.4

See original GitHub issue

Hello

Following the steps of the below

https://nx.dev/module-federation/dynamic-module-federation-with-angular

after login the navigation fails and the component is not shown

nx serve dashboard --devRemotes=login

with error

image

Thanks

EDIT: 14.1.9 + ng v13 has the same result

Environment

NX Report complete - copy this into the issue template

Node : 18.0.0 OS : win32 x64 npm : 8.4.1

nx : 14.2.4 @nrwl/angular : 14.2.4 @nrwl/cypress : 14.2.4 @nrwl/detox : Not Found @nrwl/devkit : 14.2.4 @nrwl/eslint-plugin-nx : 14.2.4 @nrwl/express : Not Found @nrwl/jest : 14.2.4 @nrwl/js : Not Found @nrwl/linter : 14.2.4 @nrwl/nest : Not Found @nrwl/next : Not Found @nrwl/node : Not Found @nrwl/nx-cloud : Not Found @nrwl/nx-plugin : Not Found @nrwl/react : Not Found @nrwl/react-native : Not Found @nrwl/schematics : Not Found @nrwl/storybook : 14.2.4 @nrwl/web : Not Found @nrwl/workspace : 14.2.4 typescript : 4.7.3

Community plugins:

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
gkamperiscommented, Jun 14, 2022

@Coly010 many thanks… after your last response I checked and indeed it is not supposed to be shown!

To clarify after scaffolding and adding the routes per post I have the below setup in the dashboard app.

RouterModule.forRoot(
      [
        {
          path: '',
          component: NxWelcomeComponent,
        },
        {
          path: 'login',
          loadChildren: () =>
            import('login/Module').then((m) => m.RemoteEntryModule),
        },
      ],
      { initialNavigation: 'enabledBlocking' }
    ),

so I assumed this

ngOnInit() {
    this.isLoggedIn$
      .pipe(distinctUntilChanged())
      .subscribe(async (loggedIn) => {
        if (!loggedIn) {
          this.router.navigateByUrl('login');
        } else {
          this.router.navigateByUrl('');
        }
      });
  }

would show it but it seems the post’s template only has an outlet when not logged in.

template: `
    <div class="dashboard-nav">Admin Dashboard</div>
    <div *ngIf="isLoggedIn$ | async; else signIn">
      You are authenticated so you can see this content.
    </div>
    <ng-template #signIn><router-outlet></router-outlet></ng-template>
  `,

So for it to show I need to add an outlet or rework the template

     ...
      You are authenticated so you can see this content.
      <router-outlet></router-outlet>
     ...

Thanks again for your help!

0reactions
Coly010commented, Jun 14, 2022

The Nx welcome component is not supposed to be displayed. I’ll take a further look into this tomorrow, but there’s no need to raise a new issue

Read more comments on GitHub >

github_iconTop Results From Across the Web

6 Steps to your Angular-based Microfrontend Shell
In this article, I show how to implement one of them in 6 steps: A shell loading micro frontends on demand. Other than...
Read more >
Chapter 14: Migrating from XDB - Micro Focus
14.2.7.2 Server Side. To use existing compatible database locations in place of the System and tutorial locations created during Mainframe Express installation, ...
Read more >
Micro Frontend Architecture | Nx
The Micro Frontend (MFE) architecture builds on top of Module Federation by providing independent deployability. If you have not read the Module Federation ......
Read more >
Javascript - CodeProject
Javascript - Free source code and tutorials for Software developers and ... You can implement SharePoint documents in your AngularJS applications much ...
Read more >
Micro-Frontends Course - Beginner to Expert - YouTube
Don't know what a Micro-Frontend, but you've heard the buzz and you want to learn it. Let me take you from just starting...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found