typescript - Angular beroendeinjektion i projekt transpilerat med babel

Jag försöker transpilerar mitt Angular 6-projekt (skrivet i TypeScript) med den nya Babel 7 men jag kan inte lista ut hur jag får beroendeinjektionen att fungera.

Varje gång projektet startas i Chrome kastas följande fel:

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)

Jag har skapat en fork av en boilerplate och lagt till en enkel httpClient-tjänsteinjektion för att reproducera felet: https://github.com/gnihi/angular-6-with-babel-typescript

Om du tar bort konstruktorn i app.component.ts fungerar allt precis som det ska.

Här är projektberoendena:

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

Tack för din tid och hjälp!

Svar #1

Ägaren av det ursprungliga lagret svarade på min fråga (https://github.com/hzub/angular-6-with-babel-typescript/issues/2#event-1919783976). Det verkar som att beroenden inte kan lösas inom applikationen. Han rekommenderade att byta till explicit beroendeinjektion (angular.core.Inject). https://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html.

Svar #2

Jag hade ett liknande problem, men i mitt fall var det när jag migrerade från AngularJs till Angular. Efter lite forskning insåg jag att kompilatorn inte visste hur den skulle tolka dekoratorerna. Så det som fungerade för mig var att lägga till detta i min package.json:

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

och till min webpack-konfiguration: Observera: "babel-plugin-transform-typescript-metadata" måste komma före proposal-decorators-pluginet

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

och slutligen importerar vi reflect metadata i main.ts

import 'reflect-metadata';