Angular 2/4: Share a component with lazy loaded module and its components

Question

dashboard component is global component. users module is lazy loaded which contains login component. I want to access this dashboard component in the lazy loaded login component. How do I achieve it? I know we can use Shared module. But, I am not sure how to implement it exactly. Please, guide me through.

Dashboard.componenet.html

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      <p-menu [model]="menuItems"></p-menu>
    </div>
    <div class="col-md-9">

    </div>
  </div>
</div>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

//PrimeNG
import { MenuModule } from 'primeng/primeng';

//components
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';

const appRoutes = [
  { path: '', component: DashboardComponent },
  { path: 'users', loadChildren: 'app/users/users.module#UsersModule'}
]

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    MenuModule,
    RouterModule.forRoot(appRoutes)
  ],
  exports:[DashboardComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

users.module.ts

//Interfaces
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

//Components
import { LoginComponent } from './login/login.component';

const lazyRoutes = [
    {path:'login/login', component: LoginComponent}
]

@NgModule({
    declarations:[
        LoginComponent
        // DashboardComponent
    ],
    imports: [
        // AppModule,
        RouterModule.forChild(lazyRoutes)
    ],
    exports:[],
    providers: []
})

export class UsersModule {}

login.component.html

<dashboard></dashboard>[enter image description here][1]

It may not be a good idea to try to reference the Dashboard component from one of your lazy loaded components. What are you trying to accomplish? Maybe there is another way? — DeborahK
– DeborahK, Commented Feb 10, 2018 at 18:49
I am trying to make a menu inside dashboard. And I want to share that menu throughout my application, even in my lazyloaded module. — Angular Developer
– Angular Developer, Commented Feb 10, 2018 at 18:55
Add a router outlet to the dashboard and route everything into that router outlet. Then everything will share that menu without having to add it to each component. — DeborahK
– DeborahK, Commented Feb 10, 2018 at 18:59

DeborahK · Accepted Answer · 2018-02-10 19:01:52Z

2

In my code, I have a "Shell" component similar in concept to your dashboard. It looks like this:

shell component

<mh-menu></mh-menu>

<div class='container'>
    <router-outlet></router-outlet>
</div>

The <mh-menu> is the component containing the menu. Below the menu is a router outlet. I can then route any of my content to that router outlet so it appears below the menu and the menu appears on every page.

In my example, my products are a lazy loaded module, yet I'm able to route the product edit page into this primary router outlet. So the lazy loaded component appears with the menu.

Here is a picture:

I have a complete example here: https://github.com/DeborahK/MovieHunter-routing (though its movies and not products)

answered Feb 10, 2018 at 19:01

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Angular Developer Over a year ago

This worked like charm! Thank you @DeborahK. But, I would still like to know if we want to share that component in the lazy loaded component. How is that done? I know we can using shared module. But, I dont know the specifics.

DeborahK Over a year ago

Yes, you can build a shared module to share components. If you look in the link I provided above under the shared folder you will see an example.

Collectives™ on Stack Overflow

Angular 2/4: Share a component with lazy loaded module and its components

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related