Angular-cli: Cannot read property 'loadChildren' of null

Created on 3 Jan 2017 · 9Comments · Source: angular/angular-cli

OS:

Windows 10

Versions:

angular-cli: 1.0.0-beta.24
node: 6.9.1
os: win32 x64
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.4.1
@angular/compiler-cli: 2.4.1

Repro steps:

I am Working with the routes in my project, I'm not using loadChildren for routes or Lazy Loading with modules but always send me this error in javascript console. I don't know if i doing something wrong.
I just need to add RouterModule.forRoot() to make this error happens.

It's like warning or something because nothing critical happens with my app.

The log given by the failure.

Cannot read property 'loadChildren' of null

errors @ client?93b6:80
sock.onmessage @ socket.js:37
EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:274
SockJS._transportMessage @ main.js:272
EventEmitter.emit @ emitter.js:50
WebSocketTransport.ws.onmessage @ websocket.js:35
wrapFn @ zone.js:889
ZoneDelegate.invokeTask @ zone.js:275
Zone.runTask @ zone.js:151
ZoneTask.invoke @ zone.js:345

2 (required) bufix non-obvious

Source

JulioWar

👍4

Most helpful comment

I think i found the solution, I don't why, but the problem was because I was making the export of the routes with default statement.

Now, I am using the const statement and works for me.

This are my files updated:

Routes:

export const routes:Routes = [
   ***,
]

App Module :


import {routes} from './routes';

@NgModule({
  declarations: [
    AppComponent,
    ***
  ],
  imports: [
    ***,
    RouterModule.forRoot(routes)
  ],
  providers: [
    ***
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

JulioWar on 8 Jan 2017

👍26 🎉8

All 9 comments

Can you please post your routes?

crain on 4 Jan 2017

Routes file

export default [
    {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full',
    },
    {
        path: 'login',
        component: LoginComponent,
        canActivate: [LoginGuard]
    },
    {
        path: 'password/email',
        component: PasswordEmailComponent,
        canActivate: [LoginGuard]
    },
    {
        path: 'lock',
        component: LockComponent,
        canActivate: [LockGuard]
    },
    {
        path: BACKEND_PREFIX,
        component: MainComponent,
        canActivate: [AuthGuard],
        canActivateChild: [AuthGuard],
        children: [
            {
                path: '',
                component: DashboardComponent,
            },
            ...
        ]
    },
    {
        path: '**',
        component: PageNotFoundComponent
    }

];

My `app.module.ts`:

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    PasswordEmailComponent,
    LockComponent,
    MainComponent,
    DashboardComponent,
    EmptyComponent,
    RouterOutletComponent,
    UserListComponent,
    UserModalComponent,
    PageNotFoundComponent,
    MenuComponent,
    TableComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    NgbModule.forRoot(),
    JWBootstrapSwitchModule,
    RouterModule.forRoot(routes),
    ResourceModule.forRoot(),
    ClickOutsideModule,
    Ng2SelectizeModule
  ],
  providers: [
    CookieService,
    OAuthService,
    AuthService,
    {
      provide: OAuthHttp,
      useFactory: HttpFactory,
      deps: [XHRBackend, RequestOptions, OAuthService, Router]
    },
    AuthGuard,
    LoginGuard,
    LockGuard,
    MainService,
    MenuService,
    Location,
    ModelService,
    RoleService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Thanks @crain for your time

JulioWar on 4 Jan 2017

I think i found the solution, I don't why, but the problem was because I was making the export of the routes with default statement.

Now, I am using the const statement and works for me.

This are my files updated:

Routes:

export const routes:Routes = [
   ***,
]

App Module :


import {routes} from './routes';

@NgModule({
  declarations: [
    AppComponent,
    ***
  ],
  imports: [
    ***,
    RouterModule.forRoot(routes)
  ],
  providers: [
    ***
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

JulioWar on 8 Jan 2017

👍26 🎉8

Yes, default exports are not supported by the Angular compiler at the moment.

Meligy on 8 Jan 2017

👍9 😕2

@Meligy Are they supported in Webpack?

mogwai on 6 May 2017

@lengk yes of course they are supported in Webpack. But that's different.

In Webpack, you'd use a loader to run the Microsoft TypeScript compiler and deal with the output JavaScript.

In Angular Compiler, it reads the TypeScript itself, and tries use whatever is available of TypeScript compiler APIs usable for extensibility (spoiler: that's not much -- it's not a common use case to wrap the compiler. Common uses are things like just like Webpack loaders do - calling the compiler and consuming results, or calling the language service for errors, autocomplete etc from editors).

In this case, last time I checked, the Angular compiler had issues getting the TypeScript type information (think reflection in .NET or Java) from a default export.

Meligy on 7 May 2017

Heya, this problem kinda slipped under the radar. I think it's supposed to work with default exports.

filipesilva on 29 Nov 2017

👍4

Unfortunately I'm going to close this as duplicate of https://github.com/angular/angular/issues/11402. This is not an issue in the CLI itself but from Angular. We cannot support it before they do (and I don't think there's any work for us anyway).