Angular 5 - Module read routes from external json file

I have created a new project using Angular-Cli with the --routing option.

So my routing module looks like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {MyComponent} from './components/my/my.component';

const routes: Routes = [
  {path: '', component: MyComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Open in new window


What I need to do is to add the route data to a json file and have the module load the data when the module loads.

So when the app start is would read data from a json file ...and create the routes:

For example:
const routes: Routes = [
  {path: '', component: MyComponent}
];

Open in new window


How can I do this?
LVL 1
error2013Asked:
Who is Participating?
 
Julian HansenCommented:
I have not done this myself but have researched it. It seems that router.resetConfig() is what you need but there is some uncertainty as to whether this works.

This article (https://github.com/angular/angular/issues/11437) suggests the following
public canActivate (): Promise<boolean> {
  return new Promise(resolve => {
    if (this.isLoaded) {
      // The routes have already been added. Resolve and return to exit out of the function
      resolve(true);
      return;
    }

    this.http.get('/api/home')
      .subscribe(menuGroups => {
        // Reset the config using a newly created route config
        this.router.resetConfig(this.constructAppRoutes(menuGroups));

        // Set isLoaded to true and resolve
        this.isLoaded = true;
        resolve(true);
      });
  });
}

private constructAppRoutes (menuGroups: any): Routes {
  // ...
}

Open in new window

This code is untried so I cannot speak to whether it does what you want but hopefully it is useful.

Similar discussions around resetConfig() in this thread
https://github.com/angular/angular/issues/9527
From the above

There are two ways to extend the router configuration:

Fully "safe" and easy to use. Used for lazy loading

{
  path: 'admin',
  loadChildren: 'admin-bundle-file-name'
}

Open in new window

When navigating to admin/blah, the router will fetch admin-bundle-file-name, will extract the configuration, and, finally, will merge it with the main one. This feature has been merged into master a couple of weeks ago and will be released next week.
Imperative
router.resetConfig(someConfig)

Open in new window

In this case you, as as developer, are responsible for making sure that the you don't screw up the configuration.

We were considering having something in between, where you can add/remove sections, but at the moment decided against it. You can implement this functionality yourself on top of resetConfig.
0
 
error2013Author Commented:
I've tried something similar before by just creating a module with the data and using export and then import.

But as for router.resetConfig, I've never been able to make it work so it was either me of it just has a bug.

Have you been able to get it to work before?
0
 
Julian HansenCommented:
As I mentioned in my earlier post I have not personally implemented this but have researched it. There is not a lot on it - the information I sent you is currently all that I was able to find.

If I have time I will try an implementation and post back here.

The question to ask is - why do you need a dynamic config?

Can you not achieve the same thing with a global config and then turning off items with a role based security solution?
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
error2013Author Commented:
I'm trying to get components to load by external configuration done at runtime as this was just part of the puzzle.
0
 
Julian HansenCommented:
Again the question I have - what is the reason for loading them externally as opposed to having them in the app and only enabling them when you need them?
0
 
error2013Author Commented:
The answer to that question is that, I'm trying to get unknown(At the time of compile) components for load by modifying the routes data.
0
 
Julian HansenCommented:
You have another question open about how to dynamically load components - how do you want to handle this question going forward - what do you need on this question that is not overlapping with the other?
0
 
error2013Author Commented:
Well, like I said...this question is one part of the puzzle and the other question is the whole target. The reason why I've broken it into parts that I want to know is that I have found no examples on the internet on how to do the (other question) and no-one seems to know, so I just don't know how to handle it :)
0
 
Julian HansenCommented:
If you google Dynamically add components and ComponentFactoryResolver you should find examples. The code in those samples is too extensive to post here.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.