CODEWITHSUNDEEP
angular
jabal
jabal

Reputation: 12337

Angular routes setup when app is deployed in subdirectory

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..?

Upvotes: 2

Views: 3684

Answers (1)

funkizer
funkizer

Reputation: 4897

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

Upvotes: 4

Related Questions