Angular 14 - Uncaught (in promise): NullInjectorError: R3InjectorError(Standalone[z])[s -> s -> s]:

Question

我试图将我的项目从 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))

问题是什么或者我错过了什么？

Answer 1

您应该在导入数组而不是提供程序中添加 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'
    );
}

Angular 14 - Uncaught (in promise): NullInjectorError: R3InjectorError(Standalone[z])[s -> s -> s]:

Angular 14 - Uncaught (in promise): NullInjectorError: R3InjectorError(Standalone[z])[s -> s -> s]:

javascript

angular

typescript