Error message: WebStorm shows that the argument type {providedIn: "root"} cannot be assigned to the parameter type {providedIn: Type<any> | "root" | null} and InjectableProvider

Transitioning my app from Angular v5 to v6 has presented me with a TypeScript error when trying to define providedIn in my providers.

The argument type {providedIn: "root"} cannot be assigned to the parameter type {providedIn: Type | "root" | null} & InjectableProvider

 @Injectable({
    providedIn: 'root',
 })
 export class MyService {
 }

I simply copied and pasted the code from the Angular documentation https://angular.io/guide/dependency-injection

Any thoughts on how to resolve this?

UPDATE

To troubleshoot, I created a new project using ng new ... and added a provider using ng g service my-new-service. Surprisingly, there were no errors when I opened this dummy project in WebStorm

UPDATE

After reaching out to WebStorm support, it appears that this issue is a known bug in WebStorm

UPDATE

It seems that Webstorm 2018.1.4 (which hasn't been released yet) will address this problem, as mentioned here:

UPDATE

The Webstorm team has decided to include the fix in version 2018.1.5

UPDATE

Good news! The Webstorm fix for this issue was released on Sunday, June 17th, 2018

angulartypescriptwebstormangular6

Answer №1

Believe it or not, a simple action of closing and reopening my project in Webstorm made the error vanish into thin air

Kudos to @yurzui and @AdrianFâciu for their help

UPDATE

It appears that the issue was actually a known bug in Webstorm, which got fixed in version 2018.1.5 released on Sunday, August 17th, 2018. I upgraded my editor to this version and voilà, no more problem!

For details on the Webstorm bug, check out:

To read about the changes in version 2018.1.5, see:

Answer №2

My issue was due to an incorrect import statement:

import { Injectable } from '@nestjs/common';

I had to update it to:

import { Injectable } from '@angular/core';

Hopefully this solution will assist others facing the same problem!

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

Error encountered while loading a plugin in Typescript and RequireJS compilation process

Currently, I am working on a Typescript application in Visual Studio 2015 where RequireJS is used for loading modules. I have successfully loaded various modules from .ts classes and external libraries by using their typing .d.ts files. However, I have en ...

typescriptrequirejs

Encountering an issue when utilizing inversifyJS inject with the error message "Reading '_userService' cannot be done as it is undefined."

I'm currently working on implementing a DI system, but it seems like I may be missing some key concepts of Inversify. Do I need to create a "get" method for the "user.controller" and then "bind" it to the routes function? Link to complete code reposi ...

node.jstypescriptdependency-injectionrepository-patterninversifyjs

What is the best way to show mat-select choices above a dialog box?

In my quest to find a solution, I came across this approach in the global css file: .cdk-global-overlay-wrapper, .cdk-overlay-container { z-index: 10000; } However, this method seems to cause issues with other dialog windows (such as the MatDatepicker ...

angularangular-materialangular-material-7

Select the location for rendering the application within the root HTML using Single-SPA

I am strategizing to utilize the single-SPA framework alongside angular in order to construct a microfrontend architecture for a website. The current setup of the website is based on a legacy monolith structure, but we are aiming to transition it into a mi ...

angularsingle-spa

Encountering a hiccup while attempting to initialize a fresh Angular project with the command "ng new my

I encountered an error issue after running the command npm new project0 npm ERR! path D:\Polytech\Génie Informatique\2- Génie Informatique 4\Programmation Web\Angular\project0\node_modules\js-yaml\bin\js ...

node.jsangularnpm

Tips for successfully importing $lib in SvelteKit without encountering any TypeScript errors

Is there a way to import a $lib into my svelte project without encountering typescript errors in vscode? The project is building and running smoothly. import ThemeSwitch from '$lib/ThemeSwitch/ThemeSwitch.svelte'; The error message says "Canno ...

typescriptvisual-studio-codesveltesveltekit

Ways to pass a class list from a client to a webmethod using AJAX

I have a list of client-side classes in TypeScript that I need to send to a web method. Here is my TypeScript code: class MakeReportData { LocalName: string; FldSi: number; ViewSi:number; TypeName:string ; CheckBoxshow :boolean ; ...

asp.netajaxtypescriptasp.net-ajaxwebmethod

Navigating with Angular inside an HTTP POST Observable and subscription

Whilst attempting to guide a user towards a dashboard within the response of an httpClient.post request, I have encountered a peculiar issue. The page navigates "successfully" (as evidenced by the URL bar) but unfortunately, most elements of the components ...

angularangular-routerangular10angular-observable

How can I display a new module in Angular without navigating to it?

After following the tutorial at https://angular.io/guide/lazy-loading-ngmodules#create-a-feature-module-with-routing I set out to create the following: My goal is to have a dedicated module for all customer-related components accessible through the /cust ...

angulartypescript

Issue with MongoDB $push within an Array of Arrays: The shorthand property 'elements' does not have a value available in scope

I am encountering an issue while trying to insert data into Elements in MongoDB using TypeScript. Any suggestions on how to resolve this problem? Attempt 1 Error: I am receiving an error message stating "No value exists in scope for the shorthand property ...

databasemongodbtypescriptmongodb-querypush

Learning how to implement GraphQL in Angular without relying on the Apollo client library poses an exciting challenge for

Exploring ways to incorporate GraphQL into my Angular app without relying on the Apollo client. Any suggestions on how this can be achieved? Although I've used the Apollo client for connecting to a GraphQL API in the past, I'm curious about alte ...

angulargraphql

Can someone explain the meaning of this syntax in a TypeScript interface?

Just the other day, I was trying to incorporate the observer pattern into my Angular 4 application and came across this TypeScript code snippet. Unfortunately, I'm not quite sure what it means. Here's the code: module Patterns.Interfaces { ...

angulartypescript

Creating and deploying a basic Angular2 application in cordova

I have a pre-existing app developed in Angular2, which is quite basic. Upon attempting to build it for Android using Cordova, the debug build successfully installs on the system but gets stuck at the loading stage. I am seeking guidance on how to ensure th ...

javascriptandroidcordovaangularloading

What is the best way to enable external events for Fullcalendar in an Angular environment?

Struggling to integrate external events with Fullcalendar and Angular. Admittedly, I am new to Angular and there are aspects that still elude me. Fullcalendar provides a guide on setting up with Angular, available here. Initially, I managed to set up the ...

angulartypescriptfullcalendarfullcalendar-5

Exploring the Power of PrimeNG and Observables in Angular 4 with RxJS

After configuring my Angular 4 project with a service like this: const usersURL = 'http://my.super.url.php'; @Injectable() export class UserService { users: Observable<User[]> constructor (public http:Http) let tick$ = Observ ...

angulartypescriptrxjsprimeng

Angular array sanitization for handling multiple URLs

I need to sanitize multiple URLs from an array containing links to video sites e.g.: videos: SafeResourceUrl = ['www.someURL1', 'www.someURL2',... ]; To achieve this, I created a constructor like so: constructor(private sanitizer ...

angulartypescript

Is there a way to display the data from a URL as selectable options in a dropdown menu?

I have a URL containing an arrayList of data. My task is to fetch the data from this URL and display it as options in a dropdown menu, allowing users to select the desired option. I am aware that this can be achieved using the Get method, but I am facing d ...

angulargetdropdown

Explanation of TypeScript typings for JavaScript libraries API

Currently, I am in the process of building an Express.js application using TypeScript. By installing @types and referring to various resources, I managed to create a functional program. However, my main query revolves around locating comprehensive document ...

javascriptexpresstypescript

Diving deeper: Angular and NPM dependencies compared to devDependencies

After doing a lot of reading on this topic and following this very informative post at: What is the distinction between dependencies, devDependencies, and peerDependencies in an npm package.json file? I have learned that dependencies should include all ru ...

angularnpmnpm-install

A mistake was made: The template contains errors stating that 'app-my-profile' is an unknown element

I encountered an error message: "Uncaught Error: Template parse errors: 'app-my-profile' is not a known element," while working on setting up my profile service. import { BrowserModule } from '@angular/platform-browser'; import { NgM ...

angular