延迟加载模块时遇到问题找不到模块

如何解决延迟加载模块时遇到问题找不到模块

我正在创建延迟加载的模块尽管我付出了所有努力，但由于无法按需加载模块，我认为这里缺少一些内容。

我的项目结构如下：

app
 -users
  -homeComponent
  -signupComponent 
  -users.routing.module.ts
  -users.module.ts
 -list
  -createListComponent
  -dashboardComponent 
  -list.routing.module.ts
  -list.module.ts

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';

const routes: Routes = [
  {
    path: "",component: HomeComponent
  },{
    path: "/signup",component: SignupComponent
  }

];

@NgModule({
  imports: [RouterModule.forChild(routes)],exports: [RouterModule]
})
export class UsersRoutingModule { }

app-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)
  },];

,

1. 在用户模块中添加用户组件。
2. 添加用户组件将成为加载其他子组件的容器。
3. 在应用程序组件中添加<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 { }

这里是演示https://stackblitz.com/edit/angular-ivy-j6wtlk

,

我认为您的路由配置有问题。

const routes: Routes = [
  {
    path: "",component: HomeComponent
  },{
    path: "/signup",component: SignupComponent
  }

];

使用这样的配置，{}路由对象将永远不会，因为Angular路由器将遍历配置数组，直到找到第一个匹配项为止（以DFS方式）并且由于所有可能的路线都与SignupComponent相匹配，因此它将从那里搜索。

我认为您可以做的是添加""选项：

pathMatch: 'full'

您还可以做的是添加const routes: Routes = [ { path: "",pathMatch: 'full',component: SignupComponent } ]; 路由，并按原样添加数组的结尾。

,

stackblitz中的工作代码

只需进行如下更改，因为延迟加载的模块不再需要路径值，因此可以留空

// users-routing.module.ts
const routes: Routes = [
  {
    path: '',// leave blank
    component: SignupComponent,];

<!-- app.component.html -->
<p> home works</p>
<router-outlet></router-outlet>