81 lines
2.8 KiB
Markdown
81 lines
2.8 KiB
Markdown
# 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:
|
|
|
|
1. The `main-button` component in the `sae-lib` project was importing `NgClass` directly from `@angular/common`.
|
|
2. 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`.
|
|
3. Additionally, the `link-sae-lib.sh` script was incorrectly linking `sae-lib` to `old-sae-airwatch` instead of the `airwatch` project.
|
|
|
|
## Changes Made
|
|
|
|
1. Updated the import statement in `/my-workspace/projects/sae-lib/buttons/main-button/main-button.ts`:
|
|
```typescript
|
|
// Changed from:
|
|
import {NgClass} from '@angular/common';
|
|
|
|
// To:
|
|
import {NgClass} from '@angular/common/directives';
|
|
```
|
|
|
|
2. Fixed the `link-sae-lib.sh` script to link `sae-lib` to the `airwatch` project instead of `old-sae-airwatch`:
|
|
```bash
|
|
# 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)
|
|
```bash
|
|
# 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
|
|
1. Visit https://nodejs.org/
|
|
2. 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.
|