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