Angular 1 and Angular 2 hybrid app with ng2-translate NoProviderError

Question

Angular 1 and Angular 2 hybrid app with ng2-translate NoProviderError

I have an outdated application written in Angular 1.5, and I want to add new components written in Angular 2

But I have problems with ng2-translate

so here is my component home.ts

import {Component} from '@angular/core'; import {TranslateService, TranslateLoader, TranslateStaticLoader, TranslatePipe} from 'ng2-translate/ng2-translate'; import {Http} from '@angular/http'; @Component({ selector: 'home', providers: [ TranslateService ], templateUrl: './home.html' }) export class Home { constructor(translate: TranslateService) { // this language will be used as a fallback when a translation isn't found in the current language translate.setDefaultLang('en'); // the lang to use, if the lang isn't available, it will use the current loader to get them translate.use('en'); } }

And here is home.html

 <h3>Home Component</h3> <p>Welcome to Angular Seed</p> {{ 'app.system' | translate }}

and here main.ts

 import { NgModule, forwardRef } from '@angular/core' import { UpgradeAdapter } from '@angular/upgrade'; import { Home } from './home/home'; import {TranslateModule, TranslateService} from 'ng2-translate/ng2-translate'; import { BrowserModule } from "@angular/platform-browser"; import {HttpModule} from "@angular/http"; declare let angular: any; const upgradeAdapter = new UpgradeAdapter(forwardRef(() => MyNg2Module)); const app = angular.module('app'); app.directive('home', upgradeAdapter.downgradeNg2Component(Home)); @NgModule({ declarations: [Home], imports: [ BrowserModule, TranslateModule.forRoot() ], providers: [ TranslateService ], bootstrap : [Home] }) class MyNg2Module {} upgradeAdapter.bootstrap(document.documentElement, ['app']);

So, I am using the latest version of Angular 2 rc5. And get the following error

 ViewWrappedException {_wrapperMessage: "Error in ./Home class Home_Host - inline template:0:0", _originalException: NoProviderError, _originalStack: "Error: DI Exception↵ at NoProviderError.BaseExc…tor.getInternal (constructor.ngfactory.js:174:56)", _context: DebugContext, _wrapperStack: "Error: Error in ./Home class Home_Host - inline te…s://portal.com/js/vendor.js:338:136)"}_context: DebugContext_originalException: NoProviderError_originalStack: "Error: DI Exception↵ at NoProviderError.BaseException [as constructor] (https://portal.com/js/boot.bundle.min.js:53728:21)↵ at NoProviderError.AbstractProviderError [as constructor] (https://portal.com/js/boot.bundle.min.js:50738:14)↵ at new NoProviderError (https://portal.com/js/boot.bundle.min.js:50762:14)↵ at ReflectiveInjector_.$__System.registerDynamic.ReflectiveInjector_._throwOrNull (https://portal.com/js/boot.bundle.min.js:50181:15)↵ at ReflectiveInjector_.$__System.registerDynamic.ReflectiveInjector_._getByKeyDefault (https://portal.com/js/boot.bundle.min.js:50205:21)↵ at ReflectiveInjector_.$__System.registerDynamic.ReflectiveInjector_._getByKey (https://portal.com/js/boot.bundle.min.js:50174:21)↵ at ReflectiveInjector_.$__System.registerDynamic.ReflectiveInjector_.get (https://portal.com/js/boot.bundle.min.js:49987:19)↵ at NgModuleInjector.get (constructor.ngfactory.js:110:104)↵ at NgModuleInjector.get (constructor.ngfactory.js:115:108)↵ at NgModuleInjector.constructorInjector.getInternal (constructor.ngfactory.js:174:56)"_wrapperMessage: "Error in ./Home class Home_Host - inline template:0:0"_wrapperStack: "Error: Error in ./Home class Home_Host - inline template:0:0↵ at ViewWrappedException.WrappedException [as constructor] (https://portal.com/js/boot.bundle.min.js:53744:29)↵ at new ViewWrappedException (https://portal.com/js/boot.bundle.min.js:51646:14)↵ at DebugAppView.$__System.registerDynamic.DebugAppView._rethrowWithContext (https://portal.com/js/boot.bundle.min.js:48650:17)↵ at DebugAppView.$__System.registerDynamic.DebugAppView.create (https://portal.com/js/boot.bundle.min.js:48598:14)↵ at ComponentFactory.$__System.registerDynamic.ComponentFactory.create (https://portal.com/js/boot.bundle.min.js:44422:34)↵ at DowngradeNg2ComponentAdapter.$__System.registerDynamic.DowngradeNg2ComponentAdapter.bootstrapNg2 (https://portal.com/js/boot.bundle.min.js:8763:49)↵ at post (https://portal.com/js/boot.bundle.min.js:27857:20)↵ at ka (https://portal.com/js/vendor.js:359:16)↵ at u (https://portal.com/js/vendor.js:346:326)↵ at g (https://portal.com/js/vendor.js:338:136)"context: (...)message: (...)originalException: (...)originalStack: (...)wrapperMessage: (...)wrapperStack: (...)__proto__: WrappedException "<home id="NG2_UPGRADE_0_home_c0">"