CODEWITHSUNDEEP
angulartypescriptwebpackdependency-injectionbabeljs
Marc
Marc

Reputation: 31

Angular dependency injection in project transpiled with babel

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!

Upvotes: 2

Views: 926

Answers (2)

Teodor Mosteanu
Teodor Mosteanu

Reputation: 11

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';

Upvotes: 1

Marc
Marc

Reputation: 31

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.

Upvotes: 1

Related Questions