CODEWITHSUNDEEP
.htaccessangular2-routing
Bram Meerten
Bram Meerten

Reputation: 97

Angular2 routing redirects to wrong url

I have an angular2 application in a subfolder /draft on a apache server. In order to get it working I added this .htaccess in /draft:

Options Indexes FollowSymLinks

RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /draft/index.html [L]

And added this to /draft/index.html in the head:

<base href="draft/">

My components and other typescript files are in /draft/app/, and my /draft/systemjs.config.js looks like this:

(function (global) {
  System.config({
    paths: {
      'npm:': '/draft/node_modules/'
    },
    map: {
      app: '/draft/app',
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      'rxjs': 'npm:rxjs',
      // ...
    },
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

This all works fine, but when I try to add routing something goes wrong. When the user goes to /draft/foo, I want the component FooComponent to be shown.
But when the user goes to /draft/foo, the FooComponent is shown as expected, but for some reason the url is changed to /draft/draft/draft/foo.

This is my /draft/app/app.routing.js:

// ...
const appRoutes: Routes = [
    {
        path: 'draft/foo',
        component: FooComponent
    }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

I added the routing const to the imports array of my AppModule, /draft/app/app.module.ts:

// ...
@NgModule({
    imports:      [ BrowserModule, HttpModule, routing ],
    declarations: [ AppComponent, FooComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

/draft/app/components/AppComponent.ts looks like this:

import {Component} from '@angular/core';

@Component({
    selector: 'my-app',
    template: '<router-outlet></router-outlet>'
})
export class AppComponent {}


So why is /draft/foo redirected to /draft/draft/draft/foo and what can I do to stop it?

Upvotes: 2

Views: 512

Answers (1)

Bram Meerten
Bram Meerten

Reputation: 97

Apparently the base was incorrect. With the following base everything works.

<base href="http://localhost/draft/" />

To make it more dynamic I replaced it with this:

<script>
  document.write('<base href="' + document.location + '" />');
</script>

But this only works when using the hash location strategy because otherwise the Route path is always ' '. So I ended up using the following:

<script>
  document.write('<base href="' + document.location.protocol + '//' + document.location.host + '/draft/' + '" />');
</script>

Upvotes: 1

Related Questions