web-dev-qa-db-fra.com

Angular 2 RC5 & @ angular/router 3.0.0-rc.1 Configuration non valide ou bogue?

Dans ce cas, je rencontre ce problème en utilisant RC5 de Angular 2 et le dernier routeur.

Mon fichier routes.ts est le suivant:

import {
  provideRouter,
  Routes,
  RouterModule
}
from '@angular/router';
import {
  OverviewComponent,
  LoginComponent,
  ProfileComponent
} from './shared';
import { AuthGuard } from './auth.guard';
import { HasToken } from './common/index';

const routes: Routes = [
  {
    path: '',
    component: OverviewComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [AuthGuard]
  },
  {
    path: '**',
    redirectTo: '/login'
  }
];

export const authProviders = [AuthGuard, HasToken];

export const appRouterProviders = [
  provideRouter(routes),
  authProviders
];

export const routing = RouterModule.forRoot(routes);

Et mon fichier app.module.ts (bootstrap) est le suivant:

import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {BrowserModule} from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {appRouterProviders, routing} from './routes';
import {
  OverviewComponent,
  LoginComponent,
  ProfileComponent
} from './shared';

@NgModule({
  declarations: [
    AppComponent,
    OverviewComponent,
    LoginComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    // Router
    routing,
    // Forms
    FormsModule,
  ],
    providers: [
      appRouterProviders,
        provide(AuthHttp, {
         useFactory: (http) => {
           return new AuthHttp(new AuthConfig({
             headerName: 'Authorization',
             headerPrefix: 'Bearer',
             tokenName: 'token',
             tokenGetter: (() => localStorage.getItem('token')),
             globalHeaders: [{'Content-Type': 'application/json'}],
             noJwtError: false,
             noTokenScheme: false
           }), http);
          },
        deps: [Http]
       })
     ],      entryComponents: [AppComponent],
  bootstrap: [AppComponent]
})

export class AppModule {

}

Et enfin mon fichier d’entrée (main.ts) est le suivant:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode, provide } from '@angular/core';
import { Http } from '@angular/http';
import { AuthHttp, AuthConfig } from 'angular2-jwt';
import { AppModule, environment } from './app/';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Donc, quand je lance le ng-serve (c'est un projet angular-cli avec webpack), j'obtiens cette erreur dans la console:

EXCEPTION: erreur: configuration de route '' non valide: l'un des éléments suivants doit être fourni (composant ou redirectTo ou enfants ou loadChildren)

MISE À JOUR DU CODE ET NOUVELLE ERREUR

Uncaught Valeur inattendue 'undefined' déclarée par le module 'AppModule'

DERNIÈRE MISE À JOUR

Il semble qu'il y ait un problème avec les barils. Si j'importe les composants dans le app.module, il contourne cette erreur mais en en donne une autre:

uri.match n'est pas une fonction

J'ai bien sûr essayé d'ajouter l'attribut pathMatch dans les itinéraires mais rien ne change.

angulartypescriptwebpackangular2-routingangular-cli
15
Vassilis Pits

Mon problème était assez simple après tout (j'ai essayé tant d'heures).

Solution: N'importez pas de composants de tonneaux Importez-les directement à partir de leurs dossiers.

Cela a résolu mon problème.

Mettre à jour:

De plus, à propos de l'erreur undefined, le problème était que tous mes composants n'étaient pas déclarés dans la imports de l'app.module.

14
Vassilis Pits

Vos importations pour le module d'application ont des déclarations de routageModule en double. De plus, il n'est pas nécessaire d'importer CommonModule car il est déjà exporté par BrowserModule. 

Essayez de modifier vos importations à partir de: 

imports: [
    BrowserModule,
    CommonModule,
    // Router
    RouterModule,
    routing,
    // Forms
    FormsModule,
 ],

Pour ça: 

imports: [
    BrowserModule,
    routing,
    FormsModule
 ],
1
Fayez Mutairi

Pour tous ceux qui ont encore ce problème, si vous définissez un itinéraire pour un composant, puis définissez votre composant en bas de la page, cette erreur est générée.

Fondamentalement, cette erreur signifie que le composant fourni pour la route n'est pas défini.

Déplacez donc la classe de composants devant les routes ou, si vous les importez, assurez-vous qu’elle a été importée correctement.

1
Milad

Je crois que vous avez mal interprété vos itinéraires. Vous devez importer des itinéraires.

import { Routes,provideRouter, RouterConfig, RouterModule '@angular/router';

Et au lieu de créer un RouterConfig, 

const routes: RouterConfig = []

Utilisez des itinéraires à la place.

const appRoutes: Routes = []

https://angular.io/docs/ts/latest/guide/router.html

0
mrdav30

Vous n'avez pas besoin d'importer ces 

provideRouter, RouterConfig

ni requis ce code

export const appRouterProviders = [
  provideRouter(routes),
  authProviders
];

et

appRouterProviders,

à la place, changez le type d'itinéraires en itinéraires requis pour l'importation

c'est tout.

0
Muhammad Kamran