0

我有一个MyCommonModule包含通用组件、服务等的模块 ()，我计划在不同的 Angular 应用程序之间共享。

这是一个简单应用程序的示例，它只导入MyCommonModule（但还没有引用它AppComponent）：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MyCommonModule } from "../common";

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        MyCommonModule.forRoot()
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

MyCommonModule定义如下：

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';

// Components
import { SomeComponent } from "./components/some.component";
export * from "./components/some.component";

// Directives
import { SomeDirective } from "./directives/some.directive";
export * from "./directives/some.directive";

// Services
import { SomeService } from "./services/some.service";
export * from "./services/some.service";

// Models
export * from "./models/some.model";

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [
        SomeComponent,
        SomeDirective
    ],
    providers: [],
    exports: [
        SomeComponent,
        SomeDirective
    ]
})
export class MyCommonModule {
    public static forRoot(): ModuleWithProviders {
        return {
            ngModule: MyCommonModule,
            providers: [
                SomeService
            ]
        };
    }
}

当我运行时，ng build --environment=prod --target=production我得到一个 AOT:d 的构建。如果我使用分析输出，source-map-explorer我可以看到结果main.*.bundle.js并vendor.*.bundle.js包含 中的所有服务和组件（及其引用）MyCommonModule，即使我没有在我的应用程序中使用它。

这是预期的行为吗？是否为 Angular cli 应用程序启用了摇树？

4

2 回答 2

1

“treeshaker”遍历依赖图，从上到下，并像树上的枯叶一样摇出未使用的代码。如果您的 AppModule 导入 MyCommonModule，则“摇树器”无法知道您是否实际使用它（就 JavaScript 而言，您使用该代码）

于 2017-06-27T10:38:53.593 回答
0

解决问题后，请尝试以下操作：

ng build -prod --build-optimizer=true

（还不能添加评论，但这可能会有所帮助）

于 2017-09-26T10:39:25.070 回答