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, Aug 29 '16 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, Aug 30 '16 at 07:27

score 1 · Answer 1 · answered Aug 30 '16 at 07:15

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. https://github.com/angular/angular/issues/11208 — Irus, Sep 02 '16 at 15:10
See an exemple i did of working dyn loading : http://stackoverflow.com/questions/39228826/rc5-lazy-loading-of-ngmodule-in-different-router-outlet/39228827#39228827 — Patrice, Sep 04 '16 at 05:29

score 0 · Answer 2 · answered Aug 29 '16 at 13:33

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 '16 at 13:33

Patrice

1,404
1
14
27

Thank you. I have used shared module too. But I need to use one module which has routing in another child module. – Irus Aug 29 '16 at 15:37
You should include this additional information into your new answer. – Nicolas Henneaux Aug 30 '16 at 07:20

Routing Issue with Angular 2 RC5 While loading multiple modules

2 Answers2