angular2 (2.0.0-beta.3) маршрутизация по URL-адресу не работает

В настоящее время я играю с маршрутизацией angular2. Все работает, как и ожидалось, но ввод URL-адреса маршрута вручную в браузере не работает.

Текущий код, который я использую

app.ts

    import {Component} from 'angular2/core';
    import {Route,RouteConfig,ROUTER_DIRECTIVES,ROUTER_PROVIDERS} from "angular2/router";
import {DashboardComponent} from "./dashboard/dashboard.component";
import {UsersComponent} from "./user/users.component";


    @Component({
        selector:'app',
        template:`
        <h1>{{title}}</h1>
        <nav>
          <a [routerLink]="['Dashboard']">Dashboard</a>
          <a [routerLink]="['Users']">Users</a>
        </nav>
        <router-outlet></router-outlet>
        `,
        directives:[ROUTER_DIRECTIVES],
        providers:[ROUTER_PROVIDERS]
    })


    @RouteConfig([
        new Route({
            path:'/dashboard',
            component:DashboardComponent,
            name:'Dashboard',
            useAsDefault:true
        }),
        new Route({
            path:'/users',
            component:UsersComponent,
            name:'Users'

        })

    ])
    export class App{

    }

boot.ts

    import {bootstrap} from 'angular2/platform/browser';
import {App} from "./app";
import {HashLocationStrategy} from "angular2/router";
import {LocationStrategy} from "angular2/router";
import {ROUTER_PROVIDERS} from "angular2/router";
import {provide} from "angular2/core";


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

Маршрутизация с использованием тегов привязки работает отлично, но когда я вручную ввожу тот же URL-адрес (http://localhost:3000/users или http://localhost:3000/dashboard) в браузере и нажмите Enter. это говорит

Cannot GET /users   

or 

Cannot GET /dashboard 

Пожалуйста, предложите мне, как я могу обнаружить изменения URL-адреса местоположения браузера, чтобы они соответствовали сегменту пути (/users или /dashboard), активировать соответствующий компонент (или UsersComponent или DashboardComponent) и отобразить его представление.


person Jorin    schedule 13.02.2016    source источник
comment
Возможный дубликат маршрутизатора Angular 2.0, не работающего при перезагрузке браузера   -  person Günter Zöchbauer    schedule 13.02.2016
comment
Мой вопрос не в том (маршрутизатор Angular 2.0 не работает при перезагрузке браузера), а в том, что (после определения углового маршрута он не работает путем прямого ввода в браузере, хотя он работает с тегом привязки)   -  person Jorin    schedule 13.02.2016
comment
оба вопроса одинаковы @Jorin   -  person Pardeep Jain    schedule 13.02.2016
comment
К вашему обновлению. URL-адрес недействителен при использовании HashLocationStrategy. Вот что такое HashLocationStrategy и PathLocationStrategy по умолчанию, они работают с разными шаблонами URL, чтобы указывать на маршруты.   -  person Günter Zöchbauer    schedule 13.02.2016
comment
Вы установили ‹base href=/›?   -  person hahn    schedule 13.02.2016
comment
Перезагрузка @pardeep происходит только после его загрузки ..... Я спрашиваю, он не загружается, все вы рассказываете все о перезагрузке, которая не работает просто на HTML5 и требует некоторого сопоставления маршрутов на сервере с index.html ... LoL   -  person Jorin    schedule 13.02.2016
comment
@hahn да, я установил ‹base href=/›   -  person Jorin    schedule 13.02.2016
comment
@GünterZöchbauer означает, что мне пришлось использовать PathLocationStrategy для работы с моим типом URL-адреса localhost:3000/dashboard, также я пытался изменить URL-адрес localhost:3000/#/dashboard для моего выше обновленного кода, но он также не работает   -  person Jorin    schedule 13.02.2016
comment
Да, и если вы используете PathLocationStrategy, вам нужно использовать сервер, который его поддерживает. Я не знаю, является ли http://localhost:3000/#/dashboard допустимым маршрутом для HashLocationStrategy. Загрузите свой index.html и перейдите к рассматриваемому маршруту, а затем проверьте, какой URL создает Angular.   -  person Günter Zöchbauer    schedule 13.02.2016
comment
@GünterZöchbauer спасибо..... Наконец-то я решил это: P   -  person Jorin    schedule 13.02.2016
comment
Интересно было бы узнать как?   -  person Günter Zöchbauer    schedule 13.02.2016
comment
Просто переместив HashLocationStrategy из boot.ts в app.ts   -  person Jorin    schedule 13.02.2016
comment
см. stackoverflow.com/a/41030337/1090745, чтобы узнать, как использовать HashLocationStrategy.   -  person felipecrp    schedule 08.12.2016


Ответы (2)


Это нормально, поскольку по умолчанию для маршрутизации с Angular2 используется история HTML5. Вам нужна конфигурация сервера для перенаправления всех ваших маршрутов в файл записи HTML.

Вы можете взглянуть на этот ответ:

person Thierry Templier    schedule 13.02.2016
comment
эй, Тьерри Темплиер, спасибо за ваш ответ ... Я перешел по предоставленной вами ссылке и изменил boot.ts, как показано ниже: `import {bootstrap} from 'angular2/platform/browser'; импортировать {App} из ./app; импортировать {HashLocationStrategy} из angular2/router; импортировать {LocationStrategy} из angular2/router; импортировать {ROUTER_PROVIDERS} из angular2/router; импортировать {предоставить} из angular2/core; bootstrap(App, [ROUTER_PROVIDERS, Provide(LocationStrategy, {useClass: HashLocationStrategy}) ]);` Но мне это не помогло - person Jorin; 13.02.2016

Наконец я нахожу решение. Решение заключалось в использовании HashLocationStrategy, как показано ниже.

app.ts

 import {Component} from 'angular2/core';
    import {Route,RouteConfig,ROUTER_DIRECTIVES,ROUTER_PROVIDERS} from "angular2/router";
import {HashLocationStrategy} from "angular2/router";
import {LocationStrategy} from "angular2/router";
import {provide} from "angular2/core";

import {DashboardComponent} from "./dashboard/dashboard.component";
import {UsersComponent} from "./user/users.component";


    @Component({
        selector:'app',
        template:`
        <h1>{{title}}</h1>
        <nav>
          <a [routerLink]="['Dashboard']">Dashboard</a>
          <a [routerLink]="['Users']">Users</a>
        </nav>
        <router-outlet></router-outlet>
        `,
        directives:[ROUTER_DIRECTIVES],
    providers:[HeroService,ROUTER_PROVIDERS,provide(LocationStrategy, {useClass: HashLocationStrategy})]
    })


    @RouteConfig([
        new Route({
            path:'/dashboard',
            component:DashboardComponent,
            name:'Dashboard',
            useAsDefault:true
        }),
        new Route({
            path:'/users',
            component:UsersComponent,
            name:'Users'

        })

    ])
    export class App{

    }

boot.ts

import {bootstrap} from 'angular2/platform/browser';
import {App} from "./app";
bootstrap(App);

Спасибо

person Jorin    schedule 13.02.2016