1

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

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

在 options.globals 中没有为外部模块 'Containers/module.ngfactory' 提供名称 - 猜测是 '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

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

任何建议如何解决这个问题？

4

1 回答 1

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 ，但当我们尝试运行Rollup进行tree-shaking时不起作用。

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

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

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

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

谢谢。

于 2017-05-27T14:39:24.870 回答