Angular5 +非法状态:无法加载指令RouterOutlet的摘要

Question

如果我尝试使用ng build --prod --aot构建我的Angular应用程序,我总是遇到此错误:

ERROR in : Illegal state: Could not load the summary for directive RouterOutlet in C:/Path-To-Project/node_modules/@angular/Router/router.d.ts.

如果我使用"ng serve"编译我的项目,我不会收到错误消息.我试图实现延迟加载的几个变种,但每个都导致错误.此外,我试图完全重建应用程序并遵守Angular的所有规范,但我总是回到这个错误消息的相同点.

我的package.json:

{
  "name": "Name",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.4",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }

我的app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { Routes, RouterModule } from '@angular/Router';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { CoreModule } from './Core/core.module';
// import { ProtkollModule } from './protokoll/protokoll.module';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CoreModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的app-routing.module.ts:

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

import { AppComponent } from './app.component';
import { LoginComponent } from './Core/login/login.component';
import { AuthGuardService } from './Core/login/auth-guard.service';
import { AdminComponent } from './admin/admin.component';
import { ErrorComponent } from './Core/error/error.component';

const appRoutes: Routes = [
    {path: '', component: AppComponent, pathMatch: 'full'},
    {path: 'login', pathMatch: 'full', component: LoginComponent},
    {path: 'freigabe', loadChildren: './product-list/product-list.module#ProductListModule' , canLoad: [AuthGuardService]},
    {path: 'protokoll', loadChildren: './protokoll/protokoll.module#ProtkollModule' , canLoad: [AuthGuardService]},
    {path: 'admin', component: AdminComponent, canActivate: [AuthGuardService]},
    {path: 'error', component: ErrorComponent},
    {path: '**', redirectTo: ''}
  ];


@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule],
})
export class AppRoutingModule {}

我的product-list.module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/Router';

import { ReleaseButtonComponent } from './buttons/release-button/release-button.component';
import { SyncButtonComponent } from './buttons/sync-button/sync-button.component';
import { RollbackButtonComponent } from './buttons/rollback-button/rollback-button.component';
import { ProductListComponent } from './product-list.component';
import { LinkGeneratorComponent } from './link-generator/link-generator.component';
import { SearchProductsComponent } from './search-products/search-products.component';
import { ProductComponent } from './product/product.component';
import { UnderproductComponent } from './product/underproduct/underproduct.component';
import { VersionComponent } from './product/version/version.component';
import { ReleaseComponent } from './product/release/release.component';
import { SetButtonClassDirective } from './buttons/set-button-class.directive';
import { ButtonService } from './buttons/button.service';
import { ButtonCreateService } from './buttons/button-create.service';
import { ListToggleService } from './product/list-toggle.service';
import { LinkGeneratorService } from './link-generator/link-generator.service';
import { ProductListService } from './product-list.service';
import { SpinnerComponent } from './buttons/spinner/spinner.component';


const productListRoutes: Routes = [
    {path: '', component: ProductListComponent},
];

@NgModule({
    declarations: [
        ReleaseButtonComponent,
        SyncButtonComponent,
        RollbackButtonComponent,
        ProductListComponent,
        LinkGeneratorComponent,
        SearchProductsComponent,
        ProductComponent,
        UnderproductComponent,
        VersionComponent,
        ReleaseComponent,
        SetButtonClassDirective,
    ],
    imports: [
        CommonModule,
        RouterModule.forChild(productListRoutes)
    ],
    providers: [
        ButtonService,
        ButtonCreateService,
        ListToggleService,
        LinkGeneratorService,
        ProductListService,
    ],
    exports: [
    ]
})
export class ProductListModule { }

有谁知道这个问题的解决方案？

Answer 1

当我ng test在我的angular 5应用程序中运行一些使用的测试时,我遇到了类似的错误jasmine.我得到的错误是错误:未捕获(在承诺中):错误:非法状态:无法加载指令RegisterComponent的摘要..我正在做的错误是,我没有添加declarations我的RegisterComponent,一旦我添加到我TestBed.configureTestingModule({})的错误就消失了.这是我的代码.

beforeEach(fakeAsync(() => {
    TestBed.configureTestingModule({
     declarations: [
      RegisterComponent
     ],
     providers: [
      ApiService,
      AuthService,
      FormBuilder
     ]
    }).overrideComponent(RegisterComponent, {
     set: {
      providers: [{
       provide: ApiService,
       useClass: MockApiService
      }]
     }
    }).compileComponents().then(() => {
     componentFixture = TestBed.createComponent(RegisterComponent);
     component = componentFixture.componentInstance;
    });