web-dev-qa-db-fra.com

Obtenir l'erreur Angular2 'Aucun fournisseur pour le routeur! (RouterOutlet -> Router) '

J'utilise Angular2 alpha39 et Babel pour transpiler le fichier ES6 JS. Je n'utilise pas TypeScript.

J'ai créé un composant qui s'affiche correctement. J'ai ajouté un routeur-prise au modèle. Lorsque je lance l'application, le message d'erreur suivant s'affiche:

Aucun fournisseur pour le routeur! (RouterOutlet -> Router)

La pile d'appels est:

enter image description here

Voici l'extrait de code:

modèle:

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

Fichier de composant:

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);
angular-routingangular
28
wonderful world

vous devez utiliser:

  1. ROUTER_BINDINGS dans votre bootstrap.
  2. dans votre index.html.
  3. dans la mesure du possible, indiquez "i" comme "employés" dans "i" comme "employés". (En alpha 42, j'ai résolu un problème de cette façon).

j'espère que cela va sûrement vous aider.

--MISE À JOUR--

après la relance de l'alpha41:

  1. ROUTER_BINDINGS a été changé avec ROUTER_PROVIDERS.
  2. Les alias de routeur doivent être à la manière d'une affaire de chameau.
  3. pour le routeur-routeur et le routeur-lien, il vous suffit d'importer ROUTER_DIRECTIVES dans votre propriété directives dans l'annotation du composant.
  4. Router-link s'attend à ce que la valeur soit un tableau de noms de route. pour plus d'informations. se référer ici .

pour plus d'informations sur le routage, vous pouvez vous référer à ce tutoriel ici .

--- Update2 ---

  1. Maintenant (à partir de l'alpha-49), le routeur est exporté en tant que ng.router.

  2. (Selon l'alpha-47, tous les crochets du cycle de vie ont été renommés.)

    onActivate, onReuse, onDeactivate, canReuse, canDeactivate

    À :--

    routerOnActivate, routerOnReuse, routerOnDeactivate, routerCanReuse, routerCanDeactivate

--- Mise à jour3 ---

  1. router-link est remplacé par routerLink

  2. et la propriété routeconfig modifiée en:

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

--Mise à jour 4 -

MISE À JOUR VERS ANGULAR2 RC

Il y a beaucoup de changements dans le routage dans angular2 après que RC certains des points que je vais mentionner ici peuvent aider quelqu'un: -

  1. angular2/router a été changé avec @angular/router (vous pouvez aussi utiliser l’ancienne fonctionnalité de routage en utilisant l’importation de @angular/router-deprecated mais à partir de maintenant, nous devons utiliser @angular/router).

  2. @RouteConfig a été changé avec @Routes.

par exemple :-

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

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

  • routerInjectables a été renommé en ROUTER_BINDINGS

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

  • ROUTER_BINDINGS A été renommé en ROUTER_PROVIDERS

USE ROUTER_PROVIDERS

ROUTER_PROVIDERS Est utilisé pour simplifier l'amorçage du routeur.

Il comprend:

  • RouterRegistry - la collection d'itinéraires enregistrés
  • LocationStrategy = PathLocationStrategy - correspond par chemin

ROUTER_PROVIDERS Fournit des valeurs par défaut "sane" et devrait être utilisé à moins que vous n'ayez besoin d'une autre route LocationStrategy.

Changer:

bootstrap(DashboardAppComponent);

To:

bootstrap(DashboardAppComponent, [
  ROUTER_PROVIDERS
]);

Sources:

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

Les alias de route doivent être CamelCase (techniquement PascalCase)

Remarque: cela a déjà été mentionné dans la réponse de Pardeep sous # 3

Si vous souhaitez inclure un lien vers une route dans votre modèle via router-link, Vous devez vous assurer que l'alias (c'est-à-dire la propriété name de la route) est PascalCase.

Si vous utilisez l'intention d'utiliser router-link, Modifiez l'itinéraire pour:

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

Ensuite, vous pouvez ajouter le lien dans votre modèle avec:

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

RouterLink insère dynamiquement un href correspondant au chemin de la route.

Remarque: lors de la lecture du numéro/pr, il apparaît que cette modification a été apportée pour empêcher les utilisateurs de confondre la liaison <route-link> Avec l'URL de la route

Sources:

Astuce:

Si vous voulez simplifier vos directives de vue, utilisez ROUTER_DIRECTIVES

Il comprend:

  • RouterLink
  • RouterOutlet

Mise à jour:

Dans un avenir proche, RouterOutlet/<router-outlet> Sera renommé en RouterViewport/<router-viewport>

Source:

Mise à jour 2:

  • La propriété RouteConfigas a été renommée en name.

Source:

9
Evan Plaice

Réponse le 23 décembre 2016 (Angular v2.4.1, Routeur v3.4.1 - devrait fonctionner pour tout NG v2. xx + routeur v3.xx)

Je viens de migrer trois de nos applications depuis Webpack Starter Seed vers ) une interface de ligne de commande angulaire (v1.0.0-beta.24 ) et cliquez sur ce problème.

Seule une infime fraction de ce qui se trouve sur le NG 2 page massive page doc de routeur) est requise:

Un fichier app-routing.module.ts (généralement dans src/app/folder) ressemblant à cet exemple:

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

Importez AppRoutingModule dans votre module principal (généralement 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 { }

Assurez-vous d'avoir <router-outlet></router-outlet> quelque part dans votre code HTML principal (souvent src/app/app.component.html), car c’est là que le contenu du routeur est injecté.

4
Paul Lockwood

Assurez-vous que le routeur est défini et déclaré dans AppModule. Exemple (regardez partout où le routage est mentionné, ignorez le reste):

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

et 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 {
}
3
ACV

Vous ne pouvez pas utiliser l’Injection de dépendance pour Router si vous ne définissez aucun itinéraire! Pour définir l’utilisateur de la route, quelque chose de similaire aux codes suivants:

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
{
}
1
Mostafa Lavaei

Cela peut sauver quelqu'un une heure:

Vous obtenez cette erreur si vous n'utilisez même pas le routage (par exemple temporaire, vous n'importez peut-être pas la configuration de routage et les commentaires de routeur-sortie sont commentés) MAIS vous utilisez Router ou ActivatedRoute dans un constructeur de composant via l'injection de dépendance, comme ceci :

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