Angular 2 Router Directly Accessing URL

Question

I have my main.component.ts code:
Its location is: root/

import {Component, OnInit, OnChanges, IterableDiffers} from 'angular2/core';
import {TypeService} from './type/type.service';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {Router} from 'angular2/router';

@Component({
    selector: 'my-app',
    providers: [],
    directives: [ROUTER_DIRECTIVES],
    template: `
      <a [routerLink]="['Type']">Type</a>
      <router-outlet></router-outlet>
    `
})

@RouteConfig([
  {path:'/type', name: 'Type', component: TypeService}
])

export class AppComponent{
  constructor(private _router: Router){}
}

Then I have my type.component.ts code:
Its location is: root/type

import {Component, OnInit} from 'angular2/core';
import {DirectoryComponent} from '../main/main.component';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {Router} from 'angular2/router';
import {AppComponent} from '../app.component';
import {Http} from 'angular2/http';

@Component({
  selector: 'type',
  directives: [ROUTER_DIRECTIVES],
  template: `<h1>hi</h1>`
})

export class TypeService{

  constructor(
    private _router: Router) {}
  }

When I click the Type link in my main application it takes me to root/type and it loads the type component. However if I press reload it gives me a Not Found error.

How do I make it so I can access components directly via the url?

score 2 · Answer 1 · answered Feb 24 '16 at 01:43

2

You need to configure your server to serve your main file (usually index.html) when it cannot find requested url. Depending on what server you're using it could be .htaccess file, middleware, routing configuration etc. There are many similar questions on SO, try to find answer for your specific case...

answered Feb 24 '16 at 01:43

Sasxa

40,334
16
88
102

is there a thing like otherwise like in angular 1.x? – Gary Mar 07 '16 at 15:37
@Gary I'm using `{ path: '/:unknown', redirectTo: ['/Root'] }`, not sure if there's a better way... – Sasxa Mar 08 '16 at 07:00
http://stackoverflow.com/questions/34381438/equivalent-of-angular-1-otherwise-route-in-angular-2 https://github.com/angular/angular/issues/4055 Let me answer this formally. Stumbled on this issue myself. – Gary Mar 08 '16 at 17:02

score 0 · Answer 2 · answered Feb 24 '16 at 02:38

I used the HashLocationStrategy to fix it.

https://angular.io/docs/ts/latest/api/router/HashLocationStrategy-class.html

In main.ts:

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS,
  LocationStrategy,
  HashLocationStrategy} from 'angular2/router';
import {provide} from 'angular2/core';

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy})
]);

Then going to root/#/type it takes me to my type component.

Try this instead of otherwise. It works for me, not sure but seems like work in progress. `@RouteConfig([ { path: '/**', redirectTo: ['MycmpnameCmp'] }, ... } ])` https://github.com/angular/angular/issues/4055 — Gary, Mar 08 '16 at 17:03

Angular 2 Router Directly Accessing URL

2 Answers2