ui-router/angular-hybrid不適用於AOT /彙總

Question

我正在嘗試使ui路由器適用於角度混合應用。它適用於使用JIT編譯，但是當我嘗試使它與AOT和彙總工作時，彙總步驟失敗，並顯示錯誤代碼：

'@ uirouter/angular-hybrid'由src \ app.module .js，但無法解決 - 將其視爲外部依賴項

我在github上打開了一個問題here。錯誤可以通過下載角度混合最小示例並在角度指南中描述的方式在此示例上設置AOT和彙總來再現，如可從this plunker的文件中看到的那樣。從'@ uirouter/angular-hybrid'進口是不可能的。

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

有沒有人有一些嘗試使角度混合工作與AOT /彙總相結合的經驗？有人成功做到了嗎？

UPDATE

我已設法通過添加自定義插件來彙總-配置能解決角混合封裝，使彙總步驟工作。但即便如此，應用程序在引導角度並在那裏詢問UrlService時在運行時也會失敗。對於UrlService提供者不與以下調用發現（有趣的是，UrlService存在注入的註冊供應商之一，但它是不可能使用UrlService令牌可以找到）：

var router = injector.get(UrlService); 

這裏是調整彙總-config，我不確定是否正確，因爲DI不起作用。仍然是前一個問題，如何使角度混合與彙總兼容仍然存在。

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 COREESM版本（見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/**"

...這就是它...混合UIRouter與AOT工作...

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

來確保依賴項是最新的。該版本的3.1.4版本修復了導致此問題的根本問題。 package.json中的module:條目應指向ES6模塊文件。但是，它指向了一條無效的路徑。在3.1.4中，它再次指向正確的路徑。