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

I am trying to use ngUpgrade to switch from ng1 to ng2, and also keep Karma / Jasmine tests during the upgrade, but I encountered an error that I cannot understand.

I updated the Data Service as ng2 @Injectable and used upgradeAdapter.downgradeNg2Provider to inject it into my ng1 application. It works great in production code.

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

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

Does anyone have a working example of a module checking your code in the middle of ngUpgrade? My stack is based on Webpack. I tried following and transforming the systemjs manual , but had no 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); 
+5
source share
1 answer

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

It is not yet documented, but there are some tips in the angular 2 source code.

  • Your UpgradeAdapter instance must be single.
  • You must add your providers to the UpgradeAdapter syntax using UpgradeAdapter.addProvider .
  • You must start the application using UpgradeAdapter.bootstrap , then grab the UpgradeAdapterRef instance specified for the ready callback function.
  • Get the ng1Injector attribute from the UpgradeAdapterRef instance.
  • Instantly activate a service using the synchronous get injector method.

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

We also posted a blog post about angular 2 migration to Wishtack. In the near future we will fill the blog with additional messages about testing angular 2.

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

Hope this helps

0
source

Source: https://habr.com/ru/post/1247829/


All Articles