ng2-translate：TranslateService 和错误：无法读取未定义的属性“getOptional”（…）

Posted 2023-02-22

【中文标题】ng2-translate：TranslateService 和错误：无法读取未定义的属性“getOptional”（…）

【英文标题】：ng2-translate: TranslateService and Error: Cannot read property 'getOptional' of undefined(…)

【发布时间】：2016-06-13 04:50:10

【问题描述】：

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

错误：无法读取 undefined(...) 的属性“getOptional”

我的系统配置设置正确，但经过数小时的搜索，我找不到任何可以帮助我找出问题所在的东西。

//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: 无法读取未定义的属性“toString” angular2-polyfills.js:1243

错误：无法读取 undefined(...)Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch @ angular2-polyfills 的属性“getOptional”。 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：无法读取未定义的属性“getOptional” 在 PlatformRef 上运行AppInitializers (localhost:8000/angular2.dev.js:12628:25)。initApp （本地主机：8000/angular2.dev.js:12603:21）在 PlatformRef.application （本地主机：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 (localhost:8000/system.src.js:3315:13) 在 doDynamicExecute （本地主机：8000/system.src.js:708:25）在链接 (localhost:8000/system.src.js:910:20) 在 doLink (localhost:8000/system.src.js:562:7)

【问题讨论】：

您的导入是否可能无法正常工作？

错误发生在哪里？你能添加错误消息/堆栈跟踪吗？

我猜你需要提供更多信息，最好是一个允许重现问题的 Plunker。

【参考方案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
  

【讨论】：

我认为问题出在这个级别。您能否在问题中添加 HTML 条目文件的内容？

谢谢！您可以尝试删除 ng2-translate 的地图条目吗？

您可以尝试在 angular2-polyfills.js 文件的第 1243 行放置一个断点，以了解发生错误时的本地上下文...

获取意外令牌

完整错误见上文，不确定是否有帮助，但有很多事情可以有效地在那里添加断点