Question

我正在尝试在我的角度应用程序中实现通过延迟加载的代码拆分。结果，每个模块都有自己的.js文件，其中包含其页面/组件等。因此，可以将moduleA的.js文件与moduleB的.js文件分开使用

在我的AppModule（根）中，使用以下路由。

const routes: Routes = [
  {path: 'clientA', loadChildren: './clientA.module#ClientAModule'},
  {path: 'clientB', loadChildren: './clientB.module#ClientBModule'}
];

export const routing = RouterModule.forRoot(routes);

clientAmodule：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { CommonModule } from '@angular/common';
import { ComponentsModule } from './components.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

// containers
import {
  StartComponent
} from './pages';

// routes
export const ROUTES: Routes = [
  { path: 'start', component: StartComponent }
];

@NgModule({
  declarations: [StartComponent],
  imports: [CommonModule, FormsModule, ReactiveFormsModule, ComponentsModule, RouterModule.forChild(ROUTES)]
})
export class ClientAModule {}

和clientBModule：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { CommonModule } from '@angular/common';
import { ComponentsModule } from './components.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

// containers
import {
  StartComponent
} from './pages';

// routes
export const ROUTES: Routes = [
  { path: 'start', component: StartComponent }
];

@NgModule({
  declarations: [StartComponent],
  imports: [CommonModule, FormsModule, ReactiveFormsModule, ComponentsModule, RouterModule.forChild(ROUTES)]
})
export class ClientBModule {}

请注意，两个模块都使用ComponentsModule，它们在两个模块之间共享通用组件。

构建我的角度应用程序时，我希望获得每个模块的.js文件。发生这种情况（我得到一个clienta.js和clientb.js），但是大多数逻辑都呈现在：default_clienta-module〜clientb-module.js，此文件包含其模块所独有的组件（startcomponents）

如何实现每个模块都有自己的dist .js文件？（包含自己的逻辑，因此没有共享的.js文件，没有默认模块）

Answer 1

使用以下命令在不同文件中生成延迟加载的模块

dispatch_async

对于裁判：https://github.com/angular/angular-cli/wiki/build

将几个模块拆分成自己的js文件

1 个答案: