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

似乎您输入了错误的路径和错误的文件名：$image->path

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

也无需导入loadChildren: './user/user.module#UserModule'

Answer 2

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

Answer 3

我遇到了同样的问题。

你写了

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

和

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

应该是

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

希望这能帮到你！

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

3 个答案: