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

我正在努力创建延迟加载的模块，尽管我做了很多努力，但我认为我缺少了一些东西，因为我无法按需加载模块

我的项目结构如下：

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 { }

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 {}

app-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 { }

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

---

惰性加载语法现在使用promise/observable，请尝试以下方法：

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

在用户模块中添加用户组件

“添加用户”组件将是加载其他子组件的容器

在应用程序组件中添加

用户路由.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 { }

这里是工作演示

在用户模块中添加用户组件

“添加用户”组件将是加载其他子组件的容器

在应用程序组件中添加

用户路由.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=[
{
路径：“”，
组件：HomeComponent
},
{
路径：“/signup”，
组件：注册组件
}
];

使用这样的配置，将永远无法到达

SignupComponent

路由对象，因为Angular router将遍历配置数组，直到找到第一个匹配项（以DFS方式），并且由于每个可能的路由都匹配

”

，因此它将从那里进行搜索

我认为您可以添加

pathMatch:'full'

选项：

const routes:routes=[
{
路径：“”，
组件：HomeComponent，
路径匹配：“已满”，
},
{
路径：“/signup”，
组件：注册组件
}
];

---

您还可以添加

HomeComponent

路由，按原样添加阵列的结尾。

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

const routes:routes=[
{
路径：“”，
组件：HomeComponent
},
{
路径：“/signup”，
组件：注册组件
}
];

使用这样的配置，将永远无法到达

SignupComponent

路由对象，因为Angular router将遍历配置数组，直到找到第一个匹配项（以DFS方式），并且由于每个可能的路由都匹配

”

，因此它将从那里进行搜索

我认为您可以添加

pathMatch:'full'

选项：

const routes:routes=[
{
路径：“”，
组件：HomeComponent，
路径匹配：“已满”，
},
{
路径：“/signup”，
组件：注册组件
}
];

您还可以添加

HomeComponent

路由，按原样添加阵列的结尾。

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

//users-routing.module.ts
常数路由：路由=[
{
路径：“”，//保留为空
组件：注册组件，
},
];

家庭作业

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

//users-routing.module.ts
常数路由：路由=[
{
路径：“”，//保留为空
组件：注册组件，
},
];

家庭作业

这是lazyload module@Santoshinde的工作演示谢谢你的工作演示，根据项目，我已经修改了到路由模块的链接。仍然有同样的问题：{path:'signup'，loadChildren:'app/users/users.module#UsersModule'，}，我不知怎么又碰到了同样的问题这里是lazyload module@santoshinde的工作演示谢谢你的工作演示，根据项目，我修改了我到路由模块的链接。仍然遇到同样的问题：{path:'signup'，loadChildren:'app/users/users.module#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的链接，我应该更改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的链接，