Angular routes setup when app is deployed in subdirectory

Question

I have an Angular app that I'm deploying in foobar.com/myapp directory on my webserver.

The build command I use is ng build -bh /myapp to make sure that my index.html contains the

<base href="myapp">

line. All the assets and required files load up fine. On the main page I have a router outlet and my routing setup is as follows:

const appRoutes: Routes = [
  { path: 'configure', component: ConfigureComponent },
  { path: 'dashboard',      component: DashboardComponent },
  { path: 'myapp',
    redirectTo: '/configure',
    pathMatch: 'full'
  },
  { path: '',
    redirectTo: '/configure',
    pathMatch: 'full'
  }
];

The problem I am facing is that if I open up the url http://foobar.com/myapp directly, I am landing on the ConfigureComponent as expected, but the URL gets rewritten to http://foobar.com/myapp/myapp/configure. On the ConfigureComponent, I have a link:

<a routerLink="/dashboard" class="btn btn-primary">Save and go to Dashboard</a>

When I click on it, it takes me to the DashboardComponent fine, but the URL is again http://foobar.com/myapp/myapp/dashboard.

I tried to play around with different route configs, but did not manage to set it up the way that eliminates this duplication in the URL. What I don't quite like here is that the app has to have the myapp subdirectory name hardcoded in it, although I would like to make it completely agnostic of the subfolder where I deploy it. (apart from that I have to specify it in the ng build -bh ....

What am I doing wrong here..?

when you deleting duplicate in your URL field it sends you to a right route? — Kraken
– Kraken, Commented Feb 22, 2018 at 19:59
No, it does not. If I manually switch to foobar.com/myapp/configure, it's 404 — jabal
– jabal, Commented Feb 22, 2018 at 20:13
Actually this is not route config problem, because routing withing angular app have no influence on your base route. You need to look at directories path, and play with base href, because depending on server preferences app may be deployed with some baseUrl by its own — Kraken
– Kraken, Commented Feb 22, 2018 at 20:23

funkizer · Accepted Answer · 2018-02-22 20:23:09Z

4

Base should have a traling slash. Try ng build -bh /myapp/

answered Feb 22, 2018 at 20:23

funkizer

4,9271 gold badge21 silver badges21 bronze badges

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

2 Comments

jabal Over a year ago

Thanks a lot. Would have been kind from ng build if there was a warning, or if it added that automatically :-)

funkizer Over a year ago

Yeah :D It's totally valid without, but can't see why anyone would need one without.

Collectives™ on Stack Overflow

Angular routes setup when app is deployed in subdirectory

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related