Angular中缺少组件，当它在构造函数中提到服务时，组件本身内部未使用。JHipster应用程序

下面是我们在浏览器调试中的内容：

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

有趣的是，使用

npmstart

可以很好地编译它，只有在生产端（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,
  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'; actually no import here

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

npm start

上得到它呢

UPD：

因此，在@Gaël Marziou的建议下，我尝试将导致组件在prod state丢失的更改本地化。我发现该组件仍然会导致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);
  }
}

---

有些角度错误确实很难调试，特别是当它们没有出现在开发人员构建中时

每次我面对这样的情况，我实际上都会收回我的更改，直到我发现罪犯犯了罪

如果在进行了大量更改之后才执行此操作，那么可以使用带有

git bisect

的脚本来识别错误行，当然前提是您的提交很小

---

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

产品构建比开发构建做得更多：模板检查、树抖动、AOT。如果一个组件没有被使用，它很可能会被树震动移除。我在你的问题中添加了heroku标签，也许它会引起一些注意。我想你可以通过查看heroku的子生成器来发现：老实说，我不知道也许你可以找到它。每次面对这种情况，我都会退缩，直到我发现罪犯犯了罪，这就是为什么CI在这里提供帮助。如果你在做了很多更改之后，也许你可以使用一个带有

git bisect

的脚本来识别错误行，当然前提是你的提交很小。任何你可以使用“npm run”运行的东西都可以在pom.xml中配置，请参阅前端maven插件文档Fast dev builds和tree shaking相反，你不能两者都有，否则它将是默认的。我不确定这是前端maven插件的问题，它可能是一个角度编译器的问题，无论如何，如果你想报告给其中一个项目，你将被要求提供一个最小的项目来重现这个问题。

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

  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);
  }
}

   protected paymentService: PaymentService