Issue
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 ?
Solution
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'
);
}
Answered By - Chellappan வ
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.