Testing an Angular app with ngUpgrade fails with "Unknown provider: ng2.InjectorProvider <- ng2.Injector"

Question

I'm trying to use ngUpgrade to move from ng1 to ng2, and also keep my Karma/Jasmine tests passing during the upgrade, but I'm running into an error I can't figure out.

I've upgraded a Service (Data) to be an ng2 @Injectable, and used upgradeAdapter.downgradeNg2Provider to inject it into my ng1 app. It works fine in production code.

But when I try to $inject it in my tests, I get this error:

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

Anyone have a working example of unit testing your code in the middle of ngUpgrade? My stack is Webpack-based. I tried following and converting the systemjs guide but didn't have any luck.

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);

score 0 · Answer 1 · edited Dec 04 '17 at 14:37

Actually, you should not use angular mocks' module and inject but the UpgradeProvider.

It's not documented yet but there are some clues in angular 2's source code.

Your UpgradeAdapter instance should be a singleton.
You should add your providers to the UpgradeAdapter singleton using UpgradeAdapter.addProvider.
You should start the app using UpgradeAdapter.bootstrap then grab the UpgradeAdapterRef instance given to ready's callback function.
Get the ng1Injector attribute from the UpgradeAdapterRef instance.
Instantiate your service using the injector's synchronuous get method.

Here's a plunker with the solution: https://embed.plnkr.co/EauYut/

We also published a blog post about angular 2 migration on Wishtack. We will soon be filling the blog with more posts about angular 2 testing.

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

Hope it helps

Testing an Angular app with ngUpgrade fails with "Unknown provider: ng2.InjectorProvider <- ng2.Injector"

1 Answers1