Angular2 - Rollup Tree shaking（*.ngfactory - 无法解析）

Question

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

'Containers/module.ngfactory' is imported by Containers\module.aot.js, but could not be resolved – treating it as an external dependency

No name was provided for external module 'Containers/module.ngfactory' in options.globals – guessing 'Containers_module_ngfactory'

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

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

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 工作正常，但我无法运行 tree-shaking 将我的代码打包到一个文件中。

请帮我解决这个问题。

UPD

主要 module.aot.js 文件有问题。

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

Answer 1

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

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

例如：

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

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

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

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 一起工作，但是当我们尝试运行 Rollup tree-shaking.

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

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

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

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

谢谢。

Angular2 - Rollup Tree shaking（*.ngfactory - 无法解析）

Angular2 - Rollup Tree shaking (*.ngfactory - could not be resolved)

angular

rollup

angular2-aot

rollupjs

tree-shaking