I have the following routes:
const DATA_CHILDREN: any[] = [{
name: 'Child page',
url: 'child-url'
}, {
name: 'Child page two',
url: 'child-url-two'
}];
const routes: Routes = [{
path: 'data/some-url',
loadChildren: ...
component: SomeComponent,
data: {
pages: MENU_PAGES,
children: DATA_CHILDREN,
}
}];
and I want to fetch the DATA_CHILDREN from my backend. I’ve tried converting DATA_CHILDREN into a Promise, e.g.
let getDataChildren = (): Promise<Page[]> => {
return inject(FormService).findRoutes();
};
and this leaves me with:
Uncaught RuntimeError: NG0203: inject() must be called from an injection context
How can I handle this?
2
You can try and use a resolver to first fetch data from your backend. Before you process it see ref for using the resolver.
You can use this code as a guide ultimately this should work in theory
@Injectable({
providedIn: 'root'
})
export class DataChildrenResolver implements Resolve<Page[]> {
constructor(private formService: FormService) {}
resolve(): Observable<Page[]> {
return this.formService.findRoutes(); //<- data from the backend
}
}
You can then modify your Routes to use the Resolver or children data before the route is activated
const routes: Routes = [{
path: 'data/some-url',
component: Anycomponent,
resolve: {
children: DataChildrenResolver
},
data: {
pages: MENU_PAGES
}
}];
Update your components to use the resolved Data
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app',
templateUrl: './Yourcomponent.html'
})
export class Yourcomponent implements OnInit {
children: Page[];
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
// accessing data
this.children = this.route.snapshot.data['children'];
}
}
Below is how your route-path structure should be for it to work (if you have restrictions on your route-path).
{
path: 'base'
canActivate: [BaseGuard],
resolve: {data: BaseDataResolver}
children: [
{
path: 'child',
guards: [ChildGuard],
component: ChildComponent,
resolve: {childData: ChildDataResolver}
}
]
}
This can be achieved using a resolver, resolver is a service that fetches data before a route is activated. It’s used to ensure that certain data is available before a component is loaded.
Create a resolver
@Injectable({
providedIn: 'root'
})
export class DataResolver implements Resolve<any> {
constructor(private dataService: DataService) {}
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<any> {
return this.dataService.getData();
}
}
Configure the resolver in your routing module to access the data component
const routes: Routes = [
{
path: 'data',
component: DataComponent,
resolve: { data: DataResolver }
}
];
Access resolved data in your component
export class DataComponent implements OnInit {
data: any;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.data = this.route.snapshot.data['data'];
}
}