Угловое 2 Маршрутизатор Прямой доступ к URL

Question

У меня есть main.component.ts код:
Его расположение: 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){} 
} 

Тогда у меня type.component.ts код:
Его расположение: 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) {} 
    } 

Когда я нажимаю ссылку «Тип» в своем основном приложении, мне требуется root/type, и он загружает компонент типа. Однако, если я нажму reload, это даст мне ошибку Not Found.

Как это сделать, чтобы я мог напрямую обращаться к компонентам через URL-адрес?

Answer 1

Вам необходимо настроить сервер для обслуживания основного файла (обычно index.html), когда он не может найти запрошенный url. В зависимости от того, какой сервер вы используете, может быть .htaccess файл, промежуточное программное обеспечение, конфигурация маршрутизации и т. Д. Есть много похожих вопросов по SO, попробуйте найти ответ для вашего конкретного случая ...

Answer 2

Я использовал HashLocationStrategy, чтобы исправить его ,

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

В 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}) 
]); 

Тогда будет корень/#/тип он принимает меня к моему типу компонента.