如何加载基于 url 和 angular 的不同 mmodules？

Question

我正在尝试创建一个包含两个模块的 angular 应用程序。一份用于用户部分，一份用于管理部分。

我只想在需要时加载模块。例如，如果请求的 url 是 /my-account，它将加载用户模块。但是如果它是以 /admin 开头的，它应该加载管理模块。

之后我不知道是否可行，但每个模块都应该加载自己的路由（如应用程序路由）。

目前我只是尝试根据 url.

更改 bootstraped 组件

我试过这个解决方案：但对我来说它不起作用我有一个错误，就像评论说的一切都还在加载。

在我的代码中有两个模块，一个名为 PublicModule 和 AdminModule。每个模块都有一个简单的组件，只显示文本“Public”和“Admin”。两个组件使用相同的选择器 <app-root>

这是我的管理模块：

@NgModule({
  imports: [],
  declarations: [AdminRootComponent],
  exports: [AdminRootComponent],
  providers: [],
  entryComponents: [],
})
export class AdminModule {}

这是我的Public模块：

@NgModule({
  imports: [],
  declarations: [PublicRootComponent],
  exports: [PublicRootComponent],
  providers: [],
  entryComponents: [],
})
export class PublicModule {}

然后在我的 app.module.ts 中，我想动态加载 bootstrap 组件。现在我只能通过取消注释 bootstrap 中的注释行并注释另一行来切换组件。

@NgModule({
  imports: [BrowserModule, FormsModule, PublicModule, AdminModule],
  declarations: [],
  bootstrap: [
    PublicRootComponent,
    //AdminRootComponent
  ],
})
export class AppModule {}

这是我的两个组件，第一个 public-root.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './public-root.component.html',
})
export class PublicRootComponent {
  public constructor() {}
}

然后admin-root.component

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './admin-root.component.html',
})
export class AdminRootComponent {
  public constructor() {}
}

在模板中，我只有一个简单的文本 Public 或 Admin，具体取决于它是哪个组件。

Answer 1

这是调用 LazyLoading：在 app.module 你需要按照这样的路线加载模块：

imports: [
  RouterModule.forRoot([
    {
      path: 'public',
      loadChildren: () => import('./public/public.module').then((m) => m.PublicModule),
    },
    {
      path: 'admin',
      loadChildren: () => import('./admin/admin.module').then((m) => m.AdminModule),
    },
  ]),
],

这将加载基于路由的模块

在子模块中，您可以这样管理路由：

RouterModule.forChild([
  {
    path: 'fff',
    component: YourComponent,
  },
]),

基本上不同的是 - 在父模块中你需要使用 forRoot 在子模块中，您需要使用 forChild

Answer 2

您可以创建两个 angular 库并将它们构建为 umd.js 文件使用 Angular @angular/compiler 在运行时编译。这有效但需要研究。在 V13 中弃用 https://angular.io/api/core/Compiler

如何加载基于 url 和 angular 的不同 mmodules？

How to load different mmodules based on the url with angular?

angular

angular-routing

angular-module