Angular-CLI 'ng build --prod' 失败 错误中的错误：无法解析 RoutesListingService 的所有参数

Question

我有一个 @angular-cli 应用程序，我可以成功执行“ng build”，但是当我尝试“ng build --prod”时，它无法创建分发。我收到此错误：

ERROR in Error: Can't resolve all parameters for RoutesListingService in C:dev/src/app/core/routes.service.ts: (?).
    at syntaxError (C:dev\node_modules\@angular\compiler\bundles\compiler.umd.js:1729:34)

有谁知道为什么会发生这种情况或对如何解决这个问题有任何建议？

RouteListing 服务用于帮助编译应用程序路由集合以用于 sibebar 导航菜单。 我使用的软件版本如下：

@angular/cli: 1.4.9
node: 8.7.0
os: win32 x64
@angular/animations: 4.4.6
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.5.3

文件：angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "dev"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "deployUrl": "https://10.10.10.10/dev/app/",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "./assets/styles/salesforce-lightning-design-system.min.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "class": {
      "spec": false
    },
    "component": {
    }
  },
  "warnings": {
    "typescriptMismatch": false
  }
}

管理组件用于从路由模块中获取路由和元数据（数据）。

文件：admin.component.ts

import { Component, OnInit } from '@angular/core';
import { Routes, Router } from '@angular/router';

@Component({
    selector: 'app-admin',
    templateUrl: 'admin.component.html',
    styleUrls: ['admin.component.css']
})
export class AdminComponent implements OnInit {
    public routes: Routes;
    userRole: string;  
    constructor(private router: Router) {
        this.routes = this.router.config, 'data';   
    }
    ngOnInit() {
        this.userRole = localStorage.getItem('auth_role');
     }
}

文件：admin.component.html

<div *ngFor="let route of routes | filter:userRole" class="slds-p-right--medium slds-size--3-of-3">
    <a [routerLink]=" '/' + route.path" class="slds-app-launcher__tile slds-text-link--reset">
        <div class="slds-app-launcher__tile-figure">
            <span class="slds-avatar slds-avatar--medium slds-align--absolute-center"><img class="logo" [src]="route.data.icon"></span>
        </div>
        <div class="slds-app-launcher__tile-body" *ngIf="route.data">
            <span class="slds-text-title"><strong>{{route.data.title}}</strong></span>
            <p class="slds-text-body--small">{{route.data.description}}
            </p>
        </div>
    </a>
</div> 

过滤管道用于收集所有组件的所有元数据，并根据具有元数据的组件和用户登录时的角色权限构建菜单集合。

文件：filter.pipe.ts

import { Routes } from '@angular/router';
import { Pipe, PipeTransform } from '@angular/core';    
import * as _ from 'lodash';

@Pipe({
    name: 'filter'
})    
export class FilterPipe implements PipeTransform {
    toBeSortedRouteList: any[];
    transform(routes: Routes, allowed_role: string): any {
        this.toBeSortedRouteList = _.chain(routes)
            .filter('data')
            .filter(function(route) {
                return (_.indexOf(route.data.role, allowed_role) !== -1) ;
            })
            .value();    
        this.toBeSortedRouteList = _.sortBy(this.toBeSortedRouteList, 'data.rank')    
        return this.toBeSortedRouteList;
    }
}

文件：routes.service.ts

    import { Injectable } from '@angular/core';
    import { Routes } from '@angular/router';

    @Injectable()
    export class RoutesListingService {
        public appRoutes: Routes[];

        constructor(private routes: Routes[]) {
            this.appRoutes = routes;
        }

}

以下是组件路由模块的示例。在这种情况下，用于显示 SSL 证书列表。

文件：sslcert-routing-module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { SslCertComponent } from './sslcert.component';
import { AddSslCertFormComponent } from './addsslcert-form.component';
import { EditSslCertFormComponent } from './editsslcert-form.component';

import { AuthGuard } from '../core/auth-guard.service';
import { RoutesListingService } from '../core/routes.service';

const routes: Routes = [
  {
    path: 'certificates',
    component: SslCertComponent,
    canActivate: [AuthGuard],
    data: {
      title: 'SSL Certs',
      description: 'Manage UCC lab SSL Certificates.',
      icon: './assets/images/safe-icon48.png',
      rank: 3,
      role: ['ROLE_GUEST', 'ROLE_OPERATOR', 'ROLE_ADMIN']
    },
  },
  { path: 'certificates/addsslcert', component: AddSslCertFormComponent },
  { path: 'certificates/editsslcert/:id', component: EditSslCertFormComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: [AuthGuard, RoutesListingService]
})
export class SslCertRoutingModule { }

export const routedComponents = [SslCertComponent, AddSslCertFormComponent, EditSslCertFormComponent];

Answer 1

如果你希望能够注入路由，那么你应该提供InjectionToken:

const RoutesToken:InjectionToken<Routes> = new InjectionToken<Routes>('routes');


@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: [AuthGuard, RoutesListingService, {provide: RoutesToken, useValue: routes}]
})


@Injectable()
export class RoutesListingService {
    public appRoutes: Routes;

    constructor(private @Inject(RoutesToken) routes: Routes) {
        this.appRoutes = routes;
    }

}