it-swarm.com.de

Angular 2 RC5 & @ angle/router 3.0.0-rc.1 Ungültige Konfiguration oder ein Fehler?

In diesem Fall tritt dieses Problem bei der Verwendung von RC5 von Angular 2 und dem neuesten Router auf.

Meine Datei routes.ts lautet:

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

Und meine app.module.ts-Datei (bootstrap) lautet wie folgt:

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 {

}

Und zum Schluss ist meine Eingabedatei (main.ts) so:

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

Wenn ich also ng-serve (es ist ein eckiges cli mit webpack-Projekt) ausgeführt habe, erhalte ich diesen Fehler in der Konsole:

AUSNAHME: Fehler: Ungültige Konfiguration der Route '': Es muss eine der folgenden Optionen angegeben werden (Komponente oder WeiterleitungTo oder untergeordnete Objekte oder loadChildren)

UPDATE CODE UND NEUE FEHLER

Nicht erfasst Unerwarteter Wert 'undefined' wurde vom Modul 'AppModule' deklariert

NEUESTES UPDATE

Es scheint, dass es ein Problem mit den Fässern gibt. Wenn ich die Komponenten in app.module importiere, umgehen Sie diesen Fehler, geben aber einen anderen an:

uri.match ist keine Funktion

Ich habe natürlich versucht, das pathMatch-Attribut in Routen einzufügen, aber es ändert sich nichts.

15
Vassilis Pits

Mein Problem war immerhin ziemlich einfach (versuchte so viele Stunden).

Lösung: Importieren Sie keine Komponenten aus Fässern Importieren Sie sie direkt aus ihren Ordnern.

Das hat mein Problem gelöst.

Aktualisieren:

Auch bei dem undefined-Fehler bestand das Problem darin, dass nicht alle meine Komponenten in der imports des app.module deklariert waren.

14
Vassilis Pits

Ihre Importe für AppModule enthalten RoutingModule-Deklarationen. Es ist auch nicht notwendig, CommonModule zu importieren, da es bereits vom BrowserModule exportiert wird. 

Versuchen Sie, Ihre Importe zu ändern von: 

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

Zu diesem: 

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

Wenn Sie noch immer dieses Problem haben, wird dieser Fehler ausgelöst, wenn Sie eine Route für eine Komponente definieren und dann Ihre Komponente unten auf der Seite definieren.

Grundsätzlich bedeutet dieser Fehler, dass die bereitgestellte Komponente für die Route undefiniert ist.

Bewegen Sie die Komponentenklasse vor den Routen. Wenn Sie sie importieren, stellen Sie sicher, dass sie korrekt importiert wurde.

1
Milad

Ich glaube, dein Casting ist falsch. Sie müssen Routen importieren.

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

Und anstatt eine RouterConfig zu erstellen, 

const routes: RouterConfig = []

Verwenden Sie stattdessen Routen.

const appRoutes: Routes = []

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

0
mrdav30

Sie müssen diese nicht importieren 

provideRouter, RouterConfig

noch diesen Code erforderlich

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

und

appRouterProviders,

Ändern Sie stattdessen die Art der Routen in Routen, die zum Importieren erforderlich sind

das ist es.

0
Muhammad Kamran