Angular 10 中主组件内的延迟加载模块

2024-02-14

我的应用程序中有两个模块,其中一个是app.module另一个是user.module这会被延迟加载。上app.module我有一个sign-in成分,sign-up组件和main成分。这main.component是由导航栏和侧边栏组成的组件。我想要里面的每个组件user.module加载到里面main.component。但我在控制台中收到错误Error: Cannot match any routes. URL Segment: 'user/home'.

应用程序路由

import { MainComponent } from './main/main.component';
import { SignInComponent } from './sign-in/sign-in.component';
import { SignUpComponent } from './sign-up/sign-up.component';

const routes: Routes = [

      { path: 'sign-in', component: SignInComponent, pathMatch: 'full' },
      { path: '', redirectTo: 'sign-in', pathMatch: 'full' },
      { path: 'sign-up', component: SignUpComponent }
      {
        path: '',
        component: MainComponent,
        children: [
          {
            path: 'user',
            loadChildren: () => import('./user/user.module').then(m => m.UserModule)
          },
    
        ]
    
      },
      /* { path: '500', component: Error500Component },
      { path: '**', component: Error404Component }, */
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

用户路由

import { HomeComponent } from './home/home.component';
import { Routes, RouterModule } from '@angular/router';
import { FriendsComponent } from './friends/friends.component';

    const routes: Routes = [
  {
    path: '',
    children: [
      { path: 'home', component: HomeComponent },
      { path: 'friends', component: FriendsComponent }
    ]
  }
];

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

您应该导入和导出UserRoutingModule in UserModule.

@NgModule({
  declarations: [..],
  imports: [UserRoutingModule],
  exports: [UserRoutingModule],
  providers: [..]
})
export class UserModule {}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 10 中主组件内的延迟加载模块 的相关文章

  • 在 Angular 2 中进行并行调用 http get 或 post 调用

    如何在 Angular 2 中进行并行调用 HTTP get 或 post 调用 我有 2 个服务电话 其中一个愈伤组织的响应必须拨打另一个电话 有人可以建议我如何通过错误处理场景进行这些并行调用吗 如果您的服务是Observable基于而
  • 数据表 JSF 中的延迟加载

    在我负责的许多项目中 没有什么比数据表中的延迟分页更好的了 JSF 是否有某种魔力 或者我说得对吗 它确实是一个很大的性能问题 如果你看过一些教程 几乎没有人关心惰性分页 假设您在支持 bean 上有 List 并且数据库中有 2000 行
  • Angular 2交错列表动画

    我正在尝试使用动态列表在我的应用程序中交错播放动画 如果可能的话 我希望动画进入和离开 但我会解决只是为了让进入工作 animations trigger slideIn transition enter style transform t
  • 如何在 Angular2 中实现间隔/轮询以与量角器一起使用?

    我有一个 angular2 应用程序 我想用量角器进行测试 在此应用程序中 我有一个带有图表的页面 该页面正在使用自动生成的数据定期更新 显然 Protractor 的一项功能是在执行测试代码之前等待脚本和 http 调用完成 但是 如果有
  • 使用 AngularFire 从 Firestore 过滤数据

    我正在尝试使用 Angularfire 的查询集合从 Firestore 过滤数据 https github com angular angularfire2 blob master docs firestore querying coll
  • mat-table 中每行的 formGroup 数组

    我有一个 formGroup 数组 其中每个元素代表一个表单 接下来我有一个 mat 表 我想要做的是将每个 tr 即每一行 生成为不同的表单 以便表的第 i 行链接到第 i 个 formGroup 因此 在第 i 行内 每个 td 元素都
  • 如果我不使用超时,Angular 2 焦点将不起作用

    正如您所看到的 如果我打算集中输入 我将使用 setTimeout 如果我删除 setTimeout 焦点不起作用 div div
  • 两个服务如何以双向方式相互通信?

    一种是通过事件 另一种是通过调用方法 我试图在我的应用程序中实现聚合模式 我有 AuthService 在这里我处理身份验证结果并发出事件 if auth this eAuth emit true else this eAuth emit
  • 浮动标签和占位符重叠

    div class form group form default form spacing div
  • 使用 Angular 4 将新行添加到 mat-table 中

    如何从输入字段手动将新行添加到 Angular Material 表中 请看这张图片 如果我添加状态名称和状态代码 它应该出现在下表中 请帮助我如何使用 Angular 4 来实现它 我整理了一个简单的示例 应该可以很好地提示您从哪里开始
  • Angular 2 Observable 具有多个订阅者

    我有一个 Angular 2 服务 可以从 API 获取数据 该服务有 3 个订阅者 在组件中定义 每个订阅者都对数据执行其他操作 不同的图表 我注意到我正在向 API 发出三个 GET 请求 而我想要实现的是一个请求 并且订阅者将共享数据
  • Angular 2 - 突出显示更新的表格单元格

    如何在表中刷新改变其值的单元格 tr td product productName td td product price td tr 在组件中我有产品的输入 Input products Array
  • 获取“回调 URL 与 Auth0 不匹配”

    我有一个 Auth0 客户端 配置了以下回调 URL http 本地主机 4200 http localhost 4200 我可以正常登录 问题是当我导航到应用程序中的某个 URL 时 http localhost 4200 places
  • Angular4 - 滚动到锚点

    我正在尝试对同一页面上的锚元素进行简单的滚动 基本上 用户点击 尝试 按钮 它就会滚动到页面下方 ID 为 登录 的区域 现在 它正在与一个基本的id login a href login a 但它正在跳转到该部分 理想情况下 我希望它滚动
  • 如何在使用可观察对象作为数据源的同时使角度数据表更新行、结果数和分页

    我正在尝试在我的 Angular 7 应用程序中使用 Angular Datatables 作为显示搜索结果的组件 请求创建组件创建一个搜索表单 当单击提交按钮时 使用请求服务将 http Post 请求发送到后端 然后请求创建组件更新请求
  • 如何在 RxJS 订阅方法中等待

    在 RxJS 主题的订阅回调内部 我想要await on an async功能 下面是打字稿转译器抱怨的代码示例 错误 131 21 TS2304 找不到名称 await async ngOnInit this subscriber dat
  • 显示在 Angular 5 中作为 Blob 对象接收的图像

    我正在开发一个 MEAN Stack 应用程序 我想做的是显示存储在数据库中的图像 这样后端就可以工作 但我真正的问题是在前端Angular所以我这样做了 首先从后端接收图像 我做了一个服务来做到这一点 Function to get us
  • Angular *ngFor 循环遍历数组的数组

    我有一个数组 其中包含其他数组 如下所示 array element A element B YES NO 我想使用 ngFor 循环遍历 HTML 表中的这个对象数组 table thead tr th th th COLUMN 1 th
  • 如何在 Angular 2 应用程序中从 TypeScript/JavaScript 中的字符串获取类?

    在我的应用程序中 我有这样的内容 user ts export class User 现在 我这样做 应用程序组件 ts callAnotherFunction User 如果我将类名作为字符串 即 我该如何做到这一点 User 如果可能的
  • 修剪日期格式 PrimeNG 日历 - 删除时间戳、角度反应形式

    我将以下内容推入我的反应形式 obj 中2016 01 01T00 00 00 000Z但我想要以下2016 01 01 有谁知道有一个内置函数可以实现上述目的 我已经搜索过文档here https www primefaces org p

随机推荐

  • Android setTextSize TextView移动基线并截断文本高度

    我正在尝试使用背景图像调整 TextView 的大小 我有一个扩展 TextView 类的类 并按如下方式添加 MyCustomTextView tv2 new MyCustomTextView this RelativeLayout La
  • 在 DataGridView 中编辑文本框单元格,就像它是普通文本框一样(按下箭头时不会跳转)

    我在 DataGridView 中有 多行 自动换行 文本框列 如果能够像普通文本框一样编辑它们 那就太好了 当我按下向下箭头时 我希望插入符在文本框中向下一行 我不希望它像通常那样跳到下一行 同样地 我希望按 Enter 键在文本框单元格
  • 如何在数据表JavaScript中制作垂直标题列表?

    如何在数据表中设置垂直标题列 It should be as follows and working as datatble 您正在寻找数学中称为矩阵转置的东西 要获得矩阵 表的转置 请将行转换为列
  • Android、Google Drive:Google 同意屏幕冻结

    我已将我的应用程序升级到 Google Drive REST API 及其 Java 包装器 如下所述 https developers google com drive android deprecation https develope
  • 在没有布局管理器的情况下将 JScrollPane 添加到 JPanel

    在开始之前 我知道不使用布局管理器是一个坏主意 通常我确实使用布局管理器 但是 我还让所有组件根据窗口的大小自动重新调整大小和重新定位 此外 我正在开发的程序在其整个生命周期中仅打算在一台机器上运行 请不要仅仅因为缺少布局管理器而对我投反对
  • 将项目数组拆分为 N 个数组

    我想将数字数组分成N组 必须从larger to smaller groups 例如 在下面的代码中 分割一个数组12数入5数组 结果应该从大 组 到小均匀分割 source 1 2 3 4 5 6 7 8 9 10 11 12 outpu
  • C/C++ 大数计算

    我正在尝试在 C 程序中计算以下数字 result 3 pow 2 500000000 2 1000000000 2 的幂太大 无法正确处理 gt 我的印象是 我可以使用模数将计算分成多个步骤 以减少结果大小 有人有这样做的策略吗 还有其他
  • 将 WP 8.0 应用程序定位到 WP8.1 应用程序?

    我安装了 Visual Studio 2013 含更新 2 我正在 VS2012 中为 Windows Phone 8 0 开发我的项目 现在我决定Upgrade它到 Windows Phone 8 1 应用程序 所以我按照说明进行操作Ta
  • 选择选项卡时更改 div 高度

    我有一个选项卡式内容 有 4 个选项卡 每个选项卡中都有两个 div 构成边框设计 我遇到的问题是 当选择它们所在的选项卡时 我不知道如何对 div 进行动画处理以更改高度 我有一个小提琴供参考 http jsfiddle net jw6t
  • 如何将 CGRect 的大小增加一定的百分比值?

    如何将 CGRect 的大小增加一定的百分比值 我应该使用某种形式的CGRectInset去做吧 Example 假设我有一个 CGRect 10 10 110 110 我想将其大小增加 20 保留相同的中心点 0 0 120 120 您可
  • Android Preview M:授予权限后重新创建活动

    我使用 Preview M 并在其上测试我的应用程序 尤其是 将文件保存到外部存储 部分 在下载 保存过程开始之前 我请求 Manifest permission WRITE EXTERNAL STORAGE 开发者页面上描述的权限 htt
  • 从 Maven 部署到 Nexus 出现错误:ReasonPhrase:Forbidden

    http numberformat wordpress com 2011 05 18 nexus repository http numberformat wordpress com 2011 05 18 nexus repository
  • NetworkStream.Write 与 Socket.Send

    我有一个 C 应用程序 我使用自定义 FTP 库 现在我使用 Socket Send 发送数据 但我想知道使用套接字启动 NetworkStream 并使用 NetworkStream Write 是否会更好 使用其中一种比另一种有什么优势
  • Haskell 中的 HTTP POST 内容

    我正在尝试将一些数据发布到 Haskell 中的服务器 但服务器端为空 我正在使用 Network HTTP 库来处理请求 module Main main where import Network URI URI parseURI uri
  • Postgres `gin_trgm_ops` 索引未被使用

    我试图speed up https stackoverflow com questions 56483600 composite jsonb array query in postgresPostgres 中的一些文本匹配 使用pg trg
  • 如何在 dask/distributed 中存储工作线程局部变量

    使用dask 0 15 0 分布式1 17 1 我想记住每个工作人员的一些事情 比如访问谷歌云存储的客户端 因为实例化它是昂贵的 我宁愿将其存储在某种工作者属性中 执行此操作的规范方法是什么 或者全局变量是正确的选择吗 关于工人 您可以通过
  • jquery ajax 调用不起作用?!是firefox还是xss问题?

    我的问题是 在 Firefox 中我没有得到任何回应 在 ie 中它工作得很好 我想要对本地脚本进行 ajax 调用 以纯文本或其他方式获取一些信息 但这行不通 我认为跨脚本此时应该不是问题 或者 JavaScript 代码很简单 var
  • 如何在程序开始执行时设置断点

    如何在加载任何链接的 DLL 之前停止程序 我尝试过设置LoadLibraryExW函数在Break At Function调试选项 它会在该函数处停止 但在此之前 我在 Visual Studio 输出窗口中有以下内容 test exe
  • Sequelize - 通过匹配所有标签来过滤 FindAll

    assets tags foo tags bar 对上述端点的获取请求应仅返回包含所有提供的标签的记录 foo bar 我当前的尝试是返回与任何给定标签匹配的任何记录 const tags req query res send await
  • Angular 10 中主组件内的延迟加载模块

    我的应用程序中有两个模块 其中一个是app module另一个是user module这会被延迟加载 上app module我有一个sign in成分 sign up组件和main成分 这main component是由导航栏和侧边栏组成的