Question

在这种情况下，我使用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文件（bootstrap）是这样的：

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项目的角度cli）我在控制台中收到此错误：

异常：错误：路线配置无效＆＃39; ＆＃39;：必须提供以下其中一项（component或redirectTo或children或loadChildren）

更新代码和新错误

未捕获的意外值＆＃39; undefined＆＃39;由模块＆＃39; AppModule＆＃39;
声明

最新更新

桶似乎存在问题。如果我将组件导入app.module，则会绕过此错误，但会给出另一个错误：

uri.match不是函数

我当然尝试在路由中添加pathMatch属性，但没有任何变化。

Answer 1

毕竟我的问题很简单（试了很多个小时）。

解决方案： 不要从桶中导入组件 直接从文件夹中导入它们。

这解决了我的问题。

更新

关于undefined错误，问题是我的所有组件都没有在app.module的imports中声明。

Answer 2

AppModule的导入重复了RoutingModule声明。此外，无需导入CommonModule，因为它已由BrowserModule导出。

尝试更改您的导入：

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

对此：

imports: [
    BrowserModule,
    routing,
    FormsModule
 ],

Answer 3

对于仍有此问题的人，如果您为组件定义路由，然后在页面底部定义组件，则会抛出此错误。

基本上，此错误意味着路径的提供组件未定义。

因此，将组件类移到路径之前，或者如果要导入它，请确保它已正确导入。

Answer 4

我相信你的路线错了。您需要导入路由。

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

而不是创建RouterConfig，

const routes: RouterConfig = []

改为使用路线。

const appRoutes: Routes = []

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

Answer 5

您不需要导入这些

false

也不需要此代码

provideRouter, RouterConfig

和

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

而是将路由类型更改为导入所需的路由

是的。

Angular 2 RC5＆amp; @angular / router 3.0.0-rc.1配置无效或有错误？

5 个答案: