Routing Issue with Angular 2 RC5 While loading multiple modules

Question

I am trying to load a child module in another child module as described in the following image:

When I tried to load the child module "Material Module" which has it's own routes in "Home Module" it is throwing following error:

browser_adapter.js:84 EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'import' of undefined

I want to reuse the same Material.module in another Parent module in future.

Here is my app.routing.ts:

const appRoutes: Routes = [{
    path: '',
    redirectTo: '/gologin',
    pathMatch: 'full'
  },
   {
    path: 'gologin',
    loadChildren: 'app/login/login.module'
  },
   {
    path: 'goHome',
    loadChildren: 'app/home/home.module'
}]
export const routing = RouterModule.forRoot(appRoutes, {
  useHash: true
});

My Home.route.ts looks as follows:

const appRoutes1: Routes = [{
    path: '',
    component: 'HomeComponent',
    children:[
   {
    path: '',
    loadChildren: 'app/Material/Material.module'
}]}]
export const routing = RouterModule.forChild(appRoutes1);

My Home.module.ts looks as follows:

import { routing } from './home.routes';
import {MaterialModule} from '../Material';
import {HomeComponent} from './home';


@NgModule({
  declarations: [
    // Components / Directives/ Pipes
    HomeComponent,

  ],
  imports: [
    MaterialModule,
    routing
  ],
 // providers:[HeaderService]
})
export  class HomeModule {
}

My Material.route.ts looks as follows:

import { Routes, RouterModule } from '@angular/router';

import { OrderComponent }   from './Order/OrderComponent.component';
import { InventoryComponent }   from './Inventory/InventoryComponent.component';
import { POComponent }   from './PO/POComponent.component';

export const appRoutes1: Routes = [
  {
    path: '',
    component: OrderComponent 
  },
{
    path: '/inventory',
    component: InventoryComponent 
  },
{
    path: '/PO',
    component: POComponent 
  },

];

export const routing = RouterModule.forChild(appRoutes1);

My Material.module.ts looks as follows:

@NgModule({
  declarations: [
    // Components / Directives/ Pipes
    OrderComponent ,InventoryComponent ,POComponent 
  ],
  imports: [
        routing //Material.routing
  ],
})
export class MaterialModule {
}

How to resolve these kind of child modules loading in another child module issue in Angular 2 RC5.

Can you provide full app.routing.ts, home.module.ts and home.route.ts... — Patrice
– Patrice, Commented Aug 29, 2016 at 13:37
Try to load modules statically (without loadChildren) I find it easier to understand and to make work. Also in Home.module you import MaterialModule while loading it dynamically with loadChildren via routing... you should chose. importing statically preloads the module and defteat lazy loading objective. — Patrice
– Patrice, Commented Aug 30, 2016 at 7:27

Patrice · Accepted Answer · 2016-08-30 07:15:12Z

Here is what I did :

app.routes.ts

export const routes: Routes = [
    {path: '', redirectTo: '/login', terminal: true},
    {path: 'login', component: LoginComponent},
    {path: 'dashboard', loadChildren: 'app/dashboard/dashboard.module#DashboardModule', canActivate : [AuthGuardService]}
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

dashboard.module.ts

@NgModule({
    declarations: [
        DashboardComponent
    ],
    imports: [CommonModule, RouterModule, routing, VirementModule, AccountsModule],
    exports: [DashboardComponent],
    providers: [
        AccountsService
    ]
})
export class DashboardModule { }

dashboard.routing.ts

export const routing: ModuleWithProviders = RouterModule.forChild([
    { path: 'accounts', component: AccountsFragment},
    { path: 'transfert/:from/:to', component: BadVirementWizardComponent, data: {backRoute: 'dashboard/accounts'}},
    { path: 'virement', component: BadVirementWizardComponent, data: {backRoute: 'dashboard/accounts'}},
    { path: 'browser', component: BadBrowserComponent}
]);

This works perfect OK with static loading (LoginComponent) but even though it works with lazy loading (DashboardModule) I still not workking with multiple .

Hope it helps.

Thank you for response. I had this worked but my problem is try to load one more module using loadChildren in dashboard.routing.ts. I have raised a official issue at angular git. Here is the link for your info. github.com/angular/angular/issues/11208
See an exemple i did of working dyn loading : stackoverflow.com/questions/39228826/…

Patrice · Accepted Answer · 2016-08-29 13:33:31Z

0

In order to reuse a module in different par of the application you need to make it as a SharedModule : see Shared NgModule Documentation

answered Aug 29, 2016 at 13:33

Patrice

1,4441 gold badge14 silver badges27 bronze badges

2 Comments

Irus Over a year ago

Thank you. I have used shared module too. But I need to use one module which has routing in another child module.

Nicolas Henneaux Over a year ago

You should include this additional information into your new answer.

Collectives™ on Stack Overflow

Routing Issue with Angular 2 RC5 While loading multiple modules

2 Answers 2

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Linked

Related