Exploring the world of dynamic routing in Angular using JSON data

Question

Exploring the world of dynamic routing in Angular using JSON data

I am facing an important query. Can we implement async routing in Angular 10? I have come across AsyncRoute in Angular2, but it seems to no longer exist in Angular 10.

Here is a snippet of my code :

 getRoutes() {
   return this.http.get(this.APIROOT + 'routes');
 }

pageService.getRoutes().subscribe( (pageRoutes:RouteInterface[]) => {
     const componentMap = {
       'PageComponent': PageComponent,
       'BlogComponent':BlogComponent
     };
     for(let route of pageRoutes){
       this.routes.push({ 'path' : route.route, 'component' : componentMap[route.component]})
     }
   })

While this generates a valid and correct Route Array, my issue lies in the fact that this data is asynchronous. Therefore, I cannot directly push the data to the route:Routes Array in app-routing.module.ts using the constructor. Is there another method to accomplish this task? Has anyone encountered similar challenges before?

angular typescript angular10

Answer 1

Answer №1

It seems like there may not be any responses to this question. I will take it upon myself to provide an answer. After encountering a problem, I managed to find a solution on my own. Although I am unsure of the language used for your API, I personally utilized Python (specifically Django DRF + Wagtail) and implemented a signal hook on post_save. This allows me to save all Page Model Objects into a JSON file every time a page is saved. The JSON file is then stored within the Angular Project Directory. By extracting content from this file, I can dynamically create routes using this method.

Below is the code snippet from my AppComponent:

export class AppComponent implements AfterViewChecked {
  routes: RouteInterface[] = routes;
  routeArr: Routes = [

  ];
  constructor(private router: Router) {
    const componentMap = {
      'PageComponent': PageComponent,
      'BlogComponent': BlogComponent
    };
    for (let route of this.routes) {
      this.routeArr.push({ 'path' : route.route, 'component' : componentMap[route.component]})
    }
    console.log(this.routeArr)
    this.router.resetConfig(this.routeArr)
  }

  ngAfterViewChecked() {
    this.router.resetConfig(this.routeArr)
  }

}

This thread can now be considered closed.

Answer 2

It seems like there may not be any responses to this question. I will take it upon myself to provide an answer. After encountering a problem, I managed to find a solution on my own. Although I am unsure of the language used for your API, I personally utilized Python (specifically Django DRF + Wagtail) and implemented a signal hook on post_save. This allows me to save all Page Model Objects into a JSON file every time a page is saved. The JSON file is then stored within the Angular Project Directory. By extracting content from this file, I can dynamically create routes using this method.

Below is the code snippet from my AppComponent:

export class AppComponent implements AfterViewChecked {
  routes: RouteInterface[] = routes;
  routeArr: Routes = [

  ];
  constructor(private router: Router) {
    const componentMap = {
      'PageComponent': PageComponent,
      'BlogComponent': BlogComponent
    };
    for (let route of this.routes) {
      this.routeArr.push({ 'path' : route.route, 'component' : componentMap[route.component]})
    }
    console.log(this.routeArr)
    this.router.resetConfig(this.routeArr)
  }

  ngAfterViewChecked() {
    this.router.resetConfig(this.routeArr)
  }

}

This thread can now be considered closed.

Exploring the world of dynamic routing in Angular using JSON data

Answer №1

Similar questions

Ways to assign a default value to a radio button using a mock JSON dataset

The issue with npm modules not appearing in EMCA2015 JS imports persists

tsconfig issues with compilation and testing

Implement a sub-routine in Office.js Javascript Word add-in that utilizes asynchronous execution context

Overlap with upper picture formatting

Trigger Screen Reader to Announce When a Component Is Deleted

Unable to configure Angular 2 tour of champions tutorial

Displaying data from multiple checkboxes in an Angular application using an array

Can undefined be forcibly assigned with strict null checks enabled?

Troubleshooting import errors with Typescript for C3 and D3 libraries

Is there a way for me to navigate from one child view to another by clicking on [routerLink]?

What is the technique for passing a value from parent to child components in React?

What is the best way to configure eslint or implement tslint and prettier for typescript?

Using the parameter of type 'never' is necessary as per the TypeScript error message, which states that the argument of type 'string' cannot be assigned to it. This error persists even when

Angular route permissions and safety

How can I retrieve the row index in an Angular Mat-Table that has expandable content?

What's causing the "* before initialization" error in Vue with TypeScript?

Checking Validity of an Array of URLs with Class-Validator

`Is it necessary to utilize @Inject in Angular 2?`

Troubleshooting: Unable to locate .vue.d.ts file during declaration generation with Vue, webpack, and TypeScript