Error TS2315: Invalid Type Assignment for Angular 6 ModuleWithProviders

Hey there, I'm encountering an issue that's got me scratching my head.

I've shared some of my code in the hopes that it might shed some light on the problem.

The problem cropped up as soon as I started working on a Reactive Form.

Let me start off by showing you my package.json:

 {
  "name": "name",
  "version": "0.0.0",
  // more JSON code here ...
}

And here's a snippet from my App module:

 
import {BrowserModule} from '@angular/platform-browser';
// more JavaScript code here ...
})
export class AppModule {
}

The exact error message I'm seeing is:

ERROR in node_modules/@angular/forms/src/form_providers.d.ts(22,9): error TS2315: Type 'ModuleWithProviders' is not generic.

It doesn't seem to be directly related to my code, but rather something at a deeper level in Angular's configuration.

None of my components are showing any errors.

Please advise.

EDIT I made changes to the routing configuration like this:

const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, enableTracing: false});

and added routing in the imports. The issue persists.

angulartypescriptangular-reactive-forms

Answer №1

There seems to be a mismatch between the forms module release and the core,

"dependencies": {
  ...
  "@angular/core": "^6.0.3",
  "@angular/forms": "^6.1.2",

To correct this issue, you can re-install forms using 

yarn add @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea8c85988799aadcc4dac4d9">[email protected]</a>
or 
npm install  @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b2bba6b9a794e2fae4fae7">[email protected]</a>
(depending on which installer was initially used).
After that, there may be other dependencies that need adjusting, which the installer should guide you through.

If you compare the sources for form_providers.ts between versions 6.0.3 and 6.1.2 on github, you will see the change that is causing the error:

6.0.3

import {ModuleWithProviders, NgModule} from '@angular/core';
...
export class ReactiveFormsModule {
  static withConfig(opts: {
    /** @deprecated as of v6 */ warnOnNgModelWithFormControl: 'never' | 'once' | 'always'
  }): ModuleWithProviders {

6.1.2

import {ModuleWithProviders, NgModule} from '@angular/core';
...
export class ReactiveFormsModule {
  static withConfig(opts: {
    /** @deprecated as of v6 */ warnOnNgModelWithFormControl: 'never' | 'once' | 'always'
  }): ModuleWithProviders<ReactiveFormsModule> {

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

Contrast between the node modules "highcharts-angular" and "angular-highcharts" for Angular version 7

In my upcoming Angular v7 application using the latest version of Highcharts, I have encountered two similar node modules listed on the HighCharts tutorial page. However, I'm unsure of the differences between them: Node module: highcharts-angular No ...

angularhighchartsangular7

Guide to implementing basic authentication within an HTTP request in Angular 4

I'm new to this and I only have experience with the http post method. I need to send the username and password as base authentication for every API request. onSubmit = function(userdata){ this.tokenkey = localStorage.getItem('logintoken&apos ...

angularbasic-authentication

How can ng-content be used to adjust the displayed content in Angular?

I am working with two components: hostComponent and textComponent. My goal is to project content inside textContent and make modifications based on other input properties. <app-text-component characterCount='5'> <span> Hello World ...

angularangular-content-projection

Executing a cloud function in Firebase from an Angular-Ionic application by making an HTTP request

I am a newcomer to GCP and app development, so please bear with me if this question seems mundane. Currently, I have an angular-ionic app that is connected to Firebase allowing me to interact with the Firestore database. Now, my challenge is to invoke a ht ...

javascriptangularfirebasegoogle-cloud-functions

When trying to run "ng s -o/ng s/ng build" commands in Angular Cli, there is an issue where no output is displayed

Running "ng serve", "ng serve -o", and "ng build" does not display any output. I am in need of Angular for my project, so if anyone can offer assistance, please help me. ...

angularangular-cli

Updating my Angular application using `ng update` did successfully get it to version 11.0.0-next.6. However, I am aiming to revert back

One of my clients has a project using Angular version 8.x.x. I am keen on updating it to the stable version 10.x.x for better performance and features. I followed all the steps mentioned in the Angular update instructions page: https://update.angular.io/? ...

angular

Is it possible in Angular to directly bind the emitted output of a component to a property?

My primary application component communicates with its sub components using @Output decorated properties on the subcomponent. The output properties utilize an EventEmitter<>(). Typically, these properties emit a simple boolean or number. I want to di ...

angulartypescripteventemitter

Integrate dynamically generated form groups into dynamically generated table rows using Angular - a step-by-step guide

I'm facing a challenge with my Angular application where I have a dynamically generated questionnaire table for X number of subjects. Each row represents a question, and each column is an answer option (which cannot be modified). This means I can&apos ...

angularangular-reactive-forms

Is it possible to synchronize the Lit cached DOM with the live DOM?

Utilizing the Lit framework for constructing my front-end UI components has been a game-changer. However, I have encountered an issue while incorporating our internal company design system's web components. One of these components has the ability to r ...

typescriptlit-elementlit

Developing middleware for managing event handlers

Scenario: I am tasked with managing multiple events that necessitate an "available client". Therefore, in each event handler, my first step is to attempt to acquire an available client. If no client is available, I will send a "Service unavailable" messag ...

javascriptnode.jstypescript

Upon being redirected to a different route, it immediately navigates back to the previous page

Whenever we redirect to a route using an anchor tag with [routerLink], or through the code using: router.navigate(['/path']) For example, if we redirect to the extractedData page from the result page, it initially shows the extractedData page b ...

angularangular-routerlink

Modify the size of HTML elements when a button is clicked using Angular

Check out this code snippet I wrote: <div> <p>First</p> <p>Second</p> <div> <p>Third</p> <p>Fourth</p> </div> <button>+</button> <button>+</button> I'm trying t ...

angularfont-size

Connecting to a port in node.js is not possible

Currently, I am using port 4200 for my Angular application and port 3000 for my Node.js server. However, I am facing an issue where when I run the Angular application, the Node.js server does not work and I encounter a "Connection refused" problem. Can a ...

node.jsangularexpress

It is not possible for the root segment to contain matrix parameters in Ionic 4

Has anyone figured out how to resolve this issue? .ts this.router.navigate(["", { clientId: data.id }]) Error message { path: "", component: HomePage, }, An unhandled error occurred: Root segme ...

angulartypescriptionic-frameworkionic4

The server in Angular 4 does not pause for the http call to finish before rendering. This can result in faster loading

After implementing angular universal, I was able to render the static part of HTML via server-side rendering. However, I encountered an issue where API calls were being made and the server rendered the HTML without waiting for the HTTP call to complete. As ...

angulartypescriptserver-side-renderingangular-universal

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 ...

angulartypescriptwebpackdependency-injectionbabeljs

What causes the inconsistency in TypeScript's structure typing?

It is well-known that TypeScript applies structure typing, as demonstrated in the following example: interface Vector { x: number; y: number; } interface NamedVector { x: number; y: number; name: string; } function calculateLength(v: Vecto ...

javascripttypescript

insert a gap between two elements in the identical line

Is there a way to create spacing between two text fields in the same row? I have tried using margins, paddings, and display flex in the css file but haven't been successful. import "./styles.css"; import TextField from "@material-ui/cor ...

javascriptcssreactjstypescriptmaterial-ui

Traversing a sequence of method calls within a Promise object (as the return type)

In software development, there is a classic technique where a method returns the result of another method call: method1(): ObjectX { if( condition1 ) return method2(); return undefined // or some default value; } method2(): ObjectX { let r ...

typescriptpromise

How is it possible to access a variable in a function that hasn't been declared until later?

While working on a Dialog component, I had an unexpected realization. export const alert = (content: string) => { const buttons = [<button onClick={()=>closeModal()}>ok</button>] // seems alright // const buttons = [<button onCli ...

javascriptreactjstypescriptfunctionclosures