Question

I am trying to make the ui-router work for an angular hybrid application. It works when using JIT compilation, but when I try to make it work with AOT and rollup, the rollup step fails with an error mesaage:

'@uirouter/angular-hybrid' is imported by src\app.module.js, but could not be resolved - treating it as an external dependency

I have opened an issue on the 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. The import from '@uirouter/angular-hybrid' is impossible for rollup to resolve.

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

Does anybody have some experience trying to make angular-hybrid work in combination with AOT/rollup? Has somebody succeeded in doing so?

UPDATE

I have managed to make the rollup step work by adding a custom plugin to the rollup-config that resolves the angular-hybrid package. But even so, the application fails in runtime while bootstraping angular and asking for UrlService there. The provider for UrlService is not found with the following call (interestingly, the UrlService exists among the registered providers of the injector, but it is impossible to be found using the UrlService token):

var router = injector.get(UrlService);

Here is the adjusted rollup-config, which I am not sure is proper, since the DI does not work. Still the former question, how to make angular-hybrid compatible with rollup remains.

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捆绑包的最终要点是：

UIRouter CORE esm 版本（请参阅What is the purpose of the esm directories in the Angular 2 modules?）。

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/**"
            ]
        }),
        ...

注意：同样，commonjs插件不需要（不应该） "node_modules/@uirouter/core/**"，只需包含"node_modules/rxjs/**"

......就是这样...... AOT的混合UIRouter工作......

EXTEND

另外，请务必遵循此处所述的说明：https://www.npmjs.com/package/@uirouter/angular-hybrid。主要是package.json包含只是键@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版本修复了导致此问题的根本问题。 module:中的package.json条目应指向ES6模块文件。但是，它指向了无效的路径。在3.1.4中，它再次指向正确的路径。

ui-router/angular-hybrid not working with AOT / rollup

2 个答案: