具有ng2-translate NoProviderError的Angular 1和Angular 2混合应用程序

Question

我有用Angular 1.5编写的遗留应用程序,我想添加用Angular 2编写的新组件

但我有ng2-translate的问题

所以这是我的组件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');
    }

}

这里是home.html

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

这是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']);

所以我使用的是最新版本的Angular 2 rc5.并得到以下错误

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">"

任何人都可以帮助我吗？我尝试了所有变种:(

我也下载angular2-seed并在那里添加相同的代码,它的工作原理!但不适用于混合应用.