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

For Angular v17, you need to add provideHttpClient() in providers array of app.config.ts file. Like below.

export const appConfig: ApplicationConfig = 
{
    providers: [provideRouter(routes), provideHttpClient()],
};

Explanation

When creating app in latest versions of angular it comes up with standalone components by default, as compared to creating modules where we used to import HttpClientModule in app.module.ts for using httpClient. Btw you can create and modules, it's just not created by default.

Answer 2

When i had this error, i missed to add my custom service to providers of the standalone component where i was using it.

i was only using it in my constructor and importing it on top. Angular 16 does not give an error in the IDE.

@Injectable()
export default class FormlyService {
    [...]
}

to

@Component({
    selector: "page-sell-create",
    standalone: true,
    imports: [FormlyModule, ReactiveFormsModule, TranslateModule],
    providers: [FormlyService], // <-- was missing here
    templateUrl: "./sell-create.component.html",
})
export default class whateverClass {
    // i only had it here
    constructor(private formly: FormlyService) {}
}

Answer 3

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