Я обновил наш проект от rc4 → rc5. Кажется, это работает нормально. В то же время, когда я это делаю, я также обновил наш код, используя @angular/router-deprecated
to @angular/router
.
Мое приложение состоит из 2 разделов, открытых и защищенных (общедоступные для всех пользователей, защищенные только для администраторов). Но в настоящее время я просто хочу, чтобы получить 1 маршрут работы, то я могу исправить другие страницы.
Как я уже сказал, я обновил весь код, который, я считаю, прав, и загружаются страницы, пока я не добавлю это на свою страницу [routerLink]="['Home']"
Если я добавлю это, то получаю исключение
ОРИГИНАЛЬНОЕ ИСКЛЮЧЕНИЕ: Нет провайдера для маршрутизатора!
Если я прокомментирую эту строку снова, страницы будут загружаться в порядке.
Вот некоторые из моего кода
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
но затем я получаю другое исключение, как public.component.ts
ниже.
Ошибка: не удается разрешить все параметры для маршрутизатора: (?,?,?,?,?,?,?,?)
Я, очевидно, что-то пропустил, но не знаю, что. Любая помощь приветствуется.
Просто включите его, вот угловые ссылки в моем файле package.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
...
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 везде