วิธีติดตั้ง NgRx ใน Angular

บทความนี้สอนวิธีติดตั้ง NgRx ใน Angular โดย NgRx คือ Library สำหรับจัดการสถานะ (State Management) ของโปรแกรมที่พัฒนาด้วย Angular Framework ตัวอย่างนี้เราจะได้เรียนรู้ขั้นตอนการติดตั้ง NgRx และปัญหาที่พบบ่อยในการติดตั้ง NgRx ใน Angular มีรายละเอียดดังนี้

ตัวอย่าง วิธีติดตั้ง NgRx ใน Angular

1. ตรวจสอบเวอร์ชัน Angular ก่อนด้วยคำสั่ง ng v เพราะ NgRx จะติดตั้ง และทำงานได้อย่างไม่มีปัญหากับ Angular ในเวอร์ชั่นเดียวกัน ตัวอย่างใช้ Angular 16.x.x และจะติดตั้ง NgRx เวอร์ชั่น 16.x.x

ng v

Angular CLI: 16.2.10
Node: 18.18.0
Package Manager: npm 10.2.4
OS: win32 x64

Angular: 16.2.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.10
@angular-devkit/build-angular   16.2.10
@angular-devkit/core            16.2.10
@angular-devkit/schematics      16.2.10
@angular/cli                    16.2.10
@schematics/angular             16.2.10
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.3

2. เข้าไปใน Angular Project และติดตั้ง NgRx ด้วยคำสั่ง

ng add @ngrx/store@16.3.0

The package @ngrx/store@16.3.0 will be installed and executed.
Would you like to proceed? Yes
√ Packages successfully installed.
UPDATE src/app/app.module.ts (469 bytes)
UPDATE package.json (1067 bytes)
√ Packages installed successfully.

3. ทดสอบว่าติดตั้ง NgRx สำเร็จโดยการเปิดไฟล์ src/app/app.module.ts จะเห็นโค้ดการ import StoreModule จาก @ngrx/store และ imports StoreModule

import { StoreModule } from '@ngrx/store';
...

@NgModule({
  imports: [
  	...
    StoreModule.forRoot({}, {})
  ],
})
export class AppModule { }

ตัวอย่าง ปัญหาการติดตั้ง NgRx ใน Angular ไม่สำเร็จ

ปัญหาส่วนใหญ่ที่ทำให้ติดตั้ง NgRx ไม่สำเร็จคือ ใช้ Angular เวอร์ชันไม่ตรงกับ NgRx เช่น ปัจจุบัน Angular เวอร์ชัน 17.x.x แต่ NgRx เวอร์ชัน 16.x.x เมื่อติดตั้งจะเกิดปัญหาเช่น

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-rx@0.0.0
npm ERR! Found: @angular/core@17.0.3
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"^17.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"^16.0.0" from @ngrx/store@16.3.0
npm ERR! node_modules/@ngrx/store
npm ERR!   @ngrx/store@"16.3.0" from the root project