在角度延迟加载路线上找不到“未定义”的 NgModule 元数据答案

【问题标题】：No NgModule metadata found for 'undefined' on angular lazy loading routes在角度延迟加载路线上找不到“未定义”的 NgModule 元数据
【发布时间】：2017-05-26 10:00:33
【问题描述】：

我正在尝试通过打破我的延迟加载路线来构建模块化我的应用程序。这是我的代码在子路由上的样子

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 }
];

然后使用@NgModule 上的以下配置将其导入我的 app.module.ts

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

主路线加载得很好，但是当我尝试加载模块化路线时，我收到以下错误。

No NgModule metadata found for 'undefined'

【问题讨论】：

标签： angular routing angular2-routing

【解决方案1】：

看来你写错了路径和文件名：loadChildren: './+user#UserModule'

替换为：loadChildren: './user/user.module#UserModule'

并且不必要地导入import { UserModule } from './user/user.module.ts';

【讨论】：

【解决方案2】：

当导航到在初始化期间出现运行时错误的路由（例如静态 TypeScript 代码执行）时，也会显示此错误消息。尝试直接在浏览器中输入完整的 URL 以查看更好的错误描述。

【讨论】：

【解决方案3】：

我遇到了同样的问题。

你写的

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

和

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

应该是

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

希望对你有帮助！

【讨论】：