Load children routes dynamically angular

Viewed 203

I would like to add children for routes with loadRemoteModule dynamically, eg in this case:


const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./test/test.module').then(m => m.TestModule),
    canLoad: [AuthGuard]
  },
  {
    path: '**',
    loadChildren: () => import('./not-found/not-found.module').then(m => m.NotFoundModule),
    canLoad: [AuthGuard]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

const routes: Routes = [
  {
   ...
  },
  {
    path: ':params',
    component: TestComponent,
    resolve: {
      layout: TestResolver
    },
    children: [
      {
        path: '',
        loadChildren: () => loadRemoteModule({
          remoteName: 'test1',
          remoteEntry: '/c/test1/remoteEntry.js',
          exposedModule: 'Test1Module',
        }).then(m => m.Test1Module)
      },
      {
        path: '',
        loadChildren: () => loadRemoteModule({
          remoteName: 'test2',
          remoteEntry: '/c/test2/remoteEntry.js',
          exposedModule: 'Test2Module',
        }).then(m => m.Test2Module)
      }
    ]
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TestRoutingModule {

}

I have 2 loadChildren in the same path (TestRoutingModule), so it's wrong because I don't need load 2 mf in this case. So i would like to push children dynamically - If i need test 1 a would like to set test1, if test2 - just set test2 config.

I tried with resolver like below:

@Injectable()
export class TestResolver implements Resolve<Test[]> {

  constructor(private appService: AppService, private router: Router) {
  }

  resolve(route: ActivatedRouteSnapshot): Test[] | Observable<Test[]> {
    if (route.params.params === 'test1') {
      route.routeConfig.children = [];
      route.routeConfig.children.push({
        path: '',
        loadChildren: () => loadRemoteModule({
          remoteName: 'test1',
          remoteEntry: '/c/test1/remoteEntry.js',
          exposedModule: 'Test1Module',
        }).then(m => m.Test1Module)
      },)
    } else {
      route.routeConfig.children = [];

      route.routeConfig.children.push({
        path: '',
        loadChildren: () => loadRemoteModule({
          remoteName: 'test2',
          remoteEntry: '/c/test2/remoteEntry.js',
          exposedModule: 'Test2Module',
        }).then(m => m.Test2Module)
      })
    }
 
  }
}

my html:

<div *ngFor="let test of tests" [ngSwitch]="test.type">
   <router-outlet *ngSwitchCase="'test1'" name="test1"></router-outlet>
   <router-outlet *ngSwitchCase="'test2'" name="test2"></router-outlet>
</div>

but it doesnt work as I expected. How can I achieve this goal and set children dynamically?

0 Answers
Related