Angular 2 How to load 2 App root component separately

Question

Is it possible to load 2 different root components (not side by side in page). Found a plunker example, only differences is that both of the root component is loaded in a single page.

<body>
  <my-app>Loading...</my-app>
  <my-sec>Loading...</my-sec>
</body>

What I want to achieve is that so each of the component have their own layout and not shared with the app.component.

Example: app.component would have a view template for normal users where as admin.component would have dashboard template.

Is this achievable? or I have to create 2 separate project for this?(One for normal view other for dashboard view)

I don't understand why you want this. Couldn't you add a router-outlet and load depending on the url or myApp or secApp — Marcel Hoekstra, Aug 25 '16 at 05:17
@MarcelHoekstra Then my routes for other components won't work, I would have to use child routes. /home/contact-us doesn't look as good if it's just /contact-us. app.component view is suppose to be "masterpage" no? Or I'm misunderstanding this concept. I'll try extending router-outlet directive tomorrow, and lazy load modules and see how it goes. — penleychan, Aug 25 '16 at 05:40
The masterpage is the index.html right? If you want to have a totally different look, not using stylesheets that are referenced in your index.html I guess you have to create a new app. If not please let me know how you achieved it :-). I had actually the same issue and kind of solved it by added a css in my admin page that overrides some styles to make a look more like dashboard. — Marcel Hoekstra, Aug 25 '16 at 06:31
@MarcelHoekstra I posted an example to my github for my answer for this . Feel free to check it out if you wish. — penleychan, Aug 27 '16 at 08:00

Sergio Medialdea · Answer 1 · 2020-09-06T17:09:21.913

For this purpose a better approach maybe is use NgComponentOutlet directive. In app.component.html only is needed to use:

<ng-container *ngComponentOutlet="appLayoutComponent"></ng-container>

Then in app.component.ts you need to provide the component you want to render at run-time:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public appLayoutComponent: BaseLayoutComponent;

You maybe can smartly do all your different layout components inherits some base layout component if you want all then have a common functionality.

As example of use you can subscribe to router events in ngOnInit() method:

ngOnInit() {
    this.router.events.subscribe((data) => {
      if (data instanceof RoutesRecognized) {
        this.appLayoutComponent = data.state?.root?.firstChild?.data?.layout;
      }
    });
  }

Finally pass the exact layout data component you want for your module in the app-routing.module.ts declaration

score 0 · Accepted Answer · answered Aug 27 '16 at 07:59

Although I couldn't figure out the correct answer, this is what I came up with after few days of playing around with it. This is "some what" good enough for my needs.

Here's a link to an example of what i did on github.

Basically I decided to drop the idea of having loading 2 root component separately and load the components dynamically.

If there's any area of improvements can be done please do let me know.

Angular 2 How to load 2 App root component separately

2 Answers2

Linked