延迟加载模块时面临问题（找不到模块）答案

【问题标题】：Facing issue while Lazy loading a module ( Cannot find module)延迟加载模块时面临问题（找不到模块）
【发布时间】：2020-12-19 04:45:39
【问题描述】：

我正在努力创建延迟加载模块尽管我付出了所有努力，但我认为我在这里遗漏了一些东西，因为我无法按需加载模块。

我的项目结构如下：

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 标记中添加了相对路径，但我仍然收到一条错误消息，提示“无法加载模块”。我尝试了不同的网站，但我觉得我在这里缺少一个基本部分。

任何帮助将不胜感激。

【问题讨论】：

这里是lazyload模块的工作演示stackblitz.com/edit/santosh-angular-routing-concepts
@SantoshShinde 感谢您的工作演示，根据项目，我修改了路由模块的链接。仍然遇到同样的问题：{ path: 'signup', loadChildren: 'app/users/users.module#UsersModule', }，我不知何故又遇到了同样的问题

标签： angularjs angular typescript angular-routing angular-lazyloading

【解决方案1】：

延迟加载语法现在使用 promise / observable，试试这个：

const routes: Routes = [
  {
    path: 'signup',
    loadChildren: () => import('./app/users/users.module').then(u => u.UsersModule)
  },
];

【讨论】：

我应该更改 app.routing.module.ts 文件或 users.routing.mmodule.ts 文件中的语法吗？当我更改 app.routing.module.ts 文件中的语法时，它会引发错误。请说明更改
在 app-routing.module.ts 你应该做出改变。
我的更改低于错误。 src/app/users/users.module.ts:15:32 - 错误 TS2307: 找不到模块 './app/users/users.module' 或其对应的类型声明。
这意味着路径不正确或有错字。你能创建 stackblitz 演示吗？
感谢您的帮助。下面是 stackblitz 的链接，stackblitz.com/edit/angular-ivy-6ce1kw?file=src/app/users/…

【解决方案2】：

在用户模块中添加用户组件。
添加用户组件将是加载其他子组件的容器。
在应用组件中添加<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

【讨论】：

【解决方案3】：

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

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 路由，按原样添加数组的末尾。

【讨论】：

【解决方案4】：

stackblitz 中的工作代码

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

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

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

【讨论】：