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

What sets Interface apart from InstanceType<typeof Class> when used as a variable type?

Let's take a look at an example implementation: HttpService.ts: export interface IHttpService { request(): Promise<any>; formPostRequest(): any; } export class HttpService implements IHttpService { public async request() { // Implem ...

typescript

Deriving values in Typescript based on a subset of a union for conditional typing

Can someone provide assistance with type inference in TypeScript to narrow a union based on a conditional type? Our API validates a set of parameters by normalizing all values for easier processing. One parameter can be either an array of strings or an ar ...

typescripttype-inference

Having trouble with @Component in Angular 2+ causing an error

My application is facing a delay while loading large amounts of data, so I decided to implement a spinner. However, I encountered an issue. I referred to the following links for guidance: Pre-Bootstrap Loading Screen For Angular2 and to implement a spin ...

angularspinner

Using Datatable.net with Angular 6 for Change Monitoring

I've been encountering several issues with the custom datatable component that I created. One specific problem is that when I delete a row from my datatable, not only does the row disappear, but also the pagination functionality and other features st ...

angulartypescriptdatatablesangular6

Passing optional inputs in Angular using ngx-charts is a simple and convenient

Currently delving into Angular 8 and ngx-charts. My goal is to showcase graphs sourced from configuration files. To achieve this, I have enabled the configuration file to offer multiple graphic options (essentially encompassing most options available at ) ...

angularinputcomponentsngx-charts

What is the process for gaining entry to the environment files of a separate project?

I am working with two Angular projects. The first project is called Main, and I need to load environment files from the second project into Main. I understand that we can access assets/a.json in another project using HttpClient.get. Can someone please ad ...

angularenvironment-variables

Unable to fulfill the pledge

I'm struggling to receive the promise from the backend after making a get request. Can anyone help me figure out what I might be doing wrong? makeLoginCall(_username: string, _password: string) { let promise = new Promise((resolve, reject) => ...

typescriptangular

I am looking to extract solely the numerical values

Programming Tools ・ react ・ typescript ・ yarn I am trying to extract only numbers using the match method But I keep encountering an error Error Message: TypeError: Cannot read property 'match' of undefined const age="19 years ...

javascriptreactjstypescript

My goal is to develop a secure login system with authentication on the Angular platform

login(data: any) { this.user.getUsers().subscribe( (users) => { const user = users.find((u) => u.username === data.username && u.userpassword === data.password); if (user) { // Valid username and password, ...

jsonangulartypescript

Combining the output of two Observables through the CombineLatest method to generate a

I possess two separate collections of information: Data Model: taxControlReference [ { "providerId": "HE", "taxTables": { "STAT": [ 1 ] } }, ...

angulartypescriptrxjsobservable

What is the process for extracting the "path expression" from an interface in TypeScript?

My goal is to achieve the following structure: type Post = { id: number title: string author: { name: string } comments: { text: string }[] } type ExtractPathExpressions<T> = ??? type Paths = ExtractPathExpressions<Post> / ...

typescriptunion-typesrecursive-type

Unpacking data types from an array of classes in TypeScript: A step-by-step guide

I am working on a function that takes an array or rest of Typescript classes as input and resolves, returning their instances. However, I'm struggling to ensure correct typing for it. If I take one class as an example: class Base { isBase = true ...

typescript

Establish the lowest possible height for Angular Material Expansion Panel Content

Is there a way to specify a minimum height for the content of an Angular Material expansion panel when it is open? I have searched for examples on setting the expandedHeight and collapsedHeight for the header, but not for the content itself. The Angular Do ...

cssangularangular-material

Hiding the header on a specific route in Angular 6

Attempting to hide the header for only one specific route Imagine having three different routes: route1, route2, and route3. In this scenario, there is a component named app-header. The goal is to make sure that the app-header component is hidden when t ...

angulartypescriptangular6

"Enhance your project with the power of Angular CLI, npm,

I am working on an Angular 2 project built with npm and angular-cli. I want to be able to copy a folder into another folder before every compilation. The goal is to have multiple themes in individual folders, and then select one of those themes using a va ...

angularnpmbuildangular-cli

Using TypeScript, you can replace multiple values within a string

Question : var str = "I have a <animal>, a <flower>, and a <car>."; In the above string, I want to replace the placeholders with Tiger, Rose, and BMW. <animal> , <flower> and <car> Please advise on the best approach ...

javascripthtmlangulartypescriptangular5

Custom Angular 2 decorator designed for post-RC4 versions triggers the 'Multiple Components' exception

Currently, I am in the process of updating my Ionic 2 component known as ionic2-autocomplete. This component was initially created for RC.4 and earlier iterations, and now I am working on migrating it to Angular 2 final. One key aspect of the original des ...

angulartypescript

Unable to establish a connection with ngModel despite the FormsModule module being successfully imported

I'm currently following the tutorial Tour of Heroes and I've reached a point where I need to add my first input field. Even though I have included FormsModule in AppModule, I keep getting an error saying "ng Can't bind to '{ngModel}&apo ...

angularangular5

What is causing the recurring failure of file input changes to take effect?

Here is the code snippet I'm working with: <input type="file" #fileInput ng2FileSelect [uploader]="uploader" (onFileSelected)="onFileSelected($event)" /> Along with the handler function: public onFileSelected(e: Fi ...

javascriptangular

"In TypeScript, when something is undefined, it means its value

I am currently working on a class with code to help manage a database. export class DatabaseHelper { public browserID : number; private ConfigID = 17; } Within this class, I am attempting to access the value of ConfigID SetBrowserID() { ...

typescriptprotractorangularjs-e2ee2e-testing