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

Question

I tried to update my project from angular 13 to angular 14, when I serve this app there is no error occures in CLI and the route work for only default path but when I try to navigate to another page it causes this error,

Also there is no NgModule present, I deleted all the modules from my project after making standlone component.

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 

I'm wonder because then how it serve the default path but not any other path.

Here is my app.routing-module.ts file seems like :

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'
  }
];

Here the the component which occure error & also other component are same as it,

@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'
    );
}

and the main.ts file is like this,

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

What would be the issue or did I miss something ?

Answer 1

You should add CommonModule and HttpClientModule inside imports array not providers.

Try this:

@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'
    );
}