Angular2 - Rollup Tree Shaking (*.ngfactory - 无法解决)答案

【问题标题】：Angular2 - Rollup Tree shaking (*.ngfactory - could not be resolved)Angular2 - Rollup Tree Shaking (*.ngfactory - 无法解决)
【发布时间】：2017-10-23 19:21:06
【问题描述】：

我尝试在 AOT 编译后对 Angular 2 应用程序使用 Tree-shaking，然后我收到下一条消息：

'Containers/module.ngfactory'由Containers\module.aot.js导入，但无法解决 - 将其视为外部依赖项

没有为外部模块“Containers/module.ngfactory”提供名称在 options.globals – 猜测 'Containers_module_ngfactory'

我不知道如何解决这个问题。

这是AOT编译后的module.aot.js代码：

import { enableProdMode } from '@angular/core';
enableProdMode();
import { platformBrowser } from '@angular/platform-browser';
import { ModuleNgFactory } from 'Containers/module.ngfactory';
platformBrowser().bootstrapModuleFactory(ModuleNgFactory);
//# sourceMappingURL=module.aot.js.map

rollup-config.js

'use strict';

import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs    from 'rollup-plugin-commonjs';
import uglify      from 'rollup-plugin-uglify'

export default {
    entry: './Containers/module.aot.js',
    dest:  './module.vendor.js',
    sourceMap: false,
    format: 'iife',
    onwarn: function(warning) {
        // Skip certain warnings
        if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
        if ( warning.code === 'EVAL' ) { return; }
        console.warn( warning.message );
    },
    plugins: [
        nodeResolve({jsnext: true, module: true}),
        commonjs({
            include: 'node_modules/rxjs/**',
        }),
        uglify()
    ]
}

和tsconfig-aot.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [ "es2015", "dom" ],
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true,
        "baseUrl": ".",
        "paths": {
            "app/*": [ "../src/*" ]
        },
        "typeRoots": [
            "../node_modules/@types"
        ]
    },
    "files": [
        "../src/globals.ts",
        "../src/Containers/module.aot.ts"
    ],
    "exclude": [
        "node_modules",
        "typings"
    ],
    "angularCompilerOptions": {
        "genDir": "../",
        "skipMetadataEmit": false,
        "skipTemplateCodegen": false
    }
}

一般来说，AOT 工作正常，但我无法运行摇树以将我的代码捆绑到一个文件中。

请帮我解决这个问题。

UPD

这只是主 module.aot.js 文件的问题。

有什么建议可以解决这个问题吗？

【问题讨论】：

标签： angular rollup angular2-aot rollupjs tree-shaking

【解决方案1】：

我已经找到了这个案例的解决方案。这很简单，但我花了这么多时间:(

在每个 Angular 组件中，我们需要为其他服务、模块等打上正确的补丁。

例如：

如果我们有这样的项目结构：

|-main.ts
|-src
        | - service
                | - authorize.service.ts
        | - login
                | - login.component.ts

然后在 login.component.ts 中，您想从 serviceimport authorize.service.ts > 文件夹，你需要像这样给这个服务打补丁：

import { donothing } from '../service/authorize.service'

这很奇怪，但是如果我们将下一条路径添加到该服务，那么带有 JIT 或 AOT 的 Angular 应用程序运行良好：

import { donothing } from 'service/authorize.service'

第二种情况是位于当前目录中的某个服务、模块等的路径。

例如：

我们有一个像以前一样的项目，但在根文件夹中我们有 helper.service.ts 文件。

|-main.ts
|-helper.service.ts
...

如果您尝试像这样在 main.ts 中包含 helper.service.ts：

import { donothing2 } from 'helper.service'

或

import { donothing2 } from '/helper.service'

它适用于 JIT 和 AOT 但当我们尝试为 tree- 运行 Rollup 时不起作用颤抖。

解决方案非常简单，但对我来说很奇怪。

我们需要将. 放在文件名之前，因为没有. 它会被视为外部导入。

import { donothing2 } from './helper.service'

希望我的回答对大家有所帮助。

谢谢。

【讨论】：