logo标签列表

Angular 2 RC 5路由器

angulartypescriptangular2-routing
3

主要问题在于我的AuthService（我将其注入到AppComponent中）注入了Router，而这个Router是提供给已加载的模块的，这导致出现了错误。我将它从Auth Service中删除，并将其留在AppComponent中，因此至少会先加载一个组件。

我目前正在尝试弄清楚新版本的Angular工作原理。

我遇到了以下错误：

在注入Router之前需要至少引导一个组件。

我的app.module看起来像这样：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {HttpModule} from '@angular/http';
import {routing, APP_ROUTER_PROVIDERS, children } from './app.routes';

import {appStateProvider} from './providers/AppStateProvider'
// Import configured routes
import {AuthGuard} from './services/auth.guard'
import {AuthService} from './services/auth.service';
import {AppComponent } from './app.component';
import {LoginComponent} from './components/login.component'
import {HomeComponent} from './components/home.component'


    @NgModule({
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing,
        children

      ],
       providers: [
        appStateProvider, 
        APP_ROUTER_PROVIDERS,
        AuthService,
        InsaService
      ],
      declarations: [
        AppComponent,
        LoginComponent,
        HomeComponent,
        NewsComponent
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

main.ts文件：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import 'rxjs/Rx';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

和应用程序组件：

import {Component, OnInit, OnDestroy} from '@angular/core'
import { Router,Routes,
         NavigationExtras, ROUTER_DIRECTIVES } from '@angular/router';
import {Http} from '@angular/http';
import {AuthService} from  './services/auth.service'

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html',
})


export class AppComponent implements OnInit, OnDestroy {

  private authenticated: boolean = false;
  private loginSubscriber;

  constructor(private _appStateProvider: appStateProvider, private _authService: AuthService, private _insaService: InsaService, private _router:Router) {
    console.log("AppComponent logged")
    if (this._authService.isLoggedIn()) {
      this._router.navigate(['/home']);
    }
    else {
      this._router.navigate(['/login']);
    }
  }

  ngOnInit() {
    this.loginSubscriber = this._authService.LoggedInStatusChangedEmitter.subscribe(
      (loggedin) => {
        this.authenticated = loggedin.value;
      }
    );
  }

  logout(sender: any) {
    this._authService.logout();
  }

  ngOnDestroy(){
    this.loginSubscriber.unsubscribe();
  }
}

我将应用程序更新到RC5，并按照文档进行操作，但不知道是什么原因导致了错误。

我认为问题出在AuthGuard中，你在那里注入了Router。我也遇到了同样的问题。你找到了解决方法吗？ - danieleds
嗨！我更新了我的答案，请查看 :) - Yuniku_123
没有清楚地理解你的答案，能否请你再澄清一下你的解决方案？ - Sandeep
5个回答
1
我在从RC4升级到RC5后遇到了同样的问题。这是由于在路由提供程序数组中包含组件所致。
export const appRoutingProviders: any[] = [
    SomeComponent <-- don't do this!  
];

export const appRouterModule = RouterModule.forRoot(appRoutes);
0

我曾经遇到过类似的错误，问题出在将路由器注入到某些现有组件的构造函数中，移除注入后错误消失了。尝试跟踪控制台中显示的堆栈跟踪，看看能否确定是哪个组件引起了问题。在我的情况下，这个错误发生在一个服务提供者实例化时，该服务提供者将路由器注入到构造函数中。

1
如果您确实需要那种注入呢？ - danieleds
我的服务在构造函数中注入了路由器，这导致了错误。在其他组件中注入路由器不会导致错误，因为自那时起，AppCpmponent已经启动。 :) - Yuniku_123
0
0

我认为你的app.module.ts文件存在一些问题。如果你采用了appRoutingProviders而不是APP_ROUTER_PROVIDERS，我认为这可能是原因所在。

import { AppComponent }  from './app.component';
import { routing, appRoutingProviders } from './app.routes';

@NgModule({
  imports: [ BrowserModule, routing ],
  declarations: [ AppComponent, homeComponent, /* etc... */ ],
  providers: [
    appRoutingProviders // <- this is what you were missing
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
不好意思，我忘记分享我的 app.routes.ts 文件了。它使用以下代码：export const APP_ROUTER_PROVIDERS: any[] = [ AuthGuard ];export const routing = RouterModule.forRoot(routes); - Yuniku_123
哦，我明白了...那就忽略它吧。我发现另一个区别（不确定是否重要），在NgModule中，示例通常将declarations放在providers之上，你试过这样做吗？ - George Edwards
不，不是这样的。我对Angular团队在A2的RC版本中所做的所有重大更改感到非常恼火:( - Yuniku_123
是的，这真的很烦人。抱歉 - 我不知道还能提出什么建议。我目前在一个项目中使用RC5，而v3路由器（RC1）运行良好。 - George Edwards
0

不确定这是否有帮助，但您可以尝试以下方法。

app.module

import { NgModule, ApplicationRef } from '@angular/core';
import { BrowserModule } from "@angular/platform-browser";
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { appRouterProviders } from "./app.routes";

import { AppComponent } from "./app.component";
import { HeaderComponent } from "./header.component";
import { SidenavComponent } from './sidenav.component';
import { FooterComponent } from './footer.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule
    ],
    declarations: [
        AppComponent,
        HeaderComponent,
        FooterComponent,
        SidenavComponent           
    ],
    bootstrap: [AppComponent],
    providers: [appRouterProviders]
})

export class AppModule {
    constructor(private _appRef: ApplicationRef) { }

    ngDoBootstrap() {
        this._appRef.bootstrap(AppComponent);
    }
}

app.routes.ts

import { provideRouter, Routes } from '@angular/router';

import { MyComponent } from "./my.component";

export const routes: Routes = [
    {
        path: '',
        redirectTo: '/my',
        pathMatch: 'full'
    },
    {
        path: 'my',
        component: MyComponent
    }
];

export const appRouterProviders = provideRouter(routes);

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);
为什么我们需要从 path:'' 重定向到其他地方？我们如何让 path: '' 使用组件 AppComponent？ - Kosmonaft
类似这样的代码： { path: '', redirectTo: '/app', pathMatch: 'full' }, { path: 'app', component: AppComponent } - KdProgramming
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接