angular / angular/angularfire

Inject() must be called from an injection context such as a constructor in AngularFirestoreDoc after upgrading to Angular v19

未關閉
#3,621 24 則留言 3 個 reaction 已指派 0 人 在 GitHub 檢視
comp: compat needs: investigation type: bug version: current (v17+)
主要語言
TypeScript
星號
7.8k
分支
2.2k
平均合併
22 小時 28 分鐘
30 天內合併 PR
6

描述

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.

貢獻指南

開啟貢獻指南

研究方向

從 auth.service.ts 第 38 行的呼叫開始,以 NG0203 堆疊追蹤為入口,沿著 AngularFirestore.doc 追蹤到 angular-fire-compat-firestore.mjs。比較回報中的 Angular v19 和 @angular/fire v19 相依性版本,並查看 issue 討論,以確認是否已有確定的重現方式或解決方案。完成的標準是解釋清楚 injection context 錯誤,並確定一個經過驗證的相容性修正方案或由 maintainer 確認的下一步。

由索引模型根據 Issue 內容生成。

評估

技術堆疊
angular, firebase, typescript
領域
backend, databases
Issue 類型
缺陷
難度
4/5
預估耗時
3-5 天
活躍度
冷清
描述清晰度
需要釐清
新手友好度
45/100

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。