VScode has identified potential problems with modules that utilize Angular Ivy, however, this should not cause any major issues

Encountering a problem with using Angular in VSCode, where there seems to be no ngModules due to AngularIvy. The error message indicates an issue with 'CommonModule' not being recognized as an NgModule class:


[{
    "resource": "[...]src/app/components/basic-info-card/basic-info-card.module.ts",
    "owner": "_generated_diagnostic_collection_name_#4",
    "code": "-996002",
    "severity": 8,
    "message": "'CommonModule' does not appear to be an NgModule class.",
    "startLineNumber": 13,
    "startColumn": 5,
    "endLineNumber": 13,
    "endColumn": 17,
    "relatedInformation": [
        {
            "startLineNumber": 22,
            "startColumn": 39,
            "endLineNumber": 22,
            "endColumn": 39,
            "message": "This likely means that the library (@angular/common) which declares CommonModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.",
            "resource": "not+gona+show"
        }
    ]
}]

Frustratingly, 'CommonModule' is indeed a part of the class and project, making it puzzling why there would be a conflict with Angular Ivy despite deactivating it in tsconfidg.app.json:


...
"angularCompilerOptions": {
    "enableIvy": false
}

The goal is to create a module named "my-project" within an angular project called "project." Any insights or assistance will be greatly appreciated.

Useful Information:

System: Windows 10 home Avast free

VSCODE version

Version: 1.80.1 (user setup)
Commit: 74f6148eb9ea00507ec113ec51c489d6ffb4b771
Date: 2023-07-12T17:22:07.651Z
Electron: 22.3.14
ElectronBuildId: 21893604
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Windows_NT x64 10.0.22621

ANGULAR VERSION

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.3.17
Node: 14.21.3
OS: win32 x64
Angular: 8.2.13
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.29
@angular-devkit/build-angular      0.803.29
@angular-devkit/build-ng-packagr   0.803.29
@angular-devkit/build-optimizer    0.803.29
@angular-devkit/build-webpack      0.803.29
@angular-devkit/core               8.3.29
@angular-devkit/schematics         8.3.17
@angular/cdk                       8.2.3
@angular/cli                       8.3.17
@angular/material                  8.2.3
@ngtools/webpack                   8.3.29
@schematics/angular                8.3.17
@schematics/update                 0.803.17
ng-packagr                         5.7.1
rxjs                               6.5.3
typescript                         3.5.3
webpack                            4.39.2

package.json:

{
  "name": "project",
...

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
...

my tsconfig.json:

{
  "compileOnSave": false,
...

Tried multiple solutions like restarting server, reinstalling dependencies, but the issue persists. Suspecting it may be related to VSCode itself. Seeking guidance to resolve this impediment.

Answer №1

To successfully set up the Angular Language Service extension for an Angular 8 project, consider using version v11.1.3 for optimal performance and compatibility.

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

Testing the functionality of angular directives using external templates

Seeking assistance with testing our Angular directives that use external templates. After exploring various options, it seems there are only two available: Using $httpBackend to respond with the template when requested in the directive Utilizing the prep ...

Container that has the ability to store objects conforming to specific interfaces

If you were to envision having three different types of objects, they might look something like this: interface X { testX: someType; } interface Y { testY: someOtherType[]; } interface Z { testZ1: string; testZ2: number; } Now imagine a master o ...

Concealing an element from a separate module

In the angularjs single page application project that I'm working on, there are two modules: module-'A' and module-'B'. Each module has its own view templates. The view template of module-'B' contains a div with id="sit ...

Methods to validate CSS attributes specified within a class using React testing library

I am struggling to validate the CSS properties defined within a class in CSS using the React Testing Library. Unfortunately, I am facing challenges in doing so. Here are the simplified code snippets: import React from "react"; import { render, ...

Utilize FastClick for improved speed and response on

I have been trying to use FastClick in my TypeScript project with FastClick.d.ts. My TSC configuration uses "module: commonjs" and I am bundling everything with Webpack. However, I am having trouble referencing FastClick properly. When I try to import Fas ...

Access the data attribute of a button element in AngularJS

Utilizing Angularjs for managing pagination loop button id=remove_imslide, I am attempting to retrieve the value of data-img_id from the button to display in an alert message using a Jquery function on button click, but I am encountering issues. This is h ...

Encountering a runtime issue with socket.io when using typescript that has been bundled by

Recently, I attempted to implement web sockets using socket.io in a Node server written in TypeScript with ExpressJS and bundled with Webpack. The server code is structured as follows: import * as Express from "express"; import * as SocketIO from "socket ...

Extracting deeply nested values from a local variable within a view

Here is my current view: <p type="text" disabled='true' class="form-control" > {{selected.timerange}} </p> The value stored in $scope.selected.timerange is: {"available":false,"schedule_start_at":"2015-03-13T00:30:00","schedule_ ...

A guide on declaring an Angular variable within a Blade template

I'm working on the following code snippet: <div ng-repeat='item in reddit.items'> and I want to assign an item attribute (@{{item.content}}) to Blade if certain conditions are met. @if(Auth::check() && !$this->ifFav(Auth::user()- ...

Utilize AngularJS ng-repeat directive to refine JSON objects

I'm working on an angular js controller with a json array that organizes countries by continents. Each continent consists of its own array of countries. //CONTROLLER app.controller('CountryController', function(){ this.continents = ...

How to disable click event binding in Angular2 after it has been clicked once

Within my application, there is a button that has a click event attached to it: <button class="btn btn-default" (click)="doSomething()"> I am wondering if there is a way to remove the (click) event from the button within the doSomething method so t ...

Navigating through different sections of a website using AngularJS routing based on ng-view located

Recently, I started delving into Angular and experimenting with setting up basic routing. On my landing page (currently named index2.html), I have included some .js and .css files, as well as a div with <ng-view></ng-view> to display my content ...

Tips for establishing a shared child state within an AngularJS application

Is it possible to activate an authenticating modal when the token expires on the client side? I would like for this to be a universal child state that can be accessed from any state. Can this be achieved? ...

Implementing asynchronous validation in Angular 2

Recently started working with Angular 2 and encountered an issue while trying to validate an email address from the server This is the form structure I have implemented: this.userform = this._formbuilder.group({ email: ['', [Validators.requir ...

Showing an array in angular.js

When sending data to a PHP file, the file processes it and performs an SQL search, returning a list of names in a for each statement. For example: Ryan, Jack, Billy, Sarah. However, when echoing the response in Angular, all the names are joined together l ...

Tips for incorporating conditional types into function parameters based on existing input

The title might be confusing, so allow me to clarify. My Objective I am referring to the code snippet below. I aim to specify the route property based on the types property as either a string or a function that returns a string. The Code Let's b ...

The Angular framework always initializes the list items in CDK drop List starting from the initial index

Currently, I am working with the cdk Drag drop feature <div class="example-container" cdkDropListGroup> To properly understand and describe data, it is crucial to be aware of the level of variability. This can be determined by analyzing the ...

The ng-controller is not functioning properly even when being correctly invoked

I tried out some simple angularjs code, utilizing nodejs, angularjs, and html. Here are my files: https://github.com/internial/test. I decided not to include the node_modules folder as it was too large. On localhost:8080, this is the result: {{1 + 64}} ...

A service worker of unknown origin is currently getting registered

Currently, I am using the service worker provided in create-react-app. After registering it in index.tsx with serviceWorker.register();, everything seems to be working fine. However, upon closer inspection in the dev tools' Application tab, I noticed ...

Leverage scope Variable in Angular Service URL

Currently, I am aiming to retrieve data from an API by sending specific search parameters through an AngularJS service. Within my ng-model, I have a variable named "search" that I want to utilize as a parameter in the API URL. My initial (unsuccessful) at ...