[英]Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[baseURL]
[英]Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule) Angular 13
到目前為止我遇到的最奇怪的錯誤。
我在 Angular 13 中生成了一個新組件,從那以后我收到了這個錯誤。 我刪除了組件,但我仍然得到同樣的錯誤。 它是這樣的:
錯誤:
未捕獲(承諾):NullInjectorError:R3InjectorError(AppModule)[HttpService -> ModuleSkillCollectionComponent -> ModuleSkillCollectionComponent -> ModuleSkillCollectionComponent]:NullInjectorError:ModuleSkillCollectionComponent 沒有提供者!
當我向下滾動時,我遇到以下消息:
這讓我:
<nav class="navbar max-w-full w-full mx-auto">
<div class="flex-1">
<div class="w-full top-0 border-b">
<ul class="menu menu-horizontal w-screen">
<li class="left-0 top-0 font-bold"><a href="">CompetentieApp</a></li>
<li class="mr-10">
<a routerLinkActive="tab-active" href="/faq">Eindniveaus</a>
</li>
<li class="mr-10"><a href="/faq">Overzicht Alle Modules</a></li>
<li class="mr-10"><a href="/faq">Beheer</a></li>
<li class="mr-10">
<a routerLinkActive="tab-active" routerLink="moduleCompetenties">Logout</a>
</li>
<img
class="absolute w-14 md:w-36 mr-10 right-0 top-0"
src="assets/logo.png"
alt="logo"
/>
</ul>
</div>
</div>
</nav>
<router-outlet></router-outlet>
這是我的 app-routing.ts:
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'moduleCompetenties', component: ModuleSkillCollectionComponent },
{ path: '**', redirectTo: 'home', pathMatch: 'full' },
];
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [RouterModule],
})
export class AppRoutingModule {}
更新
這是http.service.ts :
@Injectable({ providedIn: 'root' })
export class HttpService {
// moduleSkillJson: ModuleSkillJSON[] = [];
// private isGetting = false;
constructor(private http: HttpClient, private moduleSKillClass: ModuleSkillCollectionComponent) {}
post() {
this.http.post('http://localhost:8080/add', this.postBody).subscribe(() => {
console.log(this.postBody);
});
}
getSkill(skillJson: Skill[]) {
this.http.get<{[key: string] : Skill}>(environment.apiUrl + '/skillCollection')
.pipe(
map((res) => {
// console.log(res);
const skillDetailsArray: Skill[] = [];
for (const key in res) {
if (res.hasOwnProperty(key)) {
skillDetailsArray.push({...res[key], id: key})
}
}
// console.log(skillDetailsArray);
return skillDetailsArray;
}
)
).subscribe(skills => {
// console.log(skills);
skillJson = skills;
// console.log("SkillDetails has " + this.skillJson.length + " entries.");
}
);
}
getModuleSkill(moduleSkillJson: ModuleSkillJSON[]) {
this.http
.get<{[key: string] : ModuleSkillJSON}>(environment.apiUrl + "/moduleSkill")
.pipe(
map((res) => {
// console.log(res);
const moduleSkill: ModuleSkillJSON[] = [];
for (const key in res) {
if (res.hasOwnProperty(key)) {
moduleSkill.push({...res[key], id: key})
}
}
console.log(moduleSkill);
return moduleSkill;
})
).subscribe(moduleSkills => {
moduleSkillJson = moduleSkills;
this.moduleSKillClass.entriesLooper(moduleSkillJson);
});
// console.log("SkillDetails has " + this.moduleSkillJson.length + " entries.");
}
}
這是App.module.ts :
@NgModule({
declarations: [AppComponent, ModuleSkillCollectionComponent],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
HttpClientModule,
],
providers: [HttpService],
bootstrap: [AppComponent],
})
export class AppModule {}
這是module-skill-collection.component.ts :
export class ModuleSkillCollectionComponent implements OnInit {
showTable: Boolean = false;
loop: boolean = true;
cohort: string = '22-23';
moduleSkillJson: ModuleSkillJSON[];
skillJson: Skill[] = [];
entries: number[] = [];
i: number = 1;
constructor(private service: HttpService) {}
ngOnInit(): void {
this.getModuleSkills();
this.getSkill();
}
isActive() {
this.showTable = !this.showTable;
}
counter(i: number) {
return new Array(i);
}
getSkill() {
this.service.getSkill(this.skillJson);
}
getModuleSkills() {
this.service.getModuleSkill(this.moduleSkillJson);
this.entriesLooper(this.moduleSkillJson);
}
entriesLooper(moduleSKills: ModuleSkillJSON[]): number[] {
for (let modulesSKill of moduleSKills) {
this.entries.push(modulesSKill.entry);
}
return this.entries;
}
}
export interface Skill {
id?: string;
skillGroupName: string;
skillGroupType: string;
skillDetailName: string;
skillDetailType: string;
}
export interface ModuleSkillJSON {
moduleCode: string;
moduleName: string;
skill: Array<Skill>[];
entry: number;
exist: number;
id?: string;
}
知道如何解決嗎?
我假設HttpService
是HttpClient
的包裝器 - 如果是這樣,是的,包裝東西,快樂的日子。
該錯誤表明這就是問題所在 - 任何東西都沒有provided
該服務 - 無論是通過在app.module.ts
中提供的大單例,還是在子模塊或組件本身中提供。
在某個地方,必須有一個providers: [HttpService]
行。
除此之外,我想知道它是否具有誤導性,您將ElementRef
注入到組件中?
怎么樣? 例如,通常這些與@ViewChild()
一起使用,除非您自己創建組件以便能夠傳遞一個,否則應用程序從哪里獲取此ElementRef
以注入它?
問題是 A 類 (ModuleSkillCollection) 正在 B 類 (HttpService) 的構造函數中初始化,而 B 類正在 A 類的構造函數中初始化。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.