Angular5 +非法状态：无法加载指令RouterOutlet

时间：2018-04-09 14:07:05

标签： javascript angular typescript angular-router ng-build

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

是否有人知道问题的解决方案？

3 个答案:

答案 0 :(得分：5)

当我在# Set up an return variable (exit code) [int]$exitCode = 0 # $machine is the variable name i used to import the json above if ($machine.host.status -eq "GREEN") { Write-Host "Message: Machine $($machine.host.name) - hardware is healthy" } else { foreach ($component in $machine.host.components.PSObject.Properties) { if ($component.Value.status -ne "GREEN") { Write-Host "Message: Machine $($machine.host.name) - $($component.Name) is not healthy" $exitCode = 1 } } } Exit $exitCode 应用程序中运行ng test并使用angular 5编写了一些测试时，遇到了类似的错误。我得到的错误是错误：未捕获（承诺）：错误：非法状态：无法加载指令RegisterComponent的摘要。。我正在犯的错误是，我没有将jasmine和declarations一起添加，一旦我将其添加到RegisterComponent中，错误就会消失。这是我的代码。

TestBed.configureTestingModule({})

答案 1 :(得分：1)

针对错误

SELECT id,  age, last_name, first_name
from  my_view 
where  age>20 AND age<30 
      ORDER BY last_name, first_name 
      LIMIT 0,30

以下是我的情况

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

答案 2 :(得分：0)

我刚修正了错误。

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

我的一个错误是在我的app-routing.module中我在AppComponent上创建了一个条目：{path: '', component: AppComponent, pathMatch: 'full'}。我将其更改为此条目：{path: '', redirectTo: '', pathMatch: 'full'}，

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

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

相关问题
最新问题