angular routing - navigate - Obtención de error Angular2 ''No hay proveedor para Router!(RouterOutlet-> Router) ''

router.navigate angular 5

Question

Utilizo Angular2 alpha39 y Babel para transpilar el archivo ES6 JS. No estoy usando mecanografiado.

He creado un componente que se muestra correctamente. He añadido una salida de enrutador a la plantilla. Cuando ejecuto la aplicación, aparece el mensaje de error:

No hay proveedor para Router! (RouterOutlet -> Router)

La pila de llamadas es:

Aquí está el fragmento de código:

modelo:

.... // Removed for brevity
<div class="contenttext">
<router-outlet></router-outlet>
</div>
.... // Removed for brevity

Archivo componente:

import { Component, View, bootstrap, OnInit } from ''angular2/angular2'';
import { RouteConfig, RouterOutlet, RouterLink } from ''angular2/router'';
import ''reflect-metadata'';
import ''winjs'';
@Component({
selector: ''dashboard-app''
})
@View({
templateUrl: ''../js/dashboard.html'',
directives: [ ContentComponent, FamiliesComponent, RouterOutlet, RouterLink ]
})
@RouteConfig([
{ path: ''/employees'', component: EmployeesComponent, as: ''employees''}
])
class DashboardAppComponent implements OnInit {
constructor() {
}
onInit() {
WinJS.UI.processAll().done(function() {
var splitView = document.querySelector(".splitView").winControl;
new WinJS.UI._WinKeyboard(splitView.paneElement);
})
}
}
bootstrap(DashboardAppComponent);

Answer 1

¡No puede la inyección de dependencia del usuario para el Router si no define ninguna ruta! Para definir el usuario de la ruta algo similar a los siguientes códigos:

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
{
}

Answer 2

Asegúrese de tener el enrutador definido y declarado en AppModule. Ejemplo (mire en todas partes donde se menciona el enrutamiento, ignore el resto):

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);

y 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 {
}

Answer 3

Esto puede ahorrarle a alguien una hora:

Recibirá este error si ni siquiera utiliza el enrutamiento (por ejemplo, temporal, tal vez no importe la configuración de enrutamiento y el enrutador-salida esté comentado) PERO está utilizando Enrutador o ActivatedRoute en algún constructor de componentes a través de la inyección de dependencia, como este :

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

Answer 4

Responda el 23 de diciembre de 2016 (Angular v2.4.1, Router v3.4.1 - debería funcionar para cualquier NG v2.xx + Router v3.xx)

Acabo de migrar tres de nuestras aplicaciones de Webpack Starter Seed a Angular CLI (v1.0.0-beta.24) y resolví este problema.

Solo se requiere una pequeña fracción de lo que está en la página de documentos de enrutador masivo NG 2:

Un archivo app-routing.module.ts (normalmente en src / app / folder) que se parece a este ejemplo:

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 {}

Importe AppRoutingModule en su módulo principal (normalmente 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 { }

Asegúrese de tener <router-outlet></router-outlet> en algún lugar de su html principal (a menudo src / app / app.component.html) ya que es donde se inyecta el contenido del enrutador.

Answer 5

tienes que usar

1. ROUTER_BINDINGS en tu bootstrap.
2. en su index.html.
3. si es posible, use el estado, es decir, como "empleados" en mayúsculas o como "Empleados" (en alfa 42 he resuelto un problema de esta manera).

Espero que esto seguramente te ayude.

--ACTUALIZAR--

después de la versión de alpha41:

1. ROUTER_BINDINGS se ha cambiado con ROUTER_PROVIDERS .
2. Los alias de enrutador deben estar en la forma de caja de camello.
3. para Router-Outler y Router-Link, solo tiene que importar ROUTER_DIRECTIVES en la propiedad de sus directivas en la anotación del componente.
4. Router-link espera que el valor sea una matriz de nombres de ruta. para más información. referirse here

Para obtener más información sobre el enrutamiento, puede consultar este tutorial here .

--- Update2 ---

1. Ahora (a partir del alpha-49) el enrutador se exporta como ng.router.

2. (De acuerdo con alfa-47, todos los ganchos del ciclo de vida se renombran como

   onActivate, onReuse, onDeactivate, canReuse, canDeactivate

   A :--

   routerOnActivate, routerOnReuse, routerOnDeactivate, routerCanReuse, routerCanDeactivate

--- Update3 ---

1. router-link se cambia a routerLink

2. y la propiedad routeconfig cambió a:

   {path: ''/abc'', component: ABC, as: ''abc''} a: {path: ''/xyz'' , component: XYZ, name: ''xyz''}

--Actualización 4 -

ACTUALIZACIÓN A ANGULAR2 RC

Se han realizado muchos cambios en el enrutamiento en angular2 después de RC, algunos de los puntos que voy a mencionar aquí pueden ayudar a alguien:

1. angular2/router ha sido cambiado con @angular/router (también puede usar la antigua funcionalidad de enrutamiento usando la importación de @angular/router-deprecated pero a partir de ahora tenemos que usar @angular/router ).

2. @RouteConfig se ha cambiado con @Routes .

por ejemplo :-

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

Answer 6

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

• routerInjectables cambió de nombre a ROUTER_BINDINGS

github.com/angular/angular/blob/master/…

• ROUTER_BINDINGS se cambió de nombre a ROUTER_PROVIDERS

USE ROUTER_PROVIDERS

ROUTER_PROVIDERS se utiliza para simplificar el arranque del enrutador.

Incluye:

• RouterRegistry - la colección de rutas registradas
• LocationStrategy = PathLocationStrategy - emparejar por ruta

ROUTER_PROVIDERS proporciona valores predeterminados ''sanos'' y debe usarse a menos que necesite una ruta diferente LocationStrategy .

Cambio:

bootstrap(DashboardAppComponent);

A:

bootstrap(DashboardAppComponent, [
ROUTER_PROVIDERS
]);

Fuentes:

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

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

Los alias de ruta deben ser CamelCase (técnicamente PascalCase)

Nota: esto ya se mencionó en la respuesta de Pardeep bajo # 3

Si desea incluir un enlace a una ruta en su plantilla a través de router-link , debe asegurarse de que el alias (es decir, la propiedad del name ) de la ruta sea PascalCase.

Si usa el plan para usar router-link modifique la ruta para:

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

Luego puedes agregar el enlace en tu plantilla con:

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

RouterLink inserta dinámicamente un href que coincide con la ruta de la ruta.

Nota: al leer el problema / pr, parece que se realizó este cambio para evitar que los usuarios confundan el <route-link> con la url de la ruta

Fuentes:

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

Propina:

Si desea simplificar sus directivas de vista use ROUTER_DIRECTIVES

Incluye:

• RouterLink
• RouterOutlet

Actualizar:

En un futuro próximo, se RouterOutlet / <router-outlet> a RouterViewport / <router-viewport>

Fuente:

• angular/issues#4679

Actualización 2:

• La propiedad RouteConfig ha sido renombrada a name

Fuente:

• angular/commit/7d83959