NG2-翻译：TranslateService和错误：无法读取未定义的属性'getOptional“（...） [英] ng2-translate: TranslateService and Error: Cannot read property 'getOptional' of undefined(…)
问题描述
我加入NG2，转化为一个项目。当我添加TranslateService我得到：
错误：无法读取未定义的属性'getOptional（...）
我的系统配置是正确安装，但搜索我找不到任何可以帮助我弄清楚什么是错的小时后。
//角
从angular2 /平台/浏览器的进口{}引导;
进口从angular2 /芯{组件，注入，提供};
从angular2 / HTTP进口{HTTP_PROVIDERS};
进口{TranslateService，TranslateStaticLoader，TranslateLoader}从NG2-翻译/ NG2-翻译;@零件（{
选择：应用程序，
指令：该app]
模板：＆lt;保证应用＆GT;＆LT; /的应用＆GT;'
}）类TT {
翻译：TranslateService
构造函数（@注入（TranslateService）翻译：TranslateService）{
this.translate =翻译;
....
}
....
}引导（TT [
HTTP_PROVIDERS，
提供（TranslateLoader，{useClass：TranslateStaticLoader}）
TranslateService
]）;
angular2.dev.js：353类型错误：未定义无法读取财产'的toString
angular2-polyfills.js：1243
错误：无法读取未定义的属性'getOptional（...）Zone.run @ angular2-polyfills.js：1243zoneBoundFn @ angular2-polyfills.js：1220lib $ ES6 $承诺$$内部$$ tryCatch @ angular2-polyfills。 JS：468lib $ ES6 $承诺$$内部$$ invokeCallback @ angular2-polyfills.js：480lib $ ES6 $承诺$$内部$$发布@ angular2-polyfills.js：451lib $ ES6 $承诺$$内部$$ publishRejection @ angular2-polyfills.js：401（匿名函数）@ angular2-polyfills.js：123Zone.run @ angular2-polyfills.js：1243zoneBoundFn @ angular2-polyfills.js：1220lib $ ES6 $承诺尽快$ $$平齐@ angular2，polyfills .js文件：262
＆LT;脚本SRC =ES6-shim.min.js＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =ES6模块-loader.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =系统polyfills.js＆GT;＆LT; / SCRIPT＆GT; ＆所述; SCRIPT SRC =angular2-polyfills.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =system.src.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =Rx.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =angular2.dev.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =NG2-bootstrap.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =NG2-translate.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =router.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =http.js＆GT;＆下; /脚本＆GT;＆LT;脚本＆GT;
System.transpiler ='打字稿';
System.config（{
包：{
TS：{
格式为：注册，
defaultExtension：'JS'
}
}，
图：{
片刻：/moment.js'，
NG2-翻译/ NG2-翻译：/ng2-translate.js
}
}）;
System.import（TS /主）
。然后（NULL，console.error.bind（控制台））;
＆LT; / SCRIPT＆GT;
类型错误：无法读取的未定义的属性'getOptional在
的 runAppInitializers（本地主机：8000 / angular2.dev.js：12628：25）在PlatformRef 的 initApp。
（本地主机：8000 / angular2.dev.js：12603：21）在
PlatformRef 的。应用
（本地主机：8000 / angular2.dev.js：12550：22）在Object.bootstrap
（本地主机：8000 / angular2.dev.js：24805：64）在执行
（本地主机：8000 / TS / main.js：118：23）在ensureEvaluated
（本地主机：8000 / system.src.js：3197：26）在Object.execute
（本地主机：8000 / system.src.js：3315：13）在doDynamicExecute
（本地主机：8000 / system.src.js：708：25）在链接
（本地主机：8000 / system.src.js：910：20）doLink
（本地主机：8000 / system.src.js：562：7）解决方案我觉得你的问题可能是：
- 您忘了，包括你的HTML文件中库的相应的JS文件。
您忘了，如果你依赖库的打字稿文件
定义你的SystemJS配置映射条目System.config（{
图：{
NG2-翻译：node_modules / NG2-翻译
}，
（......）
}）;
修改
我终于做到了工作中使用如下配置：
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/2.0.0-beta.7/angular2-polyfills.js＆GT;＆LT; /脚本＆GT;
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/tools/system.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/tools/typescript.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/2.0.0-beta.7/Rx.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/2.0.0-beta.7/angular2.dev.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/2.0.0-beta.7/http.dev.js＆GT;＆LT; / SCRIPT＆GT;＆LT;脚本＆GT;
System.config（{
图：{
NG2-翻译：node_modules / NG2-翻译
}，
包：{
应用：{
格式为：注册，
defaultExtension：'JS'
}，
NG2-翻译：{
defaultExtension：JS
}
}，
}）;
System.import（应用程序/启动）
。然后（NULL，console.error.bind（控制台））;
＆LT; / SCRIPT＆GT;下面是我在我的
boot.ts文件：从'angular2 /平台/浏览器的进口{}引导;
进口从'angular2 /核心{}提供;
从angular2 / HTTP'进口{HTTP_PROVIDERS};
进口{} AppComponent从'./app.component';
进口{TranslateService，TranslateStaticLoader，TranslateLoader}从NG2-翻译/ NG2-翻译;引导（AppComponent，[
HTTP_PROVIDERS，
提供（TranslateLoader，{useClass：TranslateStaticLoader}）
TranslateService
]）;不要忘了指定
HTTP_PROVIDERS因为它要求的NG2，翻译...使用这个配置，我能够注入
TranslateService实例到一个组件：进口{组件，注入}从'angular2 /核心;
进口{TranslateService，TranslateStaticLoader，TranslateLoader}从NG2-翻译/ NG2-翻译;@零件（{
选择：第一应用，
模板：`
＆LT; DIV＆GT;您好世界国际＆LT; / DIV＆GT;
`
}）
出口类AppComponent {
构造函数（翻译：TranslateService）{
的console.log（翻译）; //不是未定义
}
}I am adding ng2-translate to a project. When I add TranslateService I get:
Error: Cannot read property 'getOptional' of undefined(…)
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 ]);
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)
解决方案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.tsfile: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_PROVIDERSsince it's required by ng2-translate...With this configuration, I'm able to inject a
TranslateServiceinstance 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“（...）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
