Add variable prefix to angular routing

Question

I am trying to update an old BackBone.js app to Angular (4/5). One of the requirements is to keep using the old routes in this new app, which triggers some challenges.

The old routes are build as follows:

site.com/r/{username}/{route}

e.g.

site.com/r/johndoe/homepage
site.com/r/janedoe/blog

I'm now using Angular routing without hash, but every route i build in Angular now consists of a long string:

{ path: '/r/:username/homepage' }

I'm hoping there is a cleaner way to uses routes in here. The :username variable is only needed when bootstrapping the app, so it would be a lot nicer to strip the first bit off of the Url and start NG route paths after this.

I know base href will compile the app to a potential subdirectory, but this will not work with the variable username.

Is there a way to make this work in Angular?

David Votrubec · Accepted Answer · 2019-05-02 10:33:44Z

8

Or you can do this, it is really brief, and should do the same

https://angular.io/api/common/APP_BASE_HREF

usage:

@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
})
class AppModule {}

answered May 2, 2019 at 10:33

David Votrubec

4,1843 gold badges35 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pioro90 · Accepted Answer · 2017-11-16 14:23:27Z

3

You can do something like this:

const appRoutes: Routes = [
 {
   path: 'r',
   component: AppComponent,
   children: [
      { path: ':username/homepage', component: HomePageComponent },
      // other children or you can use loadChildren
   ]
 }
];

https://angular.io/guide/router#lazy-loading-route-configuration

answered Nov 16, 2017 at 14:23

pioro90

7046 silver badges14 bronze badges

1 Comment

Jordy Bulten Over a year ago

Thank you, this seems like a better approach. Since i only want to use the :username when bootstrapping the app, i came up with this:

{     path: 'r/:username',     component: AppComponent,     children: [         { path: 'homepage', component: HomePageComponent' }     ] }

Russ · Accepted Answer · 2020-12-15 07:37:00Z

1

For me, the base URL would change based on the client using our software.

This article was perfect for my solution: https://medium.com/@anandshende1994/setting-base-href-dynamically-in-angular-6-b7fe824848cf

In index.html

<script>
  window['base-href'] = window.location.pathname;
  console.log(window['base-href']);
</script>

In app.module.ts (providers section):

  {
    provide: APP_BASE_HREF,
    useValue: window['base-href']
  }

answered Dec 15, 2020 at 7:37

Russ

6418 silver badges14 bronze badges

Collectives™ on Stack Overflow

Add variable prefix to angular routing

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related