文章/答案/技术大牛

发布

社区首页 >问答首页 >当Angular中有在构造函数中提到的服务时，它缺少组件，但在组件本身中没有使用。JHipster应用程序

问当Angular中有在构造函数中提到的服务时，它缺少组件，但在组件本身中没有使用。JHipster应用程序
EN

Stack Overflow用户

提问于 2020-09-16 17:42:21

回答 1查看 209关注 0票数 1

下面是我们在浏览器的调试中所做的：

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

有趣的是，使用npm start时，它编译得很好，并且只有在使用maven on production side (heroku)的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中没有提到它(如果设置了完整路径，我们永远不需要它，对吗？)

因此，这个问题可以通过显式地以index.ts格式导出UsefulStuffComponent和以相同的方式与其他组件一起导出来解决：

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？

更新：

因此，在@Gaël Marziou的建议之后，我尝试本地化了使组件在prod状态下丢失的更改。我已经揭示了这个组件仍然会导致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, 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

angular

typescript

heroku

jhipster

maven-frontend-plugin

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-06 16:45:00

有些角度错误可能真的很难调试，特别是当它们不出现在开发版本中时。

每次我遇到这样的情况时，我实际上都会回滚我的更改，直到我找到罪魁祸首提交。

如果您在进行了大量更改之后执行此操作，那么您可以使用带有git bisect的脚本来识别错误行，当然，假设您的提交数很小。

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63917328

复制

相似问题

问当Angular中有在构造函数中提到的服务时，它缺少组件，但在组件本身中没有使用。JHipster应用程序
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当Angular中有在构造函数中提到的服务时，它缺少组件，但在组件本身中没有使用。JHipster应用程序EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当Angular中有在构造函数中提到的服务时，它缺少组件，但在组件本身中没有使用。JHipster应用程序
EN