延迟加载模块时遇到问题(找不到模块)
Facing issue while Lazy loading a module ( Cannot find module)
我正在努力创建延迟加载模块尽管我付出了所有努力,但我认为我在这里遗漏了一些东西,因为我无法按需加载模块。
我的项目结构如下:
app
-users
-homeComponent
-signupComponent
-users.routing.module.ts
-users.module.ts
-list
-createListComponent
-dashboardComponent
-list.routing.module.ts
-list.module.ts
用户-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SignupComponent } from './signup/signup.component';
const routes: Routes = [
{
path: "",
component: HomeComponent
},
{
path: "/signup",
component: SignupComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UsersRoutingModule { }
应用-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'signup',
loadChildren: './app/users/users.module#UsersModule',
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
我在我的 loadChildren 标签中添加了相对路径,但我仍然收到“无法加载模块”的错误消息。我尝试了不同的网站,但我觉得我在这里缺少一个基本部分。
如有任何帮助,我们将不胜感激。
延迟加载语法现在使用 promise / observable,试试这个:
const routes: Routes = [
{
path: 'signup',
loadChildren: () => import('./app/users/users.module').then(u => u.UsersModule)
},
];
- 在用户模块中添加用户组件。
- 添加用户组件将是加载其他子组件的容器。
- 在应用组件component中添加
<router-outlet></router-outlet>
users-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SignupComponent } from './signup/signup.component';
import { UsersComponent } from './users.component';
const routes: Routes = [
{
path: '',
component: UsersComponent, // will be bootstrap component for users module
children: [ // will children for user module
{
path: 'signup',
component: SignupComponent,
},
{
path: 'home',
component: HomeComponent,
},
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class UsersRoutingModule { }
我认为你的路由配置有问题。
const routes: Routes = [
{
path: "",
component: HomeComponent
},
{
path: "/signup",
component: SignupComponent
}
];
使用这样的配置,SignupComponent
路由对象将 永远不会到达 ,因为 Angular 路由器将遍历配置数组直到找到第一个匹配项(以 DFS 方式)并且由于每个可能的路由都匹配 ""
,它将从那里搜索。
我认为你可以做的是添加 pathMatch: 'full'
选项:
const routes: Routes = [
{
path: "",
component: HomeComponent,
pathMatch: 'full',
},
{
path: "/signup",
component: SignupComponent
}
];
您还可以添加 HomeComponent
路由,按原样添加数组的末尾。
stackblitz
中的工作代码
只需进行如下更改,因为延迟加载模块不再需要路径值,因此可以留空
// users-routing.module.ts
const routes: Routes = [
{
path: '', // leave blank
component: SignupComponent,
},
];
<!-- app.component.html -->
<p> home works</p>
<router-outlet></router-outlet>
我正在努力创建延迟加载模块尽管我付出了所有努力,但我认为我在这里遗漏了一些东西,因为我无法按需加载模块。
我的项目结构如下:
app
-users
-homeComponent
-signupComponent
-users.routing.module.ts
-users.module.ts
-list
-createListComponent
-dashboardComponent
-list.routing.module.ts
-list.module.ts
用户-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SignupComponent } from './signup/signup.component';
const routes: Routes = [
{
path: "",
component: HomeComponent
},
{
path: "/signup",
component: SignupComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UsersRoutingModule { }
应用-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'signup',
loadChildren: './app/users/users.module#UsersModule',
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
我在我的 loadChildren 标签中添加了相对路径,但我仍然收到“无法加载模块”的错误消息。我尝试了不同的网站,但我觉得我在这里缺少一个基本部分。
如有任何帮助,我们将不胜感激。
延迟加载语法现在使用 promise / observable,试试这个:
const routes: Routes = [
{
path: 'signup',
loadChildren: () => import('./app/users/users.module').then(u => u.UsersModule)
},
];
- 在用户模块中添加用户组件。
- 添加用户组件将是加载其他子组件的容器。
- 在应用组件component中添加
<router-outlet></router-outlet>
users-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SignupComponent } from './signup/signup.component';
import { UsersComponent } from './users.component';
const routes: Routes = [
{
path: '',
component: UsersComponent, // will be bootstrap component for users module
children: [ // will children for user module
{
path: 'signup',
component: SignupComponent,
},
{
path: 'home',
component: HomeComponent,
},
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class UsersRoutingModule { }
我认为你的路由配置有问题。
const routes: Routes = [
{
path: "",
component: HomeComponent
},
{
path: "/signup",
component: SignupComponent
}
];
使用这样的配置,SignupComponent
路由对象将 永远不会到达 ,因为 Angular 路由器将遍历配置数组直到找到第一个匹配项(以 DFS 方式)并且由于每个可能的路由都匹配 ""
,它将从那里搜索。
我认为你可以做的是添加 pathMatch: 'full'
选项:
const routes: Routes = [
{
path: "",
component: HomeComponent,
pathMatch: 'full',
},
{
path: "/signup",
component: SignupComponent
}
];
您还可以添加 HomeComponent
路由,按原样添加数组的末尾。
stackblitz
中的工作代码只需进行如下更改,因为延迟加载模块不再需要路径值,因此可以留空
// users-routing.module.ts
const routes: Routes = [
{
path: '', // leave blank
component: SignupComponent,
},
];
<!-- app.component.html -->
<p> home works</p>
<router-outlet></router-outlet>