Angular2更新为rc5和@angular/router - ORIGINAL异常:没有router的提供商
Angular2 updated to rc5 and @angular/router - ORIGINAL EXCEPTION: No provider for Router
我已经从rc4更新了我们的项目-> rc5。这似乎行得通。在这样做的同时,我也更新了我们的代码,从使用@angular/router-deprecated
到@angular/router
。
我的应用程序是由2部分,公共和保护(公共是为所有用户,保护只是为管理员)。但目前我只想得到1路由工作,然后我可以修复其他页面。
正如我所说,我已经更新了所有的代码,我认为这是正确的,页面加载,直到我把它添加到我的页面[routerLink]="['Home']"
如果我添加这个,然后我得到异常
ORIGINAL EXCEPTION: No provider for Router!
如果我再次注释掉这一行,所有页面都可以正常加载。
这是我的一些代码
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { AppRoutes } from './app.routes';
import { AppComponent } from './app.component';
import { PublicComponent } from './public.component';
//import { ProtectedComponent } from './protected.component';
// cms
import { HomeComponent } from './cms/home.component';
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(AppRoutes)
],
declarations: [
AppComponent,
PublicComponent,
HomeComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.routes.ts
import { PublicComponent } from './public.component';
import { ProtectedComponent } from './protected.component';
// public
import { HomeComponent } from './cms/home.component';
export const AppRoutes = [
{
path: '',
component: PublicComponent,
children: [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent
},
]
},
// {
// path: 'admin/...',
// component: ProtectedComponent
// }
];
app.component.ts
import { Component, ViewContainerRef } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router'
@Component({
selector: 'app-root',
template: '<router-outlet></router-outlet>',
directives: [ ROUTER_DIRECTIVES ]
})
export class AppComponent {
viewContainerRef: ViewContainerRef;
constructor(viewContainerRef: ViewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
}
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
public.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, ROUTER_DIRECTIVES } from '@angular/router';
import { CmsService } from './cms/cms.service';
import { ModuleService } from './module/module.service';
import { MenuItem } from './cms/models/menu-item';
import { Settings } from './cms/models/settings';
import { CollapseDirective } from 'ng2-bootstrap/components/collapse';
import { OffClickDirective } from './shared/offclick.directive';
@Component({
selector: 'public',
templateUrl: 'app/public.component.html',
directives: [ ROUTER_DIRECTIVES, CollapseDirective, OffClickDirective ],
providers: [ CmsService, ModuleService ]
})
export class PublicComponent {
menu: MenuItem[];
settings: Settings;
isCollapsed: boolean = true;
constructor(
private cmsService: CmsService,
private router: Router) {
}
}
public.component.html
<div class="navbar navbar-dark bg-inverse navbar-fixed-top" role="navigation">
<div class="container">
<a class="navbar-brand" [routerLink]="['Home']">
<span class="fa fa-home fa-2x" aria-hidden="true"></span>
<span class="sr-only">Home</span>
</a>
</div>
</div>
我尝试将Router
添加到public.component.ts
中的提供商部分,但随后我得到另一个例外,如下所示。
错误:不能解析路由器的所有参数:(?, ?, ?, ?, ?, ?, ?
?)
我显然错过了什么,但不知道是什么。如有任何帮助,不胜感激。
只是为了方便起见,这里是我包中的角引用。Json文件
"dependencies": {
"@angular/common": "^2.0.0-rc.5",
"@angular/compiler": "^2.0.0-rc.5",
"@angular/core": "^2.0.0-rc.5",
"@angular/forms": "^0.3.0",
"@angular/http": "^2.0.0-rc.5",
"@angular/platform-browser": "^2.0.0-rc.5",
"@angular/platform-browser-dynamic": "^2.0.0-rc.5",
"@angular/router": "^3.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "^2.0.0-rc.3"
}
- 从app.module.ts中删除routermodule
-
调整app.module.ts
... import { routing, appRoutingProviders } from './app.routing'; ... @NgModule({ imports: [ ... routing, ... ], ... providers: [ ... appRoutingProviders, ... ], bootstrap: [AppComponent], }) export class AppModule { }
-
调整app.routing.ts:
import { Routes, RouterModule } from '@angular/router'; import { DashboardComponent } from './dashboard/dashboard.component'; ... import { Http, HTTP_PROVIDERS } from '@angular/http'; const appRoutes: Routes = [ { path: '', redirectTo: '/dashboard', pathMatch: 'full'}, { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard]}, ... { path: '**', redirectTo: 'dashboard', pathMatch: 'full'} ]; export const appRoutingProviders: any[] = [ ... Http, HTTP_PROVIDERS ]; export const routing = RouterModule.forRoot(appRoutes);
-
删除所有的ROUTER_DIRECTIVES
相关文章:
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- this.router在AngularJS 2中未定义
- Meteor Router数据函数被调用两次
- 如何在router.get()方法中传递url作为参数
- renderReact/Rect Router+Node/Express.js的服务器端/同构渲染中未定义renderP
- 在javaservlet doPost方法中启动线程时,无法返回异常消息
- document.applet.method在Mounatin Lion上抛出safari 6+JDK7异常
- 骨干's Router.execute(callback,args,name)方法获取未定义的名称
- 有没有办法用routerLink/router.navigation附加查询/路由参数
- 为什么浏览器没有为语法错误抛出异常
- java,javascript签名的小程序(文件选择,ftp上传)安全性/套接字异常
- node.js和express中的异常处理
- 派生进程的stdout在管道传输时工作异常
- NodeJS和pg promise,捕获PostgreSQL异常
- 当显式定义控制器参数时,默认模型绑定器会发生异常
- react router router.HistoryLocation以<noscript>但没有完美的工作
- 显示引导弹出操作异常的逻辑
- 使用express.具有多个url和可选参数的Router()
- 原始异常:没有Router提供程序!角2 RC5
- Angular2更新为rc5和@angular/router - ORIGINAL异常:没有router的提供商