Angular中缺少在构造函数中提及的服务的组件，该组件内部未使用 JHipster应用

问题描述

这是浏览器调试中的功能：

const Mp = {
        pageTitle: "ученику"
    },Ap = {
        path: "to-student",component: Fp,data: Mp,canActivate: [m.b]
    };
    class Dp {
        constructor() {}
        ngOnInit() {}
    }

有趣的是，使用npm start编译的很好，只有在生产端（heroku）使用maven的npm插件构建时，运行时才会失败。

在模块上，我们有：

import {
  BlogDocumentsComponent,BlogFaqComponent,BlogEntriesComponent,ShopComponent,ShopSuccessComponent,ShopFailureComponent,SyllablesComponent,RedirectComponent,//  UsefulStuffComponent actually not there
} from './';

import 'd3';
import 'nvd3';
import { NvD3Module } from 'ng2-nvd3';
import { UsefulStuffComponent } from './useful-stuff/useful-stuff.component';

所以UsefulStuffComponent并不常见，但是它的路径是正确的！

并且在模块的相应index.ts中没有提到它（如果设置了完整路径，我们就不需要它了吧？）

因此，可以通过显式使UsefulStuffComponent导出到index.ts并与其他组件相同的导出方式来解决此问题：

import {
  BlogDocumentsComponent,UsefulStuffComponent actually not there
} from './';

import 'd3';
import 'nvd3';
import { NvD3Module } from 'ng2-nvd3';
//  import { UsefulStuffComponent } from './useful-stuff/useful-stuff.component'; actually no import here

那么，为什么我会遇到这种生产运行时故障，却从未在本地npm start上得到它？

UPD：

因此，在@GaëlMarzIoU的建议下，我试图定位使组件在生产状态下丢失的更改。我发现该组件仍然会导致prod错误：

import { Component,OnInit } from '@angular/core';
import { filter,map } from 'rxjs/operators';
import { HttpErrorResponse,HttpResponse } from '@angular/common/http';
import { PaymentService } from 'app/businesslogic';
import { JhiAlertService } from 'ng-jhipster';
import { IAccessSubscription } from 'app/shared/model/access-subscription.model';
import { AccessSubscriptionService } from 'app/entities/access-subscription';

@Component({
  templateUrl: './to-student.component.html',styleUrls: ['./to-student.component.scss']
})
export class ToStudentComponent implements OnInit {
  accessSubscriptions: IAccessSubscription[] = [];
  accessSubscriptionsIds: number[] = [];

  constructor(
    protected jhiAlertService: JhiAlertService,protected accessSubscriptionsService: AccessSubscriptionService,protected paymentService: PaymentService
  ) {}

  ngOnInit() {
    this.loadAll();
  }

  loadAll() {
    this.accessSubscriptionsService
      .queryAllmine()
      .pipe(
        filter((mayBeOk: HttpResponse<IAccessSubscription[]>) => mayBeOk.ok),map((response: HttpResponse<IAccessSubscription[]>) => response.body)
      )
      .subscribe(
        (res: IAccessSubscription[]) => {
          this.accessSubscriptions = res;
          this.accessSubscriptions.map((item: IAccessSubscription) => {
            this.accessSubscriptionsIds.push(item.id);
          });
        },(res: HttpErrorResponse) => this.onError(res.message)
      );
  }

  protected onError(errorMessage: string) {
    this.jhiAlertService.error(errorMessage,null,null);
  }
}

这已经很好用了：

import { Component,styleUrls: ['./to-student.component.scss']
})
export class ToStudentComponent implements OnInit {
  accessSubscriptions: IAccessSubscription[] = [];
  accessSubscriptionsIds: number[] = [];

  constructor(protected jhiAlertService: JhiAlertService,protected accessSubscriptionsService: AccessSubscriptionService) {}

  ngOnInit() {
    this.loadAll();
  }

  loadAll() {
    this.accessSubscriptionsService
      .queryAllmine()
      .pipe(
        filter((mayBeOk: HttpResponse<IAccessSubscription[]>) => mayBeOk.ok),null);
  }
}

因此，非工作状态仅包含构造函数中从未使用过的某些服务的导入：

   protected paymentService: PaymentService

解决方法

某些Angular错误确实很难调试，尤其是当它们没有出现在开发版本中时。

每次遇到这种情况时，我实际上都会回退更改，直到找到罪魁祸首。

如果要在进行大量更改后执行此操作，则可以使用带有git bisect的脚本来确定错误行，前提是您的提交当然很小。

理想情况下，为避免这种“考古”搜索，您应该从项目开始就进行自动连续集成，这样您可以确保从生产构建中进行更深入的检查将更早发现错误。