我们的棱角分明4.3.6应用程序具有延迟加载的模块，例如Fleet，Maintenance，Car等。
我的顶级应用路由器如下所示：
const routes: Routes = [
{ path: '', redirectTo: 'fleet', pathMatch: 'full' },
{
path: '',
component: AppComponent,
canActivate: [AuthenticationGuard],
children: [
{
path: 'fleet',
loadChildren: "./modules/fleet.module",
canActivate: [AuthenticationGuard]
},
{
path: 'car/:id',
loadChildren: "./modules/car.module",
canActivate: [AuthenticationGuard]
},
{
path: 'maintenanceProgram',
loadChildren: "./modules/maintenanceProgram.module",
canActivate: [AuthenticationGuard]
}
}
我们确实有一个共享模块，其中包含在整个应用程序中使用的通用组件（我们有很多组件）。但是，有一些组件，如模态，仅由MaintenanceProgram和Car模块共享，但在其他任何地方都没有使用。
为了保持共享模块的合理性，我只在MaintenanceProgram模块中包含这些曾经重用的组件，导出它们，并将MaintenanceProgram模块导入Car模块有权访问导出的组件。
Car和MaintenanceProgram模块在各自的@NgModule.imports[]中调用了以下嵌入子路由：
汽车：
const CarModuleRoutes = RouterModule.forChild([
{
path: '',
component: CarComponent,
canActivate: [AuthenticationGuard]
},
{
path: ':id',
component: CarComponent,
canActivate: [AuthenticationGuard]
}
]);
和维护计划：
const MaintenanceProgramModuleRoutes = RouterModule.forChild([
{
path: '',
component: MaintenanceProgramComponent,
canActivate: [AuthenticationGuard]
}
]);
这显然不是正确的方法
因为当我加载Car路线时，我会获得维护程序的默认路线。
我试过了：
MaintenanceProgramModuleRoutes CarModuleRoutes {/ 1}}中CarModule和@NgModule.imports[]的导入顺序，*是创建另一个共享模块的唯一解决方案，其中包含没有路由器的共享组件，还是有另一种更优雅的方式来实现这一目标？*
这是一个简化的例子，我们实际上有许多路线和数百个仅重复使用两次或三次的组件。随着应用程序的增长，这个问题肯定会持续到未来，因此我需要一个可扩展且可维护的解决方案。创建数十个或更多额外的共享模块是不可行的。
答案 0 :(得分：6)
实际上，在创建共享模块时，不需要关心使用共享模块一小部分的模块，因为Angular的摇晃动作只会保留导入模块中使用的代码，而其余部分则被删除。
我已经准备了一个最小的项目来演示它：https://github.com/youkouleley/Angular-treeshaking-demo
该项目有两个惰性模块：AModule和BModule。这两个模块均导入SharedModule。 SharedModule导出三个组件：
AComponent，仅在AModule中使用， BComponent，仅在BModule中使用， BothComponent 和 AModule 中使用的BModule
在生产模式下ng build将此项目打开并打开4-es2015.<hash>.js文件时，您将获得以下内容：
(window.webpackJsonp = window.webpackJsonp || []).push([[4], {
KImX: function (n, l, u) {
"use strict";
u.r(l);
var t = u("8Y7J");
class a {
constructor() {}
ngOnInit() {}
}
var r = u("phyl");
class o {}
var c = u("pMnS"),
s = t.gb({
encapsulation: 0,
styles: [[""]],
data: {}
});
function b(n) {
return t.sb(0, [(n()(), t.ib(0, 0, null, null, 1, "p", [], null, null, null, null, null)), (n()(), t.rb(-1, null, ["a works!"]))], null, null)
}
function i(n) {
return t.sb(0, [(n()(), t.ib(0, 0, null, null, 1, "app-a", [], null, null, null, b, s)), t.hb(1, 114688, null, 0, a, [], null, null)], function (n, l) {
n(l, 1, 0)
}, null)
}
var p = t.eb("app-a", a, i, {}, {}, []),
e = u("gJxL"),
f = u("SVse"),
h = u("iInd"),
d = u("PCNd");
u.d(l, "AModuleNgFactory", function () {
return v
});
var v = t.fb(o, [], function (n) {
return t.ob([t.pb(512, t.j, t.T, [[8, [c.a, p, e.a]], [3, t.j], t.u]), t.pb(4608, f.i, f.h, [t.r, [2, f.o]]), t.pb(1073742336, f.b, f.b, []), t.pb(1073742336, h.l, h.l, [[2, h.q], [2, h.k]]), t.pb(1073742336, d.a, d.a, []), t.pb(1073742336, o, o, []), t.pb(1024, h.i, function () {
return [[{
path: "a",
component: a
}, {
path: "both",
component: r.a
}
]]
}, [])])
})
},
PCNd: function (n, l, u) {
"use strict";
u.d(l, "a", function () {
return t
});
class t {}
},
gJxL: function (n, l, u) {
"use strict";
var t = u("8Y7J"),
a = u("phyl");
u.d(l, "a", function () {
return s
});
var r = t.gb({
encapsulation: 0,
styles: [[""]],
data: {}
});
function o(n) {
return t.sb(0, [(n()(), t.ib(0, 0, null, null, 1, "p", [], null, null, null, null, null)), (n()(), t.rb(-1, null, ["both works!"]))], null, null)
}
function c(n) {
return t.sb(0, [(n()(), t.ib(0, 0, null, null, 1, "app-both", [], null, null, null, o, r)), t.hb(1, 114688, null, 0, a.a, [], null, null)], function (n, l) {
n(l, 1, 0)
}, null)
}
var s = t.eb("app-both", a.a, c, {}, {}, [])
},
phyl: function (n, l, u) {
"use strict";
u.d(l, "a", function () {
return t
});
class t {
constructor() {}
ngOnInit() {}
}
}
}
]);
请注意，BComponent块中缺少SharedModule中的AModule。排除BModule的{{1}}块使用相同的内容。
此外，请注意，在构建选项中将AComponent设置为commonChunk时会获得此行为。此选项使您可以选择：
false：将false的所需部分直接捆绑到导入它的惰性模块中。 专业版：延迟模块之间的平均加载时间。 缺点：：SharedModule中的某些代码在惰性模块块之间重复，从而增加了应用的大小SharedModule（默认）：有一个公共块，其中包含true的部分，这两个懒惰模块至少至少使用了其余部分（其余部分捆绑在惰性模块本身）。 专业版：没有重复的代码，总体上减小了应用的大小。 缺点：：第一个惰性模块的加载速度较慢（即使当前路由不需要它，它也会加载公共块）结论是，Angular构建为SharedModule设置了SharedModule或commonChunk（取决于您的上下文）而提供的true优化（取决于您的上下文）担心您的false大小。因此，您不必尝试像混合模式一样同时执行功能模块角色和共享模块角色的奇怪模式。
答案 1 :(得分：1)
在顶级应用路由器中尝试：
const routes: Routes = [
{ path: '', redirectTo: 'fleet', pathMatch: 'full' },
{
path: '',
component: AppComponent,
canActivate: [AuthenticationGuard],
children: [
{
path: 'fleet',
loadChildren: "./modules/fleet.module#FleetModule",
canActivate: [AuthenticationGuard]
},
{
path: 'car/:id',
loadChildren: "./modules/car.module#CarModule",
canActivate: [AuthenticationGuard]
},
{
path: 'maintenanceProgram',
loadChildren: "./modules/maintenanceProgram.module#MaintenanceProgrammodule",
canActivate: [AuthenticationGuard]
}
}
您需要的更改：在路由器路径的末尾添加
#module_class_name。
答案 2 :(得分：1)
处理大型共享模块的方法是为每个组件创建一个模块。在您的示例中，您应该创建一个ModalModule，声明并导出您的ModalComponent。它应该看起来像这样
@NgModule({
declarations: [
ModalComponent,
],
imports: [
RouterModule,
CommonModule, // any modules that your modal need
],
exports: [
ModalComponent,
]
})
export class ModalModule {}
然后只需在您的CarModule导入中包括ModalModule和MaintenanceProgramModule导入。
@NgModule({
declarations: [CarComponent],
imports: [ CarRoutingModule, ModalModule ],
})
export class CarModule
您应该为所有共享组件创建模块，并且在需要它的路由中仅包括每个共享组件的模块。它确实有助于大大减小每个页面的大小。