[英]No NgModule metadata found for 'undefined' on angular lazy loading routes
I am trying to build modularize my application by breaking my lazy loading my routes.我正在尝试通过打破延迟加载路由来构建模块化我的应用程序。 Here is what my code looks like on the child route
这是我的代码在子路线上的样子
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 }
]
}],
];
I then imported it into然后我将它导入
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;
}
and then exported it using然后使用导出它
export { UserModule } from './user.module';
on the index.ts file在 index.ts 文件上
I then used the following on the parent route然后我在父路线上使用了以下内容
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 }
];
This is then imported into my app.module.ts with the following configuration on the @NgModule然后使用@NgModule 上的以下配置将其导入到我的 app.module.ts 中
imports: [
BrowserModule,
BrowserAnimationsModule,
RouterModule,
NgxDatatableModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
MaterialModule,
LeafletModule,
RouterModule.forRoot(ROUTES, { useHash: false, preloadingStrategy: PreloadAllModules })
],
The main route loads up just fine but when i try to load the modularized route I get the error below.主路由加载得很好,但是当我尝试加载模块化路由时,出现以下错误。
No NgModule metadata found for 'undefined'
It seems that you wrote the wrong path, and wrong filename: loadChildren: './+user#UserModule'
看来你写错了路径,错误的文件名:
loadChildren: './+user#UserModule'
Replace it with: loadChildren: './user/user.module#UserModule'
将其替换为:
loadChildren: './user/user.module#UserModule'
And needlessly to import import { UserModule } from './user/user.module.ts';
并且不必要地
import { UserModule } from './user/user.module.ts';
导入import { UserModule } from './user/user.module.ts';
This error message will also be shown when navigating to a route where there is a runtime error during initialization (eg static TypeScript code execution).当导航到在初始化期间存在运行时错误的路由(例如静态 TypeScript 代码执行)时,也会显示此错误消息。 Try typing the full URL in the browser directly to see a better error description.
尝试直接在浏览器中输入完整 URL 以查看更好的错误描述。
I had the same problem.
我有同样的问题。
you wrote
你写了
export { UserModule } from './user.module';
and
和
children: [ { path: '', component: DashboardPageComponent }, { path: 'teams', loadChildren: './+user#UserModule' }, ]
it should be
应该是
... { path: 'teams', loadChildren: './+user/user.module#UserModule' },
Hope this helps you!
希望这对你有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.