Question

我正在将角度路由器组件从弃用的beta迁移到V3 alpa 0.7。

我已将main.ts设置如下

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {AppComponent} from './component/app.component';
import {HTTP_PROVIDERS} from '@angular/http';
import {HttpService} from '../common/service/http.service';
import {enableProdMode} from '@angular/core';
import {disableDeprecatedForms, provideForms} from '@angular/forms';
import {APP_ROUTER_PROVIDERS} from '../routes/auth.routes';

enableProdMode();

bootstrap(AppComponent,[
APP_ROUTER_PROVIDERS,
HTTP_PROVIDERS,
HttpService,
disableDeprecatedForms(),
provideForms()
]).catch(err => console.error(err));

auth.routes.ts如下

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

//Import components
import {LoginComponent} from '../auth/component/login.component';
import {LogoutComponent} from '../auth/component/logout.component';
import {RegisterComponent} from '../auth/component/register.component';
import {ForgotpasswordComponent} from '../auth/component   /forgotpass.component';
import {ResetpasswordComponent} from '../auth/component/resetpass.component';

export const routes: RouterConfig = [
{path:'user', redirectTo: '/user/login', terminal: true},
{path:'user/login', component: LoginComponent},
{path:'user/logout', component: LogoutComponent},
{path:'user/register', component: RegisterComponent},
{path:'user/register/admin', component: RegisterComponent},
{path:'user/register/librarytrial', component: RegisterComponent},
{path:'user/forgotpass', component: ForgotpasswordComponent},
{path:'user/forgotpass/:reset_code', component: ResetpasswordComponent}
];

export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];

这应该有效但由于某种原因它会产生以下异常：

platform-browser.umd.js:2311 Error: Uncaught (in promise): No provider for Router!
at l (zone.min.js:1)
at zone.min.js:1
at e.invoke (zone.min.js:1)
at Object.onInvoke (core.umd.js:9004)
at e.invoke (zone.min.js:1)
at e.run (zone.min.js:1)
at zone.min.js:1
at e.invokeTask (zone.min.js:1)
at Object.onInvokeTask (core.umd.js:8995)
at e.invokeTask (zone.min.js:1)

网络调用显示，当我输入路径user时，它会将我带到登录组件，但在加载带有上述错误的模板后会失败。

以下是登录组件的简短版本

import {Component, OnInit, Input} from '@angular/core';
import {FormBuilder,Validators,FormControl,FormGroup,REACTIVE_FORM_DIRECTIVES} from '@angular/forms';
import {ROUTER_DIRECTIVES, Router, ActivatedRoute} from '@angular/router';
import {ConfigService} from '../../common/service/config.service';
import {AuthService} from '../service/auth.service';

import {Growl} from 'primeng/primeng';
import {Message} from 'primeng/primeng';

@Component({
    selector: 'login',
    templateUrl: ConfigService.BASE_URL+'app/auth/views/login.ejs',
    directives: [ROUTER_DIRECTIVES,REACTIVE_FORM_DIRECTIVES,Growl],
    providers:[AuthService,FormBuilder]
})

export class LoginComponent implements OnInit{

...

constructor(private _form_builder: FormBuilder, private _auth_service:AuthService, private _router:Router,private _route:ActivatedRoute){

    ...
}

ngOnInit(){

    this._route.params.subscribe(params=>{

        this.redirect_to = params['redirect_to'];

    });

}

}

我还验证了主要组件中存在router-outlet。我错过了什么？

Answer 1

我在最近的迁移过程中遇到此错误的一个原因是组件仍在导入@ angular / router-deprecated。检查您的应用程序组件或嵌入了登录名的任何其他组件是否正在调用路由器弃用，如果是，请替换为@ angular / router。

Angular 2路由器V3：没有提供程序异常

1 个答案: