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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
Introduction to Web Design

Develop a strong foundation and understanding of web design by learning HTML, CSS, and additional tools to help you develop your own website.

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JSON

From novice to tech pro — start learning today.