ui-router/angular-hybrid 不使用 AOT / rollup

Question

我正在尝试让 ui-router 为 angular 混合应用程序工作。它在使用 JIT 编译时有效，但当我尝试使其与 AOT 和汇总一起使用时，汇总步骤失败并显示错误消息：

'@uirouter/angular-hybrid' 由 src\app.module.js 导入，但无法解析 - 将其视为外部依赖项

我已经在 github here. The error can be reproduced by downloading the angular-hybrid minimal example and setting up AOT and rollup on this example the way it is described in angular guidelines, as can be seen in the files from this plunker 上打开了一个问题。来自“@uirouter/angular-hybrid”的导入无法用于汇总解析。

import { UIRouterUpgradeModule } from '@uirouter/angular-hybrid';

有没有人有尝试使 angular-hybrid 与 AOT/rollup 结合使用的经验？有人成功过吗？

更新

我通过向解析 angular-hybrid 包的 rollup-config 添加自定义插件，设法使汇总步骤工作。但即便如此，应用程序在引导 angular 并在那里请求 UrlService 时在运行时失败。以下调用未找到 UrlService 的提供者（有趣的是，UrlService 存在于注入器的注册提供者中，但使用 UrlService 令牌无法找到）：

var router = injector.get(UrlService);

这是调整后的 rollup-config，我不确定是否合适，因为 DI 不起作用。仍然是前一个问题，如何使 angular-hybrid 与 rollup 兼容仍然存在。

import nodeResolve from "rollup-plugin-node-resolve"
import commonjs from "rollup-plugin-commonjs";
import uglify from "rollup-plugin-uglify";
import progress from "rollup-plugin-progress";

class UIRouterHybridResolver 
{
    constructor(options) 
    {
        this.options = options;
    }

    resolveId(id, from)
    {
        if (id.startsWith("@uirouter/angular-hybrid"))
        {
            return `${__dirname}/node_modules/@uirouter/angular-hybrid/lib/angular-hybrid.js`;          
        }

        return null;
    }
}
const uIRouterHybridResolver = (config) => new UIRouterHybridResolver(config);

export default {
    entry: "src/main.js",
    dest: "src/build.js", // output a single application bundle
    sourceMap: false,
    format: "iife",
    onwarn: function (warning) {
        // Skip certain warnings

        // should intercept ... but doesn't in some rollup versions
        if (warning.code === "THIS_IS_UNDEFINED") { return; }

        // console.warn everything else
        console.warn(warning.message);
    },
    plugins: [       
        commonjs({
            include: [
                "node_modules/rxjs/**",
                "node_modules/@uirouter/core/**"
            ]
        }),
        nodeResolve({ jsnext: true, module: true }),
        uIRouterHybridResolver(),
        uglify(),        
        progress({ clearLine: true })
    ],
    globals: { angular: "angular" },
    external: ["angular"]
};

Answer 1

你快到了。我们 rollup.js 捆绑包的最终本质是：

a UIRouter CORE esm version (see ).

那段代码在node_modules\@uirouter\core\lib-esm\（末尾的\lib-esm）处可用。要使用它，我们需要调整 UIRouterHybridResolver 插件：

class UIRouterHybridResolver 
{
    resolveId(id, from)
    {
        if (id.startsWith("@uirouter/core"))
        {
            return `${__dirname}/node_modules/@uirouter/core/lib-esm/index.js`;
        }
        if (id.startsWith("@uirouter/angular-hybrid"))
        {
            return `${__dirname}/node_modules/@uirouter/angular-hybrid/lib/angular-hybrid.js`;
        }
    }
}
const uIRouterHybridResolver = () => new UIRouterHybridResolver();

我们还必须确定，这将是我们导出配置的第一个插件：

export default {
    entry: "src/main.js",
    dest: "src/build.js", 
    ...
    plugins: [       
        uIRouterHybridResolver(),
        commonjs({
            include: [
                "node_modules/rxjs/**"
            ]
        }),
        ...

NOTE: also, the commonjs plugin does not need (should not have) the "node_modules/@uirouter/core/**", just include "node_modules/rxjs/**"

...就是这样...带有 AOT 的混合 UIRouter 正在工作...

延长

此外，请确保我们遵循此处描述的说明：https://www.npmjs.com/package/@uirouter/angular-hybrid。大多数情况下 package.json 包含 just 键 @uirouter/angular-hybrid:

dependencies: {
  ...
  "@angular/common": "^4.0.0",
  "@angular/compiler": "^4.0.0",
  "@angular/core": "^4.0.0",
  "@angular/platform-browser": "^4.0.0",
  "@angular/platform-browser-dynamic": "^4.0.0",
  "@angular/upgrade": "^4.0.0",
  ...
  "@uirouter/angular-hybrid": "3.1.2",
  ...

即不要附加 "@uirouter/angular": "1.0.0-beta.7" 等内容。最后通过调用 npm i

确保依赖项是最新的

Answer 2

@uirouter/angular-hybrid 的 3.1.4 版本修复了导致此问题的根本问题。 package.json 中的 module: 条目应该指向 ES6 模块文件。但是，它指向无效路径。在 3.1.4 中它再次指向正确的路径。