Angular14-未捕獲（承諾）：NullInjectorError：R3InjectorError（Standalone[z]）[s->s->s]：

我嘗試將我的專案從 angular 13 更新到 angular 14，當我提供此應用程式時，CLI 中沒有發生錯誤，并且路由僅適用于默認路徑，但是當我嘗試導航到另一個頁面時，它會導致此錯誤，

也沒有NgModule現在，我在制作獨立組件后從我的專案中洗掉了所有模塊。

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(Standalone[u])[s -> s -> s]: 
  NullInjectorError: No provider for s!
NullInjectorError: R3InjectorError(Standalone[u])[s -> s -> s]: 
  NullInjectorError: No provider for s!
    at Vf.get (core.mjs:9131:27)
    at Bf.get (core.mjs:9298:33)
    at Bf.get (core.mjs:9298:33)
    at Bf.get (core.mjs:9298:33)
    at J0.get (core.mjs:22219:36)
    at Io (core.mjs:3378:39)
    at Cs (core.mjs:3423:12)
    at Object.Fi (core.mjs:10447:12)
    at e.?fac [as factory] (info.component.ts:18:27)
    at er (core.mjs:3608:44)
    at Me (zone.js:1211:31)
    at Me (zone.js:1165:17)
    at zone.js:1278:17
    at F.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:26490:33)
    at F.invokeTask (zone.js:405:60)
    at pe.runTask (zone.js:178:47)
    at D (zone.js:585:35)
Mv @ core.mjs:6751
handleError @ core.mjs:6798
next @ core.mjs:27035
next @ Subscriber.js:91
_next @ Subscriber.js:60
next @ Subscriber.js:31
(anonymous) @ Subject.js:34
ne @ errorContext.js:19
next @ Subject.js:27
emit @ core.mjs:23126
(anonymous) @ core.mjs:26529
invoke @ zone.js:372
run @ zone.js:134
runOutsideAngular @ core.mjs:26402
onHandleError @ core.mjs:26529
handleError @ zone.js:376
runGuarded @ zone.js:147
l.microtaskDrainDone @ zone.js:1072
D @ zone.js:592
Promise.then (async)
Ne @ zone.js:561
X @ zone.js:572
scheduleTask @ zone.js:396
onScheduleTask @ zone.js:283
scheduleTask @ zone.js:386
scheduleTask @ zone.js:221
scheduleMicroTask @ zone.js:241
Be @ zone.js:1265
Me @ zone.js:1202
(anonymous) @ zone.js:1118
n @ jsonp chunk loading:77
(anonymous) @ src_app_info_info_component_ts.js:1
index.js:551 

我很想知道，因為那時它如何服務于默認路徑，而不是任何其他路徑。

這是我的app.routing-module.ts檔案看起來像：

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'home',
    loadComponent: () => import('./home//home.component').then((m) => m.HomeComponent),
    title: 'Sefat Anam - Home Page'
  },
  {
    path: 'portfolio',
    loadComponent: () => import('./info/info.component').then((m) => m.InfoComponent),
    title: 'Sefat Anam - Portfolio Page'
  },
  {
    path: 'art',
    loadComponent: () => import('./art/art.component').then((m) => m.ArtComponent),
    title: 'Sefat Anam -  Art Page'
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  }
];

這里發生錯誤的組件以及其他組件與它相同，

@Component({
  selector: 'app-info',
  templateUrl: './info.component.html',
  styleUrls: ['./info.component.scss'],
  standalone: true,
  providers: [CommonModule,HttpClientModule]
})
export class InfoComponent implements OnInit {
  technologies!: Observable<Technology[]>;
  employmentHistories!: Observable<EmploymentHistory[]>;
  educations!: Observable<Education[]>;

  constructor(private httpClient: HttpClient) { }
  ngOnInit(): void {
this.technologies = this.httpClient.get<Technology[]>(environment.api_url   'technologies.json');
    this.educations = this.httpClient.get<Education[]>(environment.api_url   'educations.json');
    this.employmentHistories = this.httpClient.get<EmploymentHistory[]>(
      environment.api_url   'employmentHistory.json'
    );
}

main.ts檔案是這樣的，

if (environment.production) {
  enableProdMode();
}
bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(RouterModule.forRoot(routes)),
  ]
}).catch(err => console.log(err))

會是什么問題或者我錯過了什么？

uj5u.com熱心網友回復：

您應該在匯入陣列而不是提供程式中添加 CommonModule 和 HttpClientModule。

嘗試這個：

@Component({
  selector: 'app-info',
  templateUrl: './info.component.html',
  styleUrls: ['./info.component.scss'],
  standalone: true,
  imports: [CommonModule,HttpClientModule]
})
export class InfoComponent implements OnInit {
  technologies!: Observable<Technology[]>;
  employmentHistories!: Observable<EmploymentHistory[]>;
  educations!: Observable<Education[]>;

  constructor(private httpClient: HttpClient) { }
  ngOnInit(): void {
    this.technologies = this.httpClient.get<Technology[]>(environment.api_url   'technologies.json');
    this.educations = this.httpClient.get<Education[]>(environment.api_url   'educations.json');
    this.employmentHistories = this.httpClient.get<EmploymentHistory[]>(
      environment.api_url   'employmentHistory.json'
    );
}

標籤：javascript 有角度的 打字稿

上一篇：class.active不會通過（單擊）事件處理程式進行更改

下一篇：debounceTime()不能從服務類呼叫