Question

我正在为项目添加ng2-translate。当我添加TranslateService时，我得到：

错误：无法读取属性＆＃39; getOptional＆＃39;未定义的（...）

我的系统配置设置正确，但经过数小时的搜索，我无法找到任何可以帮助我找出错误的内容。

//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：无法读取属性＆＃39; toString＆＃39;未定义的   angular2-polyfills.js：1243

错误：无法读取属性＆＃39; getOptional＆＃39; 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（匿名函数） @ 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：无法读取属性＆＃39; getOptional＆＃39;未定义的 PlatformRef上的 runAppInitializers（localhost：8000 / angular2.dev.js：12628：25）。 initApp （localhost：8000 / angular2.dev.js：12603：21）at PlatformRef 。应用（localhost：8000 / angular2.dev.js：12550：22）在Object.bootstrap （localhost：8000 / angular2.dev.js：24805：64）执行时（localhost：8000 / ts / main.js:118:23）在ensureEvaluated （localhost：8000 / system.src.js：3197：26）在Object.execute doDynamicExecute（localhost：8000 / system.src.js：3315：13）（localhost：8000 / system.src.js：708：25）链接 doLink上的（localhost：8000 / system.src.js：910：20）（本地主机：8000 / system.src.js：562：7）

Answer 1

我认为你的问题可能是：

您忘记在HTML文件中包含库的相应JS文件。

如果您依赖于库的TypeScript文件，则忘记在SystemJS配置中定义映射条目

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

修改

我终于使用以下配置使其工作：

<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-translate ...
需要它
使用此配置，我可以将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 } }

ng2-translate：TranslateService和错误：无法读取属性＆＃39; getOptional＆＃39;未定义的（...）

1 个答案: