Question

我尝试在AOT编译后使用Tree-shake for Angular 2应用程序，然后我抓住了下一条消息：

＆＃39;容器/ module.ngfactory＆＃39;由Containers \ module.aot.js导入，   但无法解决 - 将其视为外部依赖

没有为外部模块提供名称＆＃39; Containers / module.ngfactory＆＃39;   在options.globals中 - 猜测＆＃39; Containers_module_ngfactory＆＃39;

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

这是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

汇总-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 文件存在问题。

有任何建议如何解决此问题？

Answer 1

我找到了这种情况的解决方案。这很简单，但我花了这么多时间:(

在每个Angular组件中，我们需要将正确的补丁放到其他服务，模块等。

例如：

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

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

然后在 login.component.ts 中，您希望从服务导入 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 一起使用，但在我们尝试为树运行汇总时不起作用 - 摇动

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

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

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

我希望我的回答对某人有帮助。

感谢。

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

1 个答案: