Angular dependency injection in project transpiled with babel

Question

I'm trying to transpile my angular 6 project (written in typescript) with the new babel 7 but I can't figure out how to get the dependency injection to work.

Everytime the project is launched within chrome the following error is thrown:

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)

I've created a fork of a boilerplate and added a simple httpClient service injection to reproduce the error: https://github.com/gnihi/angular-6-with-babel-typescript

If you remove the constructor within the app.component.ts everything works just fine.

Here are the project dependencies:

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

Thank you for your time and help!

Try adding "emitDecoratorMetadata": true, to your tsconfig.json — yurzui
– yurzui, Commented Oct 22, 2018 at 15:15
Where is the constructor here? github.com/hzub/angular-6-with-babel-typescript/blob/master/src/… — yurzui
– yurzui, Commented Oct 22, 2018 at 16:07
Dang that was the original, not the fork... This is the correct one: github.com/gnihi/angular-6-with-babel-typescript — Marc
– Marc, Commented Oct 23, 2018 at 6:33

Marc · Accepted Answer · 2018-10-30 08:10:42Z

1

The owner of the initial repository replied to my question (https://github.com/hzub/angular-6-with-babel-typescript/issues/2#event-1919783976). It seems that the dependencies can't be resolved within the application. He recommended to switch to explizit dependency injection (angular.core.Inject). https://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html.

answered Oct 30, 2018 at 8:10

Marc

315 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Teodor Mosteanu · Accepted Answer · 2022-09-19 17:21:45Z

I had a similar issue, but in my case, it was when I was migrating from AngularJs to Angular. After some research, I realized that the compiler did not know how to interpret the decorators. So, what worked for me was adding this to my package.json:

 "reflect-metadata": "^0.1.10",
"babel-plugin-transform-typescript-metadata": "^0.3.2"

and to my webpack config: Note: "babel-plugin-transform-typescript-metadata" needs to come before proposal decorators plugin

plugins: [....
            "babel-plugin-transform-typescript-metadata",
            ['@babel/plugin-proposal-decorators', { legacy: true }],
          ],

and finally, we import the reflect metadata in the main.ts

import 'reflect-metadata';

Collectives™ on Stack Overflow

Angular dependency injection in project transpiled with babel

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related