将几个模块拆分成各自的js文件
Splitting several modules into their own js file
我正在尝试在我的 angular 应用程序中通过延迟加载实现代码拆分。导致每个模块都有自己的 .js 文件包含它们的 pages/components 等。因此模块 A 的 .js 文件可以与模块 B 的 .js 文件分开使用
在我的 AppModule (root) 中,我使用以下路由。
const routes: Routes = [
{path: 'clientA', loadChildren: './clientA.module#ClientAModule'},
{path: 'clientB', loadChildren: './clientB.module#ClientBModule'}
];
export const routing = RouterModule.forRoot(routes);
客户端模块:
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,它在两个模块之间共享通用组件。
在构建我的 angular 应用程序时,我期望的是为每个模块获取 .js 文件。发生这种情况(我得到一个 clienta.js 和 clientb.js)但是大多数逻辑被呈现到一个:default~clienta-module~clientb-module.js,这个文件包含了独特的组件他们的模块(startcomponents)。
如何实现每个模块都有自己的 dist .js 文件? (包含他们自己的逻辑,所以没有共享 .js 文件,没有默认模块)
使用下面的命令在不同的文件中生成延迟加载的模块
ng build --aot --named-chunks
我正在尝试在我的 angular 应用程序中通过延迟加载实现代码拆分。导致每个模块都有自己的 .js 文件包含它们的 pages/components 等。因此模块 A 的 .js 文件可以与模块 B 的 .js 文件分开使用
在我的 AppModule (root) 中,我使用以下路由。
const routes: Routes = [
{path: 'clientA', loadChildren: './clientA.module#ClientAModule'},
{path: 'clientB', loadChildren: './clientB.module#ClientBModule'}
];
export const routing = RouterModule.forRoot(routes);
客户端模块:
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,它在两个模块之间共享通用组件。
在构建我的 angular 应用程序时,我期望的是为每个模块获取 .js 文件。发生这种情况(我得到一个 clienta.js 和 clientb.js)但是大多数逻辑被呈现到一个:default~clienta-module~clientb-module.js,这个文件包含了独特的组件他们的模块(startcomponents)。
如何实现每个模块都有自己的 dist .js 文件? (包含他们自己的逻辑,所以没有共享 .js 文件,没有默认模块)
使用下面的命令在不同的文件中生成延迟加载的模块
ng build --aot --named-chunks