Inject() must be called from an injection context such as a constructor in AngularFirestoreDoc after upgrading to Angular v19
- Ngôn ngữ chính
- TypeScript
- Star
- 7.8k
- Fork
- 2.2k
- Merge trung bình
- 22 giờ 28 phút
- Pull request đã merge (30 ngày)
- 6
Mô tả
I recently upgraded all dependencies to Angular v19 (from v18). I was previously on Angular v18 where everything worked fine. However, now, my whole console is spammed with the following error:
```
ERROR RuntimeError: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://angular.dev/errors/NG0203
at injectInjectorOnly (core.mjs:1104:11)
at ɵɵinject (core.mjs:1114:40)
at inject (core.mjs:1199:10)
at (angular-fire-compat-firestore.mjs:93:14)
at new AngularFirestoreDocument (angular-fire-compat-firestore.mjs:98:3)
at _AngularFirestore.doc (angular-fire-compat-firestore.mjs:621:12)
at auth.service.ts:38:14
at switchMap.js:16:17
at OperatorSubscriber2._this._next (OperatorSubscriber.js:14:9)
at Subscriber2.next (Subscriber.js:32:12)
```
However, my auth service at line 38:14 only has the following code:
``.doc(`users/${user.uid}`)``
The whole constructor looks like this (it is a angular service class)
```@Injectable({
providedIn: 'root',
})
export class AuthService {
isLoggedIn$: Observable;
/** User data of database */
user$: Observable;
userRoles$: Observable;
userId: string | undefined = undefined;
username: string | undefined = undefined;
constructor(
readonly firestore: AngularFirestore,
readonly fireAuth: AngularFireAuth,
readonly router: Router,
) {
this.user$ = this.fireAuth.authState.pipe(
switchMap((user) => {
if (user) {
this.userId = user.uid;
return this.firestore
.doc(`users/${user.uid}`)
.valueChanges()
.pipe(
map((userData) => {
if (userData) {
this.username = userData.username; // Assign username
}
return userData;
}),
);
} else {
this.userId = undefined;
this.username = undefined;
return new Observable((observer) => observer.next(null));
}
}),
);
```
But I dont really know, why it does not work anymore in angular 19.
My package dependencies:
```
"dependencies": {
"@angular/animations": "^19.1.5",
"@angular/cdk": "^19.1.3",
"@angular/common": "^19.1.5",
"@angular/compiler": "^19.1.5",
"@angular/core": "^19.1.5",
"@angular/fire": "^19.0.0",
"@angular/forms": "^19.1.5",
"@angular/material": "^19.1.3",
"@angular/platform-browser": "^19.1.5",
"@angular/platform-browser-dynamic": "^19.1.5",
"@angular/router": "^19.1.5",
"@fortawesome/angular-fontawesome": "^1.0.0",
"@fortawesome/free-brands-svg-icons": "^6.7.1",
"@fortawesome/free-regular-svg-icons": "^6.7.1",
"@fortawesome/free-solid-svg-icons": "^6.7.1",
"@ng-select/ng-select": "^14.2.2",
"@ngx-translate/core": "^15.0.0",
"@ngx-translate/http-loader": "^8.0.0",
"angular-build-info": "^2.0.1",
"canvas-confetti": "^1.9.3",
"flowbite": "^2.5.2",
"ng-recaptcha-2": "^15.0.2",
"ngx-editor": "^18.0.0",
"ngx-quill": "^27.0.0",
"quill": "^2.0.3",
"quill2-emoji": "^0.1.2",
"rxjs": "~7.8.0",
"tslib": "^2.8.1",
"tw-elements": "^2.0.0",
"zone.js": "^0.15.0"
},
```
I also tried to set "preserveSymlinks": false, in angular.json however, the issue still persists.
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với lời gọi trong auth.service.ts ở dòng 38 và lần theo lời gọi đó qua AngularFirestore.doc đến angular-fire-compat-firestore.mjs, sử dụng stack trace NG0203 làm điểm bắt đầu. So sánh các phiên bản dependency được báo cáo của Angular v19 và @angular/fire v19, đồng thời xem lại phần thảo luận của issue để tìm một cách tái hiện hoặc hướng giải quyết đã được xác lập. Được xem là hoàn tất khi lỗi injection context được giải thích và xác định được một bản sửa lỗi tương thích đã được kiểm chứng hoặc bước tiếp theo đã được maintainer xác nhận.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, firebase, typescript
- Lĩnh vực
- backend, databases
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Ít trao đổi
- Độ rõ ràng
- Cần làm rõ
- Mức phù hợp với người mới
- 45/100