【问题标题】:Angular dependency injection in project transpiled with babel使用 babel 转译的项目中的 Angular 依赖注入
【发布时间】:2019-03-26 17:19:50
【问题描述】:

我正在尝试用新的 babel 7 转换我的 angular 6 项目(用 typescript 编写),但我不知道如何让依赖注入工作。

每次在 chrome 中启动项目时都会引发以下错误:

Uncaught Error: Can't resolve all parameters for AppComponent: (?).
at syntaxError (compiler.js:1270)
at CompileMetadataResolver._getDependenciesMetadata (compiler.js:11171)
at CompileMetadataResolver._getTypeMetadata (compiler.js:11064)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:10683)
at CompileMetadataResolver._getEntryComponentMetadata (compiler.js:11267)
at eval (compiler.js:10927)
at Array.map (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:10927)
at JitCompiler._loadModules (compiler.js:24104)
at JitCompiler._compileModuleAndComponents (compiler.js:24085)

我创建了一个样板的分支并添加了一个简单的 httpClient 服务注入来重现错误: https://github.com/gnihi/angular-6-with-babel-typescript

如果您删除 app.component.ts 中的构造函数,一切正常。

这里是项目依赖:

{
"devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-typescript": "^7.1.0",
    "babel-loader": "^8.0.0",
    "babel-plugin-transform-decorators": "^6.24.1",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.7"
},
"scripts": {
    "build:dev": "webpack --mode development",
    "build:prod": "webpack --mode production",
    "dev": "webpack-dev-server --mode development --content-base=./dist/",
    "type-check": "tsc"
},
"dependencies": {
    "@angular/common": "^6.1.6",
    "@angular/compiler": "^6.1.6",
    "@angular/core": "^6.1.6",
    "@angular/platform-browser-dynamic": "^6.1.6",
    "@angular/platform-browser": "^6.1.6",
    "core-js": "^2.5.7",
    "zone.js": "^0.8.26"
}
}

感谢您的宝贵时间和帮助!

【问题讨论】:

标签: angular typescript webpack dependency-injection babeljs


【解决方案1】:

初始存储库的所有者回复了我的问题 (https://github.com/hzub/angular-6-with-babel-typescript/issues/2#event-1919783976)。 似乎无法在应用程序中解决依赖关系。他建议切换到显式依赖注入(angular.core.Inject)。 https://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html.

【讨论】:

    猜你喜欢
    • 2017-01-15
    • 2021-12-31
    • 2023-03-20
    • 2016-05-26
    • 1970-01-01
    • 2020-03-14
    • 2019-01-29
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多