33

I am building a cms where a user can pick what pages to use. So if the user wants a contact page, they select it and fill out some content for it and their site would have a contact route for example. Based on this, is it possible to dynamically add routes in angular based on if a user wants or does not want a particular page?

xaisoft
  • 3,343
  • 8
  • 44
  • 72

1 Answers1

73

Yes. There are multiple ways to accomplish what you are wanting. You can use router.resetConfig to reset the router's config with a new config:

this.router.resetConfig([
 { path: 'somePath', component: SomeComponent},
 ...
]);

You can also push routes onto the config:

this.router.config.push({ path: 'somePath', component: SomeComponent });

Another way I've done this is I had made a way users could build pages using something like TinyMCE and specify the url path they wanted the page to have. In Angular, I specified a wild-card route in the router with { path: '**', component: ComponentBuilder }, where the ComponentBuilder component would fetch the template from the database that corresponds to the path someone requested and then dynamically generate the component with the template. If a template didn't exist in the database, then a normal Page cannot be found template was rendered.

Both ways work. It comes down to how you want your application to function and how you will build the pages users create.

There is a lot more documentation and examples on how to create dynamic components since the solution I came up with in version 2 rc4. I have not used any of these, but it looks helpful:

NPM package for Dynamic Components

Angular Docs on Dynamic Component Loader

Dynamically Creating Components

Another article on dynamically creating components

Tyler Jennings
  • 8,761
  • 2
  • 44
  • 39
  • Thanks. Did you dynamically just create the routes or did you also dynamically create the components as well? – xaisoft Mar 21 '17 at 13:58
  • I experimented with both. The solution I ultimately went with was dynamically creating the components with a wild-card route, where the route path requested matched a template in a database. To me, it was the easiest for the requirements and deadline I had. Though, this topic is much more documented now, and if I re-did it, I'd probably dynamically create the routes to match the components to be rendered. – Tyler Jennings Mar 21 '17 at 14:04
  • Is it true that you would need to know the components ahead of time? So if I wanted to have a contact component, I would have to have a ContactComponent already defined in my angular app, correct? – xaisoft Mar 21 '17 at 14:46
  • Not necessarily, I don't believe. You can create a component at runtime using a `componentFactory`. Here is another article giving an example on how to create components: https://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2/ – Tyler Jennings Mar 21 '17 at 14:58
  • @TylerJennings how can one push a route before the initial routing happens? Is there something like a resolveBeforeRouting functionality? – enf0rcer Aug 22 '17 at 18:28
  • Pushing new routes into the config at runtime works great thanks. One thing to note though is to make sure to add them before any catch all path you may have in your config as route order matters. – Alan Smith Feb 06 '18 at 14:21
  • I tried to implement this but it gives the error No component factory found for SomeComponent. Did you add it to @NgModule.entryComponents? – MeVimalkumar Jul 03 '18 at 14:33
  • @Vicky Yes, all dynamically loaded components must be added to the entry components. See https://stackoverflow.com/a/39376857/3197720 – Tyler Jennings Jul 04 '18 at 15:04
  • @TylerJennings if you use the push() method, how do you get the page to dynamically reload the new tab ? – dataviews Jul 12 '18 at 17:57
  • 1
    I've tried this solution in Angular 9 and it didn't appeared. The problem was that I have a default path: '**', and because of that the **push() did not worked**. I used the **unshift()** function to put new routes to the beginning of the array. – Camorri Jun 25 '20 at 09:20
  • If anyone comes here and tries to access the lacolaco.net article link, it has moved to: https://blog.lacolaco.net/2016/05/dynamic-component-creation-in-angular-2/ - might be worth updating the answer with it. – Kevin Teljeur May 04 '22 at 09:08