Question

我正在尝试构建用angular7开发的Web应用的生产版本，并且编译运行良好。但是，当我尝试导航到应用程序时，会在控制台中引发错误：

Uncaught TypeError: ctor is not a constructor
    at _createClass (main.07add232d9f568bb2d7a.js:33609)
    at _createProviderInstance (main.07add232d9f568bb2d7a.js:33583)
    at initNgModule (main.07add232d9f568bb2d7a.js:33514)
    at new NgModuleRef_ (main.07add232d9f568bb2d7a.js:34243)
    at Object.createNgModuleRef (main.07add232d9f568bb2d7a.js:34232)
    at NgModuleFactory_.push../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create (main.07add232d9f568bb2d7a.js:36793)
    at main.07add232d9f568bb2d7a.js:30443
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.a8a979dc29215b620775.js:396)
    at Object.onInvoke (main.07add232d9f568bb2d7a.js:29978)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.a8a979dc29215b620775.js:395)

我该如何解决？我不明白哪个库出了问题。这是我的package.json

{
  "name": "cop-ang",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.1.4",
    "@angular/common": "^7.1.4",
    "@angular/compiler": "^7.1.4",
    "@angular/core": "^7.1.4",
    "@angular/forms": "^7.1.4",
    "@angular/http": "^7.1.4",
    "@angular/platform-browser": "^7.1.4",
    "@angular/platform-browser-dynamic": "^7.1.4",
    "@angular/router": "^7.1.4",
    "@ng-bootstrap/ng-bootstrap": "^4.0.1",
    "angular-intl-tel-input": "0.0.9",
    "bootstrap": "^4.2.1",
    "core-js": "^2.6.1",
    "google-libphonenumber": "^3.2.2",
    "intl-tel-input": "^14.0.6",
    "jquery": "^3.3.1",
    "ngx-bootstrap": "^3.1.4",
    "npm-check-updates": "^2.15.0",
    "popper.js": "^1.14.6",
    "rxjs": "^6.3.3",
    "ts-md5": "^1.2.4",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.11.4",
    "@angular/cli": "^7.1.4",
    "@angular/compiler-cli": "^7.1.4",
    "@angular/language-service": "^7.1.4",
    "@types/jasmine": "^3.3.5",
    "@types/jasminewd2": "^2.0.6",
    "@types/jquery": "^3.3.29",
    "@types/node": "^10.12.18",
    "angular-ide": "^0.9.55",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.4",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "^5.4.2",
    "ts-node": "~7.0.1",
    "tslint": "~5.12.0",
    "typescript": "3.1.6"
  }
}

这是app.module.ts：

import { NgbDateCustomParserFormatter } from './customformatters/NgbDateCustomParserFormatter';
import { WorkshiftComponent } from './protectedpages/workshift/workshift.component';
import { BrowserModule } from '@angular/platform-browser';
import { LOCALE_ID, NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { IntegerDirective } from './customdirectives/integerdirective';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IndexComponent } from './publicpages/index/index.component';
import { RegisterComponent } from './publicpages/register/register.component';
import { ReactiveFormsModule } from '@angular/forms';
import { ActivateComponent } from './protectedpages/activate/activate.component';
import { LoginComponent } from './publicpages/login/login.component';
import { ConfigureirComponent } from './protectedpages/configureir/configureir.component';
import { ServicesComponent } from './protectedpages/services/services.component';
import { ConfigureuserComponent } from './protectedpages/configureuser/configureuser.component';
import { NavmenuComponent } from './protectedpages/navmenu/navmenu.component';
import { NewServiceComponent } from './protectedpages/newservice/newservice.component';
import { TildeStringPipe } from './custompipes/tildestring.pipe';
import { ServiceComponent } from './protectedpages/service/service.component';
import { NgbModule, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { UsersComponent } from './protectedpages/users/users.component';
import { NewuserComponent } from './protectedpages/newuser/newuser.component';
import { ChangePasswordComponent } from './protectedpages/changepassword/changepassword.component';
import { CommaStringPipe } from './custompipes/commastring.pipe';
import { UserComponent } from './protectedpages/user/user.component';
import { VehiclesComponent } from './protectedpages/vehicles/vehicles.component';
import { VehicleComponent } from './protectedpages/vehicle/vehicle.component';
import { NewVehicleComponent } from './protectedpages/newvehicle/newvehicle.component';
import { NewWorkshiftComponent } from './protectedpages/newworkshift/newworkshift.component';
import { WorkshiftsComponent } from './protectedpages/workshifts/workshifts.component';
import { PublicnavmenuComponent } from './publicpages/publicnavmenu/publicnavmenu.component';
import { WhatisComponent } from './publicpages/whatis/whatis.component';
import { WhyComponent } from './publicpages/why/why.component';
import { PricesComponent } from './publicpages/prices/prices.component';
import { FaqComponent } from './publicpages/faq/faq.component';
import { LogoutComponent } from './publicpages/logout/logout.component';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { IntlTelInputModule } from 'angular-intl-tel-input';

// Locale IT
import { registerLocaleData } from '@angular/common';
import localeIt from '@angular/common/locales/it';

registerLocaleData(localeIt, 'it');

@NgModule({
  declarations: [
    AppComponent,
    IndexComponent,
    RegisterComponent,
    ActivateComponent,
    LoginComponent,
    ConfigureirComponent,
    ServicesComponent,
    ConfigureuserComponent,
    NavmenuComponent,
    NewServiceComponent,
    TildeStringPipe,
    IntegerDirective,
    ServiceComponent,
    UsersComponent,
    NewuserComponent,
    ChangePasswordComponent,
    CommaStringPipe,
    UserComponent,
    VehiclesComponent,
    VehicleComponent,
    NewVehicleComponent,
    NewWorkshiftComponent,
    WorkshiftsComponent,
    WorkshiftComponent,
    PublicnavmenuComponent,
    WhatisComponent,
    WhyComponent,
    PricesComponent,
    FaqComponent,
    LogoutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    NgbModule,
    BsDropdownModule.forRoot(),
    IntlTelInputModule
  ],
  providers: [{ provide: LOCALE_ID, useValue: 'it'}, {provide: NgbDateParserFormatter, useValue: NgbDateCustomParserFormatter}],
  bootstrap: [AppComponent]
})
export class AppModule { }

感谢您的帮助

Answer 1

在使用react-native的情况下，只需重新启动Metro服务器即可。

Answer 2

这可能是提供者声明中的错误。

当您尝试模拟提供程序并使用useClass而不是useValue时，将引发错误“ TypeError：ctor不是构造函数”。

以下是引发错误的示例：

providers: [{provide: OrderService, useClass: new OrderServiceMock()}]

正确的声明是：

providers: [{provide: OrderService, useValue: new OrderServiceMock()}]

请参考此处：https://stackoverflow.com/a/44944645

Answer 3

我可以通过删除/ node_modules目录并在其后执行npm install来解决此问题。

Answer 4

升级到ng7后，我遇到了类似的问题。
对我来说，问题是升级过程更改了rxjs导入。
因此，我将“ ../../node_modules/rxjs/”之类的导入更改回了“ rxjs”。

Answer 5

尝试访问componentDidUpdate内的redux存储而不检查prevProps时遇到此错误。始终检查prevProps

Answer 6

只需卸载并重新安装该应用程序即可消除此错误

Angular7-Ctor不是构造函数

6 个答案: