Encountering a challenge when attempting to upgrade to Angular 9: Issue with transitioning undecorated classes with DI migration

As I transition from Angular 8 to Angular 9, I encounter an error during the step related to transitioning undecorated classes with DI.

While attempting to migrate, I faced an issue with undecorated classes that utilize dependency injection. Some project targets could not be properly analyzed due to TypeScript program failures.

The specific error message I received was: error TS100: src\app\app.module.ts(107,25): Error during template compile of 'AppModule' Function calls are not supported in decorators but 'combineReducers' was called in 'appReducers' 'appReducers' references 'modelReducer' at src\app\store\reducers\index.ts(13,10) 'modelReducer' calls 'combineReducers' at src\app\store\reducers\model.ts(25,29).

Do you have any insights on why this error is occurring?

javascriptangulartypescriptangular9

Answer №1

It is highly likely that you will need to add the @Injectable() decorator to any classes using DI.

For example:

@Injectable()
class MyClass {
  constructor(someService: SomeService) {...}
}

Personally, I am waiting for the official release of version 9 before diving in, as I have had some issues with major updates in the past. However, the absence of the "Injectable" decorator in DI and undecorated classes seems to suggest that this may be the issue.

Are you transitioning from version 8.x to 9?

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

Having trouble retrieving data from mailosaur using protractor, even though it works fine with node.js

I've been trying to incorporate Protractor code with mailosaur for handling email functionality but I'm facing issues retrieving the value while coding in Protractor. Surprisingly, when I run the same code in node.js it works perfectly fine and I ...

javascriptnode.jspromiseprotractorangular-promise

Using http-proxy to forward request to a different port

In my code, I am creating a proxy that routes all application calls from port 3000 to port 3002 seamlessly. var http = require('http'), httpProxy = require('http-proxy'); var proxy = httpProxy.createProxyServer(); http.create ...

javascriptnode.jsproxyreverse-proxynode-http-proxy

The valid and pristine properties of the Angular 2 form component are coming back as undefined

This is the code I have written: <form (ngSubmit)="onSubmit()"> <label>Cat Name</label> <input required #name="ngModel" [(ngModel)]="model.catName" name="catName" /> <br> <div [hidden]="catName.valid || catName.pristine" c ...

angular

Ionic3 footer using ion-tabs

Is there a way to create a common footer for all pages with 5 buttons, where the first button is selected by default? The page opened by this first button should have three tabs. I have already created the tabs but am unsure how to add the footer without r ...

javascriptangulartypescriptionic2

Determine if an HTML element contains a specific class using JavaScript

Is there a simple method to determine if an HTML element possesses a particular class? For instance: var item = document.getElementById('something'); if (item.classList.contains('car')) Remember, an element can have more than one clas ...

javascripthtmlclasscss

Trigger ng-change event for each dropdown selection made in AngularJS

Currently, I have a dropdown menu that allows users to select a report for generation. When a user picks a report from the dropdown, it generates and downloads the report for mobile viewing. By utilizing ng-change, the system only detects when a user wants ...

javascriptangularjs

When clicking on an HTML link pointing to a cloud, it does not open in the same frame but instead opens in a new window

I am currently working on an HTML5 application that features a screen divided into two parts. The left part of the screen contains a few links, and upon clicking one of these links, the resulting content should open in the right side frame within the same ...

javascripthtml

Apologies, the module "@org-name/package-name" could not be located

I've hit a roadblock for the past few days. My goal is to create a new npm package that wraps an API I've been developing. When bundling the package, everything seems to be fine in the /dist folder. However, when attempting to test it in a front ...

node.jstypescriptnpmnode-modules

The Johnny-Five stepper initiates movement within a for-loop

I am new to using node.js and johnny-five. I want to move a stepper motor 5 times with 1000 steps each. Here is what I have tried: do 1000 Steps in cw ; console.log('ready); do 1000 steps; console.log('ready') ... It woul ...

javascriptnode.jsarduinojohnny-five

Utilizing Express JS to keep users on the same page upon submitting a form

Although this may seem like a simple query with available tutorials, I am struggling to locate the specific information. I utilized express-generator to create an app and included a basic form in a route. views/form.ejs <div> <h1>This is < ...

javascriptnode.jsformsexpress

The conversion from CSV to JSON using the parse function results in an inaccurate

I am having trouble converting a CSV file to JSON format. Even though I try to convert it, the resulting JSON is not valid. Here is an example of my CSV data: "timestamp","firstName","lastName","range","sName","location" "2019/03/08 12:53:47 pm GMT-4","H ...

javascriptnode.jsjsoncsvfs

"Observables in RxJs: Climbing the Stairs of

Previously, I utilized Promise with async/await syntax in my Typescript code like this: const fooData = await AsyncFooData(); const barData = await AsyncBarData(); ... perform actions using fooData and barData However, when using RxJs Observable<T> ...

typescriptrxjs

Polling with RxJs, handling errors, and resetting retryCount with retryWhen

I am currently working on setting up a polling strategy that functions as follows: Retrieve data from the server every X seconds If the request fails, show an error message: "Error receiving data, retry attempt N°"... And retry every X seconds for a maxi ...

angularrxjspolling

Uploading Images Dynamically with AJAX

Can someone assist me with a multiple upload form that utilizes AJAX to upload and display an image without the need for a submit button? My issue arises when dealing with repeating forms within table rows, causing only the first form to function properly. ...

javascriptphpjqueryajax

Is it possible to copy text from an iframe to the clipboard?

I have encountered an issue in my React app where I am trying to copy text from a card when the user clicks on it. The app displays multiple cards by looping through an array, so there can be any number of cards (n). The problem arises because the React a ...

javascriptreactjsiframe

Incremental migration to Next.js within the current React application

I'm on a quest to uncover practical examples demonstrating the process of gradually transitioning an existing React application towards Next.js. Despite delving into all available Next.js documentation on incremental adoption strategies like subpaths, ...

javascriptreactjsproxynext.jsnetlify

There seems to be an issue with the post request to a PHP file as it is returning a null value when

I have been struggling with this issue for a while now and can't seem to understand why I keep getting null after calling my $.ajax function. I pass an associative array containing the method name, then invoke the method in PHP to return a JSON string ...

phpjavascriptajaxpost

How can I efficiently iterate through the array of index IDs and then iterate individually through the communes, categories, and locations?

Currently, I am developing a nodejs typescript API where I am retrieving an array of objects using a map loop. The data for "communes", "category", and "location" is fetched from another API function based on the issuerId. However, I am facing issues with ...

javascriptnode.jsarraysjsontypescript

Encountered a 404 error while using a MEAN stack application

Encountering a 404 error while attempting to post data using Postman in Chrome. Any assistance will be greatly valued. I am following the application from this link: https://www.youtube.com/watch?v=wtIvu085uU0 Here is the code snippet: //importing modul ...

node.jsmongodbangularpostman

Dealing with AngularJS: Overcoming Lexer Errors When Passing Email Addresses for Regex Validation in Functions

Trying to pass an email address to an AngularJS function has been my recent challenge. Below is a snippet of the code I've been working on. <script> //For simplicity, descriptions for the module and service have been omitted this.sendEmail = f ...

javascriptangularjs