Using Angular's dependency injection in a project that has been transpiled with Babel

I am currently attempting to transpile my Angular 6 project, which is written in TypeScript, using the new Babel 7. However, I am facing challenges with getting dependency injection to function properly.

Every time I try to launch the project in Chrome, I encounter the following error:

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)

To demonstrate the issue, I have created a fork of a boilerplate and added a simple httpClient service injection: https://github.com/gnihi/angular-6-with-babel-typescript

If I remove the constructor from app.component.ts, everything functions as expected.

Below are the dependencies of the project:

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

Your assistance and guidance are greatly appreciated. Thank you!

angulartypescriptwebpackdependency-injectionbabeljs

Answer №1

After reaching out to the creator of the original repository, I received a response regarding my inquiry (https://github.com/hzub/angular-6-with-babel-typescript/issues/2#event-1919783976). The issue seems to lie in the application's inability to resolve dependencies. The suggestion was made to transition to explicit dependency injection (angular.core.Inject). For more information, check out this link: .

Answer №2

During my migration from AngularJs to Angular, I encountered a similar issue related to decorators that the compiler was struggling to interpret.

To resolve this issue, I found success by making adjustments in both my package.json and webpack configuration:

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

It's important to note that "babel-plugin-transform-typescript-metadata" should be placed before proposal decorators plugin in your plugins array within the webpack config.

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

Additionally, don't forget to import the reflect metadata in the main.ts file.

import 'reflect-metadata';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to create a personalized loading screen using Angular

I am looking to enhance the loading screen for our angular 9 application. Currently, we are utilizing <div [ngClass]="isLoading ? 'loading' : ''> in each component along with the isloading: boolean variable. Whenever an API ...

angulartypescript

Unable to retrieve shared schema from a different schema.graphql file within the context of schema stitching

In my project, I have a user schema defined in a file named userSchema.graphql; id: String! userName: String! email: String! password: String! } In addition to the user schema, I also have separate schema files for login and register functionalit ...

typescriptgraphqlapollo-servergraphql-tools

Utilizing Bootstrap CSS within Vue's scope

I'm attempting to integrate Bootstrap into a Vue component while ensuring that all CSS is scoped. My initial approach was as follows: <style scoped> @import "~bootstrap/dist/css/bootstrap.css"; @import "~bootstrap-vue/dist/bootstrap-vue.css"; & ...

csstwitter-bootstrapwebpackvue.jsvue-loader

Running the NPM build command results in an error specifically related to an HTML file

I encountered an issue in my AngularJS application when running the command: npm run build -- -prod The error message I received was: ERROR in ng:///home/directoryling/appname-play.component.html (173,41): The left-hand side of an arithmetic operation ...

htmlangulartypescriptnpm

Sending data to the makeStyle function in TypeScript

How can I set the style of backgroundImage in my React component based on the value of post.mainImage? Here is the code snippet: import React from 'react'; import { Post } from '../interfaces'; import { makeStyles, createStyles, Theme ...

reactjstypescriptmaterial-uinext.js

Angular positions the <style> element following the custom stylesheet <link>

I need help understanding Angular styling. Currently, I am working with Angular 10 and Prime-ng. I have created a custom style to override a Prime-ng component's style. However, when I serve the app for testing, the custom style does not override it ...

angularangular-cliprimeng

Maintain the URL state while logging in using angular-oauth2-oidc

In our Angular application, we utilize angular-oauth2-oidc for authentication management with the Code Flow and PKCE. To enable automatic login for users upon app visit, we initialize our app as follows: this.oauthService.configure(authModuleObject); this. ...

angular

Notifying child components of data changes in Angular 2

Within my Angular 2 application, I have a primary component that contains a specific child component called SystemDynamicsComponent. To include this child component within the parent component, I use the following syntax: <system-dynamics [sdFactors]= ...

angular

Is there a way to utilize ng-if within a button to reveal the remaining portion of a form using TypeScript?

Can anyone help me figure out how to make the rest of my form appear when I click on a button? I think I need to use Ng-if or something similar. Here is the code for the button: <button type = "button" class="btn btn-outline-primary" > Données du ...

angulartypescriptangular2-template

Why is my Angular 2 service not showing up in my application?

Trying to access a JSON file using an Angular service has been unsuccessful. While I can easily read and bind the JSON data without the service, attempting to do so with the service results in an error message: Failed to load resource: the server responde ...

javascriptangularjsjsonangular

Webpack with Linaria is currently not enabled to support the experimental syntax 'jsx'

I've recently integrated linaria into my webpack configuration for a create-react-app project. Here is the resulting rule: { "test": /\.(js|mjs|jsx|ts|tsx)$/, "include": "C:\\Project\\src", ...

reactjswebpackbabeljscreate-react-appbabel-loader

I encountered difficulties connecting mongoose to my local MongoDB server

Hello Everyone! Currently, I am in the process of linking my node.js project to mongodb. Initially, everything worked smoothly when I used mongodb atlas. However, when I attempted to connect it using mongodb compass, I faced some issues and nothing seemed ...

node.jstypescriptmongodbexpressmongoose

What is the best way to retrieve the current value of an *ngFor loop upon button click?

I have been attempting to retrieve the data.login value of the data item that the user has clicked on the avatar image. Despite my efforts, I have not been able to successfully achieve this through various methods found online. How can I access the current ...

htmlnode.jsangularngfor

Guide on Linking a Variable to $scope in Angular 2

Struggling to find up-to-date Angular 2 syntax is a challenge. So, how can we properly connect variables (whether simple or objects) in Angular now that the concept of controller $scope has evolved? import {Component} from '@angular/core' @Comp ...

javascriptangulartypescript

Utilizing React TypeScript: Leveraging useRef for Linking purposes

Implementing useRef to Handle Link Clicks import {Link} from 'react-router-dom'; const myLinkRef = useRef<HTMLAnchorElement>(null); ... myLinkRef.current.click() ... <Link to={{pathname: '/terms'}} id='myLink' ref= ...

reactjstypescript

Sign up for notifications about updates to a variable within an Angular service

Is there a way to track changes in the value of a variable within an Angular service? I've been searching for a solution, but haven't been able to find one yet. In my layout's header component, I have a counter that displays the number of ...

angulartypescriptrxjs

Is it feasible for a React-based shell to host or load an Angular component using Module Federation in Webpack 5?

I am currently developing a web application using Angular that will be embedded or loaded from another web application built with React. I am unsure if this integration can be achieved using webpack 5's module federation. Module federation involves l ...

reactjsangularwebpack-module-federation

Guide on injecting a module into an app and ensuring its accessibility to all modules and submodules, while resolving any unknown provider errors

Kindly note that this is a unique question and not a duplicate of: How to inject module and make it accessible to entire angular app I have a specific module (app.config) that I want to inject into my entire application. This module should be easily acce ...

angularjsdependency-injection

Tips for updating the styleurls link dynamically by clicking a button and maintaining the changes

In the midst of developing an angular 2 project, I am currently working on integrating theme settings. Within my project, I have crafted three distinct component.scss files: red.component.scss, yellow.component.scss, and blue.component.scss. My goal is t ...

cssangularangular2-templatescss-lint

What is the correct way to import scss files in a Next.js project?

Currently, I am working on a NextJS project that uses Sass with TypeScript. Everything is running smoothly in the development environment, but as soon as I attempt to create a build version of the project, I encounter this error. https://i.stack.imgur.com ...

reactjstypescriptnext.js