5

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 をダウンロードし、そこに同じコードを追加したところ、動作しました! ただし、ハイブリッド アプリケーション向けではありません。

4

0 に答える 0