Ответ 1

вы должны использовать:

• ROUTER_BINDINGS в вашем бутстрапе.
• в вашем index.html.
• если возможно, используйте состояние i.e как "сотрудники" в capizeize i.r как "Employees". (в alpha 42 я решаю одну проблему таким образом).

Надеюсь, это поможет вам.

- ОБНОВЛЕНИЕ -

после повтора альфа41:

• ROUTER_BINDINGS изменен с помощью ROUTER_PROVIDERS.
• Псевдонимы маршрутизатора должны быть в режиме верблюда.
• для Router-outler и router-link вам просто нужно импортировать ROUTER_DIRECTIVES в ваше свойство директивы в аннотации компонентов.
• Router-link ожидает, что значение будет массивом имен маршрутов. для получения дополнительной информации. см. здесь.

для получения дополнительной информации о маршрутизации вы можете обратиться к этому учебнику здесь.

--- Update2 ---

• Теперь (из альфа-49) маршрутизатор экспортируется как ng.router.

• (Согласно альфа-47 все крючки жизненного цикла переименованы в.)

  onActivate, onReuse, onDeactivate, canReuse, canDeactivate

  To: -

  routerOnActivate, routerOnReuse, routerOnDeactivate, routerCanReuse, routerCanDeactivate

--- Update3 ---

• Router-link изменен на routerLink

• и свойство routeeconfig изменено на:

  {path: '/abc', component: ABC, as: 'abc'} чтобы: {path: '/xyz' , component: XYZ, name: 'xyz'}

- Обновление 4 -

ОБНОВЛЕНИЕ К ANGULAR2 RC

Есть много изменений в маршрутизации в ANGULAR2 после того, как RC некоторые из них указывают, что я упомянул здесь, может помочь кому-то: -

• angular2/router был изменен с помощью @angular/router (также вы можете использовать старые функции маршрутизации с использованием импорта @angular/router-deprecated, но на данный момент мы должны использовать @angular/router).

• @RouteConfig был изменен с помощью @Routes.

например: -

@Routes([
  {path: '/crisis-center', component: CrisisListComponent},
  {path: '/heroes',        component: HeroListComponent}
])

Ответ 2

2.0.0-alpha.36 (2015-08-31)

• routerInjectables было переименовано в ROUTER_BINDINGS

2.0.0-alpha.41 (2015-10-13)

• ROUTER_BINDINGS был переименован в ROUTER_PROVIDERS

ИСПОЛЬЗОВАТЬ ROUTER_PROVIDERS

ROUTER_PROVIDERS используется для упрощения начальной загрузки маршрутизатора.

Он включает в себя:

• RouterRegistry - сбор зарегистрированных маршрутов
• LocationStrategy = PathLocationStrategy - соответствие по пути

ROUTER_PROVIDERS предоставляет "нормальные" значения по умолчанию и должен использоваться, если вам не нужен другой маршрут LocationStrategy.

Изменить:

bootstrap(DashboardAppComponent);

To:

bootstrap(DashboardAppComponent, [
  ROUTER_PROVIDERS
]);

Источники:

• angular/commit/ccfadb9
• angular/pr#4654

2.0.0-alpha.38 (2015-10-03)

Атрибуты маршрута должны быть CamelCase (технически PascalCase)

Примечание: это уже упоминалось в ответе Пардипа под № 3

Если вы хотите включить ссылку на маршрут в своем шаблоне через router-link, вы должны убедиться, что псевдоним (т.е. свойство name) маршрута - PascalCase.

Если вы используете план использования router-link, измените маршрут на:

{ path: '/employees', component: EmployeesComponent, name: 'Employees'}

Затем вы можете добавить ссылку в свой шаблон с помощью:

<a [router-link]="['/Employees']">Employees Link</a>

RouterLink динамически вставляет href, который соответствует пути маршрута.

Примечание. При чтении проблемы /pr это изменение было сделано для того, чтобы пользователи не путали привязку <route-link> с URL-адресом маршрута

Источники:

• https://groups.google.com/d/msg/angular/IF3_UCJt340/6AgSF76XAwAJ
• angular/issues # 4318
• angular/pr # 4643

Совет:

Если вы хотите упростить директивы просмотра, используйте ROUTER_DIRECTIVES

Он включает в себя:

• RouterLink
• RouterOutlet

Update:

В ближайшем будущем RouterOutlet/<router-outlet> будет переименован в RouterViewport/<router-viewport>

Источник:

• angular/issues # 4679

Обновление 2:

• Свойство RouteConfig as было переименовано в name

Источник:

• angular/commit/7d83959

Ответ 3

Ответ на 23 декабря 2016 года (Angular v2.4.1, Router v3.4.1 - должен работать для любого NG v2.x.x + Router v3.x.x)

Я просто перенес три из наших приложений из семплы Webpack Starter Seed в Angular CLI (v1.0.0-beta.24) и ударил эту проблему.

Требуется только небольшая часть того, что на странице NG 2 массивная страница документа-маршрутизатора:

Файл app-routing.module.ts (обычно в src/app/folder), похожий на этот образец:

import { NgModule }              from '@angular/core';
import { RouterModule, Routes }  from '@angular/router';

const appRoutes: Routes = [
  { path: '', component: YourHomePageComponent },
  { path: 'next-page',   component: NextComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

Импортировать AppRoutingModule в основной модуль (обычно src/app/app.module.ts):

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule  // <--- The import you need to add
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Убедитесь, что у вас есть <router-outlet></router-outlet> где-то в главном html (часто src/app/app.component.html), так как здесь вводится содержимое маршрутизатора.

Ответ 4

Убедитесь, что маршрутизатор определен и указан в AppModule. Пример (смотрите везде, где указана маршрутизация, игнорируйте остальные):

app.routing.ts

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HeroesComponent }      from './heroes.component';
import {DashboardComponent} from './dashboard.component';
import {HeroDetailComponent} from './hero-detail.component';

const appRoutes: Routes = [
  {
    path: 'heroes',
    component: HeroesComponent
  },
  {
  path: 'dashboard',
  component: DashboardComponent
},
{
  path: '',
  redirectTo: '/dashboard',
  pathMatch: 'full'
},
{
  path: 'detail/:id',
  component: HeroDetailComponent
},
];

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

и app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';

// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';


import { AppComponent }         from './app.component';
import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { HeroService }          from './hero.service';
import { routing }              from './app.routing';
import './rxjs-extensions';
import {HeroSearchComponent} from './hero-search.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,

    routing
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroDetailComponent,
    HeroesComponent,
    HeroSearchComponent
  ],
  providers: [
    HeroService,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

Ответ 5

Это может спасти кого-то час:

Вы получаете эту ошибку, если даже не используете маршрутизацию (например, временную, возможно, вы не импортируете конфигурацию маршрутизации, а маршрутизатор-выход закомментирован), но вы используете Router или ActivatedRoute в некоторых конструкторах компонентов через инъекцию зависимости, вот так:

@Component({...}})
export class SomeComponent {
constructor(private _router: Router, private _route: ActivatedRoute) {
//may be you are not using _route/_route at the moment at all!
}
...
}

Ответ 6

Вы не можете использовать Injection для зависимостей для Router, если вы не определяете какие-либо маршруты! Чтобы определить пользователя маршрута, что-то похожее на следующие коды:

const loginRoutes: Routes = [
    {path: 'foo/bar/baz', component: 'MyRootComponent'}
];

@NgModule({
    imports:      [
        BrowserModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        RouterModule.forRoot(loginRoutes)
    ],
    providers:    [],
    declarations: [
        MyLoginComponent
    ],
    bootstrap:    [
        MyLoginComponent
    ]
})

export class MyLoginModule
{
}