NG2-翻译：TranslateService和错误：无法读取未定义的属性'getOptional“（...）

问题描述

我加入NG2，转化为一个项目。当我添加TranslateService我得到：

My system config is setup properly but after hours of searching I can't find anything that helps me figure out what's wrong.

//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
]);

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

解决方案

I think your problem could be:

• You forgot to include the corresponding JS file of your library inside your HTML file.

• You forgot to define a map entry in your SystemJS configuration if you rely on TypeScript file of the library

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

Edit

I finally made it work using the following configuration:

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

Here is what I have in my boot.ts file:

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
]);

Don't forget to specify HTTP_PROVIDERS since it's required by ng2-translate...

With this configuration, I'm able to inject a TranslateService instance into a component:

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

这篇关于NG2-翻译：TranslateService和错误：无法读取未定义的属性'getOptional“（...）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！