ANGULAR2路线未自举

Question

新的路由器（3.0.0）提供了provideRouter函数，该函数采用类型为RouterConfig的数组参数。

官方开发人员指南通过引导const提供了一个教程。 例：

export const APP_ROUTER_PROVIDERS = [ provideRouter(routes) ];

我只想将其作为一个class进行引导

--> client.ts引导文件

...
import {APP_ROUTER} from './app/app.routes';
...

bootstrap(AppComponent, [HTTP_PROVIDERS, APP_ROUTER, ...]);

--> app.route.ts路由文件

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

@Injectable()
export class APP_ROUTER {

  constructor(
    RouterConfig: RouterConfig

  ) {   
    this.ROUTE_prov = [provideRouter(this.prov)];

  }
    public ROUTE_prov;
    public prov : RouterConfig = [
    { path: '/', component: HomePageComponent },
    { path: 'home', component: HomePageComponent },
    { path: 'about', component: AboutPageComponent },
    { path: 'landing', component: LandingPageComponent },
    { path: 'pp/:nickName', component: PersonalPageComponent },
    { path: 'carlos', component: CarlosPageComponent },
    { path: '**', redirectTo: 'home' }
    ];
}

我收到此错误...路由未加载：

Answer 1

路由器配置

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


export const APP_ROUTES : RouterConfig = [
    {path: '', component: AppComponent},
    // more paths
];

export const APP_ROUTE_PROVIDERS = [
    provideRouter(APP_ROUTES)  
];

主要

bootstrap(AppComponent, [HTTP_PROVIDERS, APP_ROUTER_PROVIDERS, ...]);

Answer 2

按照您的评论尝试：

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

@Injectable()
export class APP_ROUTER {

  constructor(
  ) {   
    this.ROUTE_prov = [provideRouter(this.prov)];

  }
    public ROUTE_prov;
    public prov : RouterConfig = [
    { path: '/', component: HomePageComponent },
    { path: 'home', component: HomePageComponent },
    { path: 'about', component: AboutPageComponent },
    { path: 'landing', component: LandingPageComponent },
    { path: 'pp/:nickName', component: PersonalPageComponent },
    { path: 'carlos', component: CarlosPageComponent },
    { path: '**', redirectTo: 'home' }
    ];
}

然后在您的main.ts中：

bootstrap(AppComponent, [HTTP_PROVIDERS, RouterConfig, APP_ROUTER, ...]);