ng2-translate：TranslateService和Error：無法讀取未定義屬性'getOptional'（...）

Question

我正在將ng2-translate添加到項目中。當我添加TranslateService我得到：

Error: Cannot read property 'getOptional' of undefined(…)

我的系統配置的設置正確，但搜索我找不到任何可以幫助我弄清楚什麼是錯的小時後。

//angular 
import {bootstrap} from "angular2/platform/browser"; 
import {Component,Inject,provide} from "angular2/core"; 
import {HTTP_PROVIDERS} from "angular2/http"; 
import {TranslateService,TranslateStaticLoader,TranslateLoader} from "ng2-translate/ng2-translate"; 

@Component({ 
    selector: 'app', 
    directives: [TheApp], 
    template: '<the-app></the-app>' 
}) 

class TT{ 
    translate:TranslateService 
    constructor(@Inject(TranslateService) translate:TranslateService){ 
     this.translate = translate; 
     .... 
    } 
    .... 
} 

bootstrap(TT,[ 
    HTTP_PROVIDERS, 
    provide(TranslateLoader, {useClass: TranslateStaticLoader}), 
    TranslateService 
]); 

angular2.dev.js:353 TypeError: Cannot read property 'toString' of undefined angular2-polyfills.js:1243

Error: Cannot read property 'getOptional' of undefined(…)Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451lib$es6$promise$$internal$$publishRejection @ angular2-polyfills.js:401(anonymous function) @ angular2-polyfills.js:123Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js:262

<script src="es6-shim.min.js"></script> 
    <script src="es6-module-loader.js"></script> 
    <script src="system-polyfills.js"></script> 

    <script src="angular2-polyfills.js"></script> 
    <script src="system.src.js"></script> 
    <script src="Rx.js"></script> 
    <script src="angular2.dev.js"></script> 
    <script src="ng2-bootstrap.js"></script> 
    <script src="ng2-translate.js"></script> 
    <script src="router.js"></script> 
    <script src="http.js"></script> 

<script> 
      System.transpiler = 'typescript'; 
      System.config({ 
       packages: { 
        ts: { 
         format: 'register', 
         defaultExtension: 'js' 
        } 
       }, 
       map: { 
        moment: '/moment.js', 
        'ng2-translate/ng2-translate': '/ng2-translate.js' 
       } 
      }); 
      System.import('ts/main') 
        .then(null, console.error.bind(console)); 
     </script> 

TypeError: Cannot read property 'getOptional' of undefined at runAppInitializers (localhost:8000/angular2.dev.js:12628:25) at PlatformRef.initApp (localhost:8000/angular2.dev.js:12603:21) at PlatformRef.application (localhost:8000/angular2.dev.js:12550:22) at Object.bootstrap (localhost:8000/angular2.dev.js:24805:64) at execute (localhost:8000/ts/main.js:118:23) at ensureEvaluated (localhost:8000/system.src.js:3197:26) at Object.execute (localhost:8000/system.src.js:3315:13) at doDynamicExecute (localhost:8000/system.src.js:708:25) at link (localhost:8000/system.src.js:910:20) at doLink (localhost:8000/system.src.js:562:7)

Answer 1

我認爲你的問題可能是：

• 你忘了，包括你的HTML文件中庫的相應的JS文件。

• 你忘了，如果你依靠

  System.config({ 
      map: { 
      'ng2-translate': 'node_modules/ng2-translate' 
      }, 
      (…) 
  }); 
  

編輯

我終於做到了工作，使用以下配置庫的打字稿文件來定義您的SystemJS配置的映射條目：

<script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script> 
<script src="https://code.angularjs.org/tools/system.js"></script> 
<script src="https://code.angularjs.org/tools/typescript.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script> 
<script src="https://code.angularjs.org/2.0.0-beta.7/http.dev.js"></script> 

<script> 
    System.config({ 
    map: { 
     "ng2-translate": "node_modules/ng2-translate" 
    }, 
    packages: {  
     app: { 
     format: 'register', 
     defaultExtension: 'js' 
     }, 
     "ng2-translate": { 
     "defaultExtension": "js" 
     } 
    }, 
    }); 
    System.import('app/boot') 
     .then(null, console.error.bind(console)); 
</script> 

這是我在我boot.ts文件：

import { bootstrap } from 'angular2/platform/browser'; 
import { provide } from 'angular2/core'; 
import { HTTP_PROVIDERS } from 'angular2/http'; 
import { AppComponent } from './app.component'; 
import {TranslateService,TranslateStaticLoader,TranslateLoader} from "ng2-translate/ng2-translate"; 

bootstrap(AppComponent, [ 
    HTTP_PROVIDERS, 
    provide(TranslateLoader, {useClass: TranslateStaticLoader}), 
    TranslateService 
]); 

不要忘記指定HTTP_PROVIDERS，因爲它通過NG2，翻譯需要真實...

有了這個配置，我能夠注入TranslateService實例到一個組件：

import {Component,Inject} from 'angular2/core'; 
import {TranslateService,TranslateStaticLoader,TranslateLoader} from "ng2-translate/ng2-translate"; 

@Component({ 
    selector: 'first-app', 
    template: ` 
    <div>Hello wolrd</div> 
    ` 
}) 
export class AppComponent { 
    constructor(translate:TranslateService) { 
    console.log(translate); // not undefined 
    } 
}