如何修复“无法解析 ComponentName 的所有参数”

Question

我正在尝试为我的 Angular 项目运行 ng serve 命令。它可以工作，它可以构建，但是当我想访问localhost:4200（我的本地主机角度访问）时，屏幕是空白的，控制台说：

未捕获的错误：无法解析所有参数 CreateContractComponent: (?, ?, ?)。

在我将项目作为新项目重新签出到我的计算机之前，一切正常。当我部署应用程序时，它可以完美运行（例如 heroku）

我花了 1 天时间在谷歌上搜索并尝试了不同主题的内容，但仍然很糟糕。如果您需要/想要更多文件，请告诉我。

很快组件代码：

import { Component, OnInit } from '@angular/core';
import { ContractService } from '../offer-page/contract.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-create-contract',
  templateUrl: './create-contract.component.html',
  styleUrls: ['./create-contract.component.css']
})
export class CreateContractComponent implements OnInit {
  constructor(private contractService: ContractService, private route: ActivatedRoute,private router: Router) {
  }
}

contractService 很快

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';

import { Contract } from './object-model/contract';

@Injectable()
export class ContractService {

  constructor(
    private http: HttpClient
  ) { }
}

我需要的只是运行ng serve 命令并能够在开发模式下工作。现在只有部署（到heroku）才有可能。

编辑请求文件：

这是我的 package.json 文件

{
  "name": "name-of-the-project",
  "version": "0.0.0",
  "engines": {
    "node": "8.9.x",
    "npm": "5.5.x"
  },
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "deploy": "git push heroku master",
    "postinstall": "ng build --aot -prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/cli": "^1.6.3",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/compiler-cli": "^5.1.3",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@angular/http": "7.2.15",
    "core-js": "^2.4.1",
    "express": "^4.16.2",
    "express-basic-auth": "1.2.0",
    "nouislider": "^11.1.0",
    "rxjs": "^5.5.2",
    "tslib": "^1.9.0",
    "typescript": "~2.4.2",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "^1.6.3",
    "@angular/compiler-cli": "^5.1.3",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^3.3.4",
    "@types/node": "~6.0.60",
    "codelyzer": "^5.0.1",
    "enhanced-resolve": "^3.3.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "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": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

这是我的 app.module.ts 文件

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

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { ProductsComponent } from './client-page/products/products.component';
import { ClientService } from './client-page/client-offers/client.service';
import { ContractService } from './offer-page/contract.service';
import { FooterComponent } from './footer/footer.component';
import { ClientPageComponent } from './client-page/client-page.component';
import { FirstScreenComponent } from './offer-page/first-screen/first-screen.component';
import { BonusesComponent } from './offer-page/first-screen/bonuses/bonuses.component';
import { DebitCardsComponent } from './offer-page/first-screen/debit-cards/debit-cards.component';
import { ServicesComponent } from './offer-page/first-screen/services/services.component';
import { OfferPageComponent } from './offer-page/offer-page.component';
import { ClientOffersComponent } from './client-page/client-offers/client-offers.component';
import { ProductsService } from './offer-page/first-screen/products.service';
import { ClientPageService } from './client-page/client-page.service';
import { OfferService } from './offer-page/offer.service';
import { RefreshPageService } from './offer-page/first-screen/refresh-page.service';
import { CreateContractComponent } from './create-contract/create-contract.component';
import { AcceptancePageComponent } from './acceptance-page/acceptance-page.component';
import { AttributesComponent } from './offer-page/first-screen/attributes/attributes.component';
import { PricesComponent } from './offer-page/first-screen/prices/prices.component';
import { NamePriceComponent } from './offer-page/first-screen/name-price/name-price.component';

const appRoutes: Routes = [
  { path: '', component: ClientPageComponent },
  { path: 'createContract/:userId/:offerId', component: CreateContractComponent },
  { path: 'offerPage/:contractId', component: OfferPageComponent },
  { path: 'contractCreated/:contractId', component: AcceptancePageComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    ProductsComponent,
    FooterComponent,
    ClientPageComponent,
    FirstScreenComponent,
    BonusesComponent,
    DebitCardsComponent,
    ServicesComponent,
    OfferPageComponent,
    ClientOffersComponent,
    CreateContractComponent,
    AcceptancePageComponent,
    AttributesComponent,
    PricesComponent,
    NamePriceComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes),
    FormsModule
  ],
  providers: [ ClientService, ContractService,
    ProductsService, ClientPageService, OfferService,
    RefreshPageService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

在检查了很多提交后，我发现了问题。我错过了这个文件中的这一行

src/polyfills.ts

import 'core-js/es7/reflect';

说明为什么需要它：

Evergreen 浏览器需要这些。用于 JIT 中的反射元数据。

但不知道，它有什么作用，但它有效！