web-dev-qa-db-ja.com

Angular 2 RC5＆@ angular / router 3.0.0-rc.1無効な構成またはバグ？

この場合、Angular 2のRC5と最新のルーターを使用してこの問題が発生します。

私のroutes.tsファイルはこれです：

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

そして私のapp.module.tsファイル（ブートストラップ）はこれです：

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 {

}

そして最後に、私のエントリファイル（main.ts）は次のとおりです。

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

だから私がng-serveを実行しているとき（これはwebpackプロジェクトを使用したangular-cliです）、コンソールでこのエラーが発生します。

例外：エラー：ルート ''の構成が無効です：次のいずれかを指定する必要があります（コンポーネントまたはredirectToまたは子またはloadChildren）

コードの更新と新しいエラー

キャッチされていない予期しない値 'undefined'がモジュール 'AppModule'によって宣言されています

最新の更新

バレルに問題があるようです。コンポーネントをapp.moduleにインポートすると、このエラーは回避されますが、他のエラーが発生します。

uri.matchは関数ではありません

もちろん、ルートにpathMatch属性を追加しようとしましたが、何も変更されていません。

angulartypescriptwebpackangular2-routingangular-cli
16
Vassilis Pits

私の問題は結局非常に単純でした（非常に多くの時間を試してみました）。

解決策：バレルからコンポーネントをインポートしないでくださいそれらをフォルダから直接インポートします。

それで問題は解決しました。

更新：

また、undefinedエラーについては、私のコンポーネントのすべてがapp.moduleのimportsで宣言されていないことが問題でした。

13
Vassilis Pits

AppModuleのインポートにRoutingModule宣言が重複しています。また、CommonModuleはBrowserModuleによってすでにエクスポートされているため、インポートする必要はありません。

インポートを次のように変更してみてください。

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

これに：

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

まだこの問題が発生している場合は、コンポーネントのルートを定義してから、ページの下部でコンポーネントを定義すると、このエラーがスローされます。

基本的に、このエラーはルートに提供されたコンポーネントが未定義であることを意味します。

コンポーネントクラスをルートの前に移動するか、インポートする場合は、正しくインポートされていることを確認してください。

1
Milad

私はあなたのルートを間違ってキャストしていると思います。ルートをインポートする必要があります。

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

そしてRouterConfigを作成する代わりに、

const routes: RouterConfig = []

代わりにルートを使用してください。

const appRoutes: Routes = []

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

0
mrdav30

これらをインポートする必要はありません

provideRouter, RouterConfig

このコードは不要

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

そして

appRouterProviders,

代わりに、ルートのタイプをインポートに必要なルートに変更します

それでおしまい。

0
Muhammad Kamran