使用ngUpgrade測試Angular應用程序失敗，顯示“未知提供程序：ng2.InjectorProvider < - ng2.Injector”

Question

我正在嘗試使用ngUpgrade從ng1移動到ng2，並在升級期間保持我的Karma / Jasmine測試通過，但我遇到了一個我無法弄清楚的錯誤。

我已將服務（ Data ）升級為ng2 @Injectable ，並使用upgradeAdapter.downgradeNg2Provider將其注入我的ng1應用程序。 它在生產代碼中工作正常。

但是當我嘗試在我的測試中注入它時，我得到了這個錯誤：

Error: [$injector:unpr] Unknown provider: ng2.InjectorProvider <- ng2.Injector <- Data

任何人都有一個在ngUpgrade中間單元測試代碼的工作示例？ 我的堆棧是基於Webpack的。 我試過跟蹤並轉換systemjs指南，但沒有任何運氣。

karma.conf.js ：

module.exports = function (config) {
  config.set({
    // base path used to resolve all patterns
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],

    // list of files/patterns to load in the browser
    files: [{ pattern: 'spec.bundle.js', watched: false }],

    // files to exclude
    exclude: [],

    plugins: [
      require('karma-phantomjs-launcher'),
      require('karma-jasmine'),
      require('karma-webpack')
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: { 'spec.bundle.js': ['webpack'] },

    webpack: require('./webpack.config'),

    webpackServer: {
      noInfo: true // prevent console spamming when running in Karma!
    },

    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],

    // web server port
    port: 9876,

    // enable colors in the output
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // toggle whether to watch files and rerun tests upon incurring changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],

    // if true, Karma runs tests once and exits
    singleRun: false
  });
};

spec.bundle.js

import 'angular';
import 'angular-mocks';

import 'es6-shim';
import 'reflect-metadata';

import 'angular2/src/core/di';
import test from 'angular2/testing';
import browser from 'angular2/platform/testing/browser';

test.setBaseTestProviders(browser.TEST_BROWSER_PLATFORM_PROVIDERS,
                          browser.TEST_BROWSER_APPLICATION_PROVIDERS);

let context = require.context('./src', true, /\.spec\.js/);

context.keys().forEach(context);

Answer 1

實際上，你不應該使用angular mocks的module並inject UpgradeProvider 。

它還沒有記錄，但在角度2的源代碼中有一些線索。

1. 您的UpgradeAdapter實例應該是單例。
2. 您應該使用UpgradeAdapter.addProvider將提供程序添加到UpgradeAdapter單例。
3. 您應該使用UpgradeAdapter.bootstrap啟動應用程序，然后獲取為ready的回調函數提供的UpgradeAdapterRef實例。
4. 獲取ng1Injector從屬性UpgradeAdapterRef實例。
5. 使用注入器的synchronuous get方法實例化您的服務。

這是一個有解決方案的plunker： https ：//embed.plnkr.co/EauYut/

我們還發布了一篇關於Wishtack角度2遷移的博客文章。 我們很快將在博客上填寫更多關於角度2測試的帖子。

http://www.blog.wishtack.com/#!AngularJS-vs-Angular-2-Should-I-Stay-or-Should-I-Go/cuhk/573b59710cf233ef713771b2

希望能幫助到你