Solution for Angular NgClass Import Error

Issue Description

When running npm start in the airwatch directory, the following error occurred:

✘ [ERROR] NG3004: Unable to import symbol NgClass.
  The symbol is not exported from /home/poule/encrypted/stockage-syncable/www/development/html/ng-implementation/airwatch/node_modules/@angular/common/index.d.ts (module '@angular/common'). [plugin angular-compiler]

    ../my-workspace/projects/sae-lib/buttons/main-button/main-button.ngtypecheck.ts:0:0:
      0 │ 
        ╵ ^

  The symbol is declared here.

    ../my-workspace/projects/sae-lib/node_modules/@angular/common/common_module.d.d.ts:351:0:
      351 │ declare class NgClass implements DoCheck {
          ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Root Cause

The error occurred because:

The main-button component in the sae-lib project was importing NgClass directly from @angular/common.
In Angular 20+ (the project is using Angular 20.1.0), NgClass is no longer exported directly from @angular/common but is available from @angular/common/directives.
Additionally, the link-sae-lib.sh script was incorrectly linking sae-lib to old-sae-airwatch instead of the airwatch project.

Changes Made

Updated the import statement in /my-workspace/projects/sae-lib/buttons/main-button/main-button.ts:

// Changed from:
import {NgClass} from '@angular/common';

// To:
import {NgClass} from '@angular/common/directives';

Fixed the link-sae-lib.sh script to link sae-lib to the airwatch project instead of old-sae-airwatch:

# Changed from:
cd ../../../old-sae-airwatch
echo "Utilisation du lien dans l'application old-sae-airwatch..."

# To:
cd ../../../airwatch
echo "Utilisation du lien dans l'application airwatch..."

Additional Requirements

When attempting to verify the fix, a Node.js version compatibility issue was discovered:

Node.js version v20.18.1 detected.
The Angular CLI requires a minimum Node.js version of v20.19 or v22.12.

To fully run the application, you'll need to update Node.js to version v20.19+ or v22.12+.

How to Update Node.js

You can update Node.js using one of the following methods:

Using NVM (Node Version Manager)

# Install NVM if not already installed
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Install and use the required Node.js version
nvm install 20.19
nvm use 20.19

Using the Official Node.js Installer

Visit https://nodejs.org/
Download and install version 20.19 or higher

After updating Node.js, run npm start in the airwatch directory to verify that both the NgClass import issue and the Node.js version issue are resolved.

2.8 KiB Raw Blame History