Angular2 обновлен до rc5 и @ angular / router - ОРИГИНАЛЬНОЕ ИСКЛЮЧЕНИЕ: нет маршрутизатора для маршрутизатора

0

Я обновил наш проект от 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"
}
Теги:
angular
routing

1 ответ

0
  1. Удалить rubermodule из app.module.ts
  2. Настроить app.module.ts

    ...
    import { routing, appRoutingProviders } from './app.routing';
    ...
    
    @NgModule({
      imports: [
        ...
        routing,
        ...
      ],
      ...
      providers: [
        ...
        appRoutingProviders,
        ...
      ],
      bootstrap: [AppComponent],
    })
    export class AppModule { }
    
  3. Отрегулируйте 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);
    
  4. Удалите ROUTER_DIRECTIVES везде

Ещё вопросы

Сообщество Overcoder
Наверх
Меню