1

如果我尝试使用 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 {}

我的产品列表模块：

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 { }

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

4

3 回答 3

11

I was getting a similar error when I run ng test in my angular 5 application with some test written using jasmine. The error I was getting is Error: Uncaught (in promise): Error: Illegal state: Could not load the summary for directive RegisterComponent.. The mistake I was doing was, I didn't add the declarations with my RegisterComponent, once I added that to my TestBed.configureTestingModule({}) the error goes away. Here is my code.

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;
    });
于 2018-07-05T14:19:50.080 回答
1

对于错误

Uncaught Error: Illegal state: Could not load the summary for directive MyComponent

在我的情况下修复了它，

declarations:[
      ...components....
      MyComponent  // <- adding this GOT RID of the ISSUE
]
于 2019-10-25T10:27:06.030 回答
1

我刚刚修正了错误。

不幸的是，我无法准确描述它是什么。我的做法是完全反汇编一个相同的项目并重复启动命令ng build --prod --aot。之后，我通过组件和模块通过模块将组件重新构建回碎片项目。

我的一个错误是，在我的 app-routing.module 中，我在 AppComponent: 上做了一个条目{path: '', component: AppComponent, pathMatch: 'full'}。我把它改成了这个条目：{path: '', redirectTo: '', pathMatch: 'full'}，

其他错误是对不同模块的错误导入和导出，以及路由器导入的不同写入。这个过程花了我 3 个小时才找到那个错误，所以每个有同样错误的人，也许你尝试同样的方法来找出错误所在。

我希望这篇文章对其他人有用。

于 2018-04-10T08:48:59.133 回答