Load different components for different base href with same path name in Angular

Question

I've the following path's in my angular application, For home path base href is set to /home/ and for create /create/

http://localhost:3000/home/account 
https://localhost:3000/create/account

Dynamic Route Config path,

export const AppRoute = {
  'homeRoutes': [
    { path: 'account', loadChildren: () => import('@home').then(m => m.HomeModule) },
    { path: 'test', loadChildren: () => import('@test').then(m => m.TestModule) },
    { path: '**', component: PageNotFoundComponent }
  ],
  'createRoutes': [
    { path: 'account', loadChildren: () => import('@create').then(m => m.CreateModule) },
    { path: 'login-test', loadChildren: () => import('@logintest').then(m => m.LoginTestModule) },
    { path: '**', component: PageNotFoundComponent }
  ]
};

In AppComponent.ts

  resetRouter () {
    const baseHref = this.platformLocation.getBaseHrefFromDOM();
    if (baseHref.match('/home/')) {
      this.router.resetConfig(routes.homeRoutes);
    }
    if (baseHref.match('/create/')) {
      this.router.resetConfig(routes.createRoutes);
    }
  }

In Routing Module

const routes =    [
    { path: 'home/account', loadChildren: () => import('@home').then(m => m.HomeModule) },
    { path: 'create/account', loadChildren: () => import('@home').then(m => m.HomeModule) },
    { path: 'test', loadChildren: () => import('@test').then(m => m.TestModule) },
    { path: 'login-test', loadChildren: () => import('@logintest').then(m => m.LoginTestModule) },
    { path: 'page-not-found', component: PageNotFoundComponent }
];

So now the problem is,

My app now is now accessible only in http://localhost:3000/home/home/account which is not expected.

Also, If as access to create routes f.e http://localhost:3000/home/test works , but actual expectation is to throw error page.

Please help me configure these routes.

Why ... Why are you trying to route by breaking your router into 2 routers depending on the first piece of the path?? This is a very bad and hacky way of approaching the problem. Just keep the baseHref at / and make a route that captures both home and create. In that component you can check the ActivatedRoute and figure out whether you're in home or create, and in the HTML template display different content/components... — Robin De Schepper
– Robin De Schepper, Commented Aug 29, 2020 at 9:31
This is because my applications is deployed in http://localhost:3000/MyAPP , root is not belong to angular — stack over
– stack over, Commented Aug 29, 2020 at 9:45
Ok, so your baseHref = '/MyAPP' and it becomes http://localhost:3000/MyAPP/home/account and http://localhost:3000/MyAPP/create/account. That doesn't really matter — Robin De Schepper
– Robin De Schepper, Commented Aug 29, 2020 at 9:48

Robin De Schepper · Accepted Answer · 2020-08-29 09:52:09Z

0

I would change your approach. Since the routing config is just a constant you can duplicate your route config for both by unpacking a mapped array into the routes const (see this answer):

const routes =    [
    ...['home', 'create'].map(path => ({
      path: path, 
      component: BaseComponent,
      loadChildren: () => import('@home').then(m => m.HomeModule) 
    })),
    { path: 'test', loadChildren: () => import('@test').then(m => m.TestModule) },
    { path: 'login-test', loadChildren: () => import('@logintest').then(m => m.LoginTestModule) },
    { path: 'page-not-found', component: PageNotFoundComponent }
];

Then inside of your BaseComponent.ts you use the ActivatedRoute API to figure out whether it's home or create:

public BaseComponent {
  public slug: string = undefined;
  construct(private route: ActivatedRoute) { }

  ngOnInit() {
    this.slug = this.route.snapshot.url[0].path;
  }
}

In the html use *ngIf to display either the home or create component:

<app-home *ngIf="slug == 'home'"></app-home>
<app-create *ngIf="slug == 'create'"></app-create>

edited Aug 29, 2020 at 9:52

answered Aug 29, 2020 at 9:46

Robin De Schepper

6,5245 gold badges44 silver badges66 bronze badges

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

2 Comments

stack over Over a year ago

This doesn't work coz, home will have some specific set of routes which should not be accessible to create

Robin De Schepper Over a year ago

Ok, fine, so then duplicate the config instead of using the array expansion :'D The ActivatedRoute approach remains the same and is preferable over the hacks you're trying to execute.

Collectives™ on Stack Overflow

Load different components for different base href with same path name in Angular

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related