在角度延遲加載路由上找不到'undefined'的NgModule元數據

Question

我想通過打破我的延遲加載我的路線來構建模塊化我的應用程序。這裏是我的代碼看起來像孩子航線上

import { SignUpComponent } from './signup/signup.component'; 
import { TeamsPageComponent } from './teams/teamspage.component'; 
import { TeamsListComponent } from './teams/teamslist.component'; 
import { TeamUsersComponent } from './teams/team-users.component'; 
import { EditTeamComponent } from './teams/edit-team.component'; 
import { UsersPageComponent } from './users/userspage.component'; 
import { CreateUserComponent } from './users/create-user.component'; 
import { UserPermissionComponent } from './users/user-permission.component'; 
import { EditUserComponent } from './users/edit-user.component'; 

import { AuthGuard } from '../guards/auth.guard'; 
import { AccessLevel0Guard } from '../guards/level0.guard'; 

export const routes = [ 
    { path: '', 
    children: [ 
       { path: '', component: TeamsListComponent, canActivate: [AccessLevel0Guard] }, 
       { path: ':teamId/edit', component: EditTeamComponent }, 
       { 
        path: ':teamId/users', component: UsersPageComponent, 
        children: [ 
         { path: '', component: TeamUsersComponent }, 
         { path: 'create/:id', component: CreateUserComponent }, 
         { path: ':id/permission', component: UserPermissionComponent }, 
         { path: ':id/edit', component: EditUserComponent } 
        ] 
       }], 
]; 

我然後導入到

import { BrowserModule } from '@angular/platform-browser'; 
import { CommonModule } from '@angular/common'; 
import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { MaterialModule } from '@angular/material'; 

import { routes } from './user.routes'; 
import { AccessLevel0Guard } from '../guards/level0.guard'; 

import { SignUpComponent } from './signup/signup.component'; 
import { TeamsPageComponent } from './teams/teamspage.component'; 
import { TeamsListComponent } from './teams/teamslist.component'; 
import { TeamUsersComponent } from './teams/team-users.component'; 
import { EditTeamComponent } from './teams/edit-team.component'; 
import { UsersPageComponent } from './users/userspage.component'; 
import { CreateUserComponent } from './users/create-user.component'; 
import { UserPermissionComponent } from './users/user-permission.component'; 
import { EditUserComponent } from './users/edit-user.component'; 

@NgModule({ 
    declarations: [ 
    /** 
    * Components/Directives/ Pipes 
    */ 
    SignUpComponent, 
    TeamsPageComponent, 
    TeamsListComponent, 
    TeamsUsersComponent, 
    EditTeamComponent, 
    UsersPageComponent, 
    CreateUserComponent, 
    UserPermissionComponent, 
    EditUserComponent 
    ], 
    imports: [ 
    CommonModule, 
    FormsModule, 
    ReactiveFormsModule, 
    RouterModule.forChild(routes), 
    ] 
}) 

export class UserModule { 
    public static routes = routes; 
} 

，然後使用

export { UserModule } from './user.module'; 

在index.ts

其導出文件

我然後在父路線上使用以下內容

import { Routes } from '@angular/router'; 
import { BaseComponent } from './base/base.component'; 
import { AppComponent } from './app.component'; 
import { SignInComponent } from './signin/signin.component'; 
import { UserModule } from './user/user.module.ts'; 
import { AuthGuard } from './guards/auth.guard'; 
import { DashboardPageComponent } from './dashboard-graph/dashboard.component'; 
import { NoContentComponent } from './no-content/no-content.component'; 

import { DataResolver } from './app.resolver'; 

export const ROUTES: Routes = [ 
    { 
     path: '', component: AppComponent, 
     children: [ 
      { path: '', component: SignInComponent }, 
      { 
       path: 'dashboard', 
       component: BaseComponent, 
       canActivate: [AuthGuard], 
       children: [ 
        { path: '', component: DashboardPageComponent }, 
        { 
        path: 'teams', loadChildren: './+user#UserModule' 
        }, 
       ] 
      } 
     ] 
    }, 
    { path: '**', component: NoContentComponent } 
]; 

這是然後導入到我app.module.ts具有以下配置上@NgModule

imports: [ 
    BrowserModule, 
    BrowserAnimationsModule, 
    RouterModule, 
    NgxDatatableModule, 
    FormsModule, 
    ReactiveFormsModule, 
    HttpModule, 
    MaterialModule, 
    LeafletModule, 
    RouterModule.forRoot(ROUTES, { useHash: false, preloadingStrategy: PreloadAllModules }) 
    ], 

的主要途徑負荷高達就好了，但是當我嘗試加載模塊化的路線，我得到下面的錯誤。

No NgModule metadata found for 'undefined' 

Answer 1

我有同樣的問題。

你寫

export { UserModule } from './user.module';

和

children: [ 
        { path: '', component: DashboardPageComponent }, 
        { 
        path: 'teams', loadChildren: './+user#UserModule' 
        }, 
       ] 

應該

... 
{ 
    path: 'teams', loadChildren: './+user/user.module#UserModule' 
}, 

希望這可以幫助你！