Angular 8 ERROR 错误：无法找到与 [object HTMLDivElement] 关联的上下文答案

【问题标题】：Angular 8 ERROR Error: Unable to find context associated with [object HTMLDivElement]Angular 8 ERROR 错误：无法找到与 [object HTMLDivElement] 关联的上下文
【发布时间】：2022-09-30 16:45:53
【问题描述】：

只是在办公室的另一天，对吧？曾经有效的不再有效。耶！

我支持 Angular 8 Web 应用程序并尝试启动 localhost:4200。

也就是说，在npm run start 完成后，Chrome DevTools 会返回以下错误“无法找到与 [object HTMLDivElement] 关联的上下文”：

核心.js文件是：webpack:///./node_modules/@angular/core/fesm2015/core.js，并且启动 localhost 使用aot（提前编译）。

从Chrome 开发者工具：

我从这些以前的资源中尝试了多个选项（例如 polyfill 更新、为tsconfig.json 分配新目标、用于自定义元素的 npm 包等），但没有成功：

随后，我完成了一些迄今为止比较知名的生活技巧，包括：

卸载现有本地项目中的node_modules，然后重新安装。
拉下一个新的本地存储库并运行npm install。
卸载我的操作系统（NodeJS、Angular CLI）上的所有内容，然后重新安装。

包.json如下：

  \"dependencies\": {
    \"@agm/core\": \"^1.0.0-beta.5\",
    \"@angular-devkit/build-angular\": \"^0.803.8\",
    \"@angular/animations\": \"8.2.9\",
    \"@angular/cdk\": \"8.2.2\",
    \"@angular/common\": \"8.2.9\",
    \"@angular/compiler\": \"8.2.9\",
    \"@angular/core\": \"8.2.9\",
    \"@angular/forms\": \"8.2.9\",
    \"@angular/http\": \"6.0.7\",
    \"@angular/material\": \"8.2.2\",
    \"@angular/platform-browser\": \"8.2.9\",
    \"@angular/platform-browser-dynamic\": \"8.2.9\",
    \"@angular/router\": \"8.2.9\",
    \"@ngrx/core\": \"^1.2.0\",
    \"@ngrx/effects\": \"^8.3.0\",
    \"@ngrx/entity\": \"^8.3.0\",
    \"@ngrx/store\": \"^8.3.0\",
    \"@ngrx/store-devtools\": \"^8.3.0\",
    \"agm-direction\": \"^0.7.5\",
    \"angulartics2\": \"6.2.0\",
    \"bootstrap\": \"^4.1.1\",
    \"core-js\": \"^2.5.7\",
    \"jasmine-marbles\": \"^0.4.1\",
    \"jquery\": \"^3.3.1\",
    \"ldclient-js\": \"^2.8.0\",
    \"material-design-icons\": \"^3.0.1\",
    \"moment\": \"^2.22.2\",
    \"ng2-signalr\": \"^6.0.0\",
    \"roboto-fontface\": \"^0.9.0\",
    \"rxjs\": \"^6.5.3\",
    \"signalr\": \"^2.3.0\",
    \"typeface-roboto-mono\": \"0.0.75\",
    \"vanilla-text-mask\": \"^5.1.1\",
    \"zone.js\": \"^0.9.1\"
  },
  \"devDependencies\": {
    \"@angular/cli\": \"8.3.8\",
    \"@angular/compiler-cli\": \"8.2.9\",
    \"@angular/language-service\": \"8.2.9\",
    \"@angularclass/hmr\": \"^2.1.3\",
    \"@types/jasmine\": \"^2.8.8\",
    \"@types/jasminewd2\": \"~2.0.2\",
    \"@types/node\": \"^6.0.114\",
    \"codelyzer\": \"^4.4.2\",
    \"grunt\": \"^1.0.3\",
    \"grunt-bump\": \"^0.8.0\",
    \"jasmine-core\": \"~2.8.0\",
    \"jasmine-spec-reporter\": \"~4.2.1\",
    \"karma\": \"^2.0.4\",
    \"karma-chrome-launcher\": \"~2.2.0\",
    \"karma-coverage-istanbul-reporter\": \"^1.4.3\",
    \"karma-jasmine\": \"^1.1.2\",
    \"karma-jasmine-html-reporter\": \"^0.2.2\",
    \"protractor\": \"~5.1.2\",
    \"ts-node\": \"~4.1.0\",
    \"tslint\": \"~5.9.1\",
    \"typescript\": \"3.5.3\"
  },

tsconfig.json如下：

  \"compilerOptions\": {
    \"outDir\": \"./dist/out-tsc\",
    \"sourceMap\": true,
    \"declaration\": false,
    \"moduleResolution\": \"node\",
    \"emitDecoratorMetadata\": true,
    \"experimentalDecorators\": true,
    \"target\": \"es5\",
    \"typeRoots\": [
      \"node_modules/@types\"
    ],
    \"lib\": [
      \"es2017\",
      \"dom\"
    ]
  },

tsconfig.app.json如下：

{
  \"extends\": \"../tsconfig.json\",
  \"compilerOptions\": {
    \"outDir\": \"../out-tsc/app\",
    \"baseUrl\": \"./\",
    \"module\": \"es2015\",
    \"types\": []
  },
  \"exclude\": [
    \"test.ts\",
    \"**/*.spec.ts\"
  ]
}

根据对.ts 和.html（加载指示符）的评论请求：

import {
  Component,
  EventEmitter,
  Input,
  OnDestroy,
  OnInit,
  Output,
} from \'@angular/core\'
import {
  Observable,
} from \'rxjs\'
import {
  takeWhile,
} from \'rxjs/internal/operators/takeWhile\'

import {
  FadeInOut,
} from \'../animations/fade-in-out.animation\'
import {
  ConfirmationModalStates,
} from \'../models/confirmation-modal.model\'

@Component({
  selector: \'loading-indicator\',
  templateUrl: \'./loading-indicator.component.html\',
  styleUrls: [\'./loading-indicator.component.sass\'],
  animations: [
    FadeInOut()
  ]
})
export class LoadingIndicatorComponent implements OnDestroy, OnInit {

  // The icon used during the \"Failure\" state. Defaults to \'call\' in the template
  // The Success icon is always a check-mark
  // The warning icon is always an exclamation-mark
  @Input() failureIcon
  // The headline text to show while loading 
  // Also used to change style in case of loading
  @Input() loadingText = \'\'
  @Input() stateStream$: Observable<ConfirmationModalStates>
  // The headline text to show when warning
  @Input() warningText: string
  @Output() failureClick = new EventEmitter<void>()
  @Output() successfulClick = new EventEmitter<void>()

  // Expose the states so the UI can refer to enum values
  public LoadingStates = ConfirmationModalStates
  public spinnerValue = 0
  public state: ConfirmationModalStates = ConfirmationModalStates.Loading

  private subscriptionsAreActive = true

  constructor() { }

  ngOnDestroy() {
    this.subscriptionsAreActive = false
  }

  ngOnInit() {
    this.initSubscriptions()
  }

  public genericAction() {
    // It\'s unclear why these output events are registered as not tested. They are
    /* istanbul ignore next */
    if (this.state === ConfirmationModalStates.Success) {
      this.successfulClick.emit()
    } else if (this.state === ConfirmationModalStates.Failure) {
      this.failureClick.emit()
    }
  }

  /**
   * Animates completing the loading circle
   */
  private completeCircleAsync() {
    // Start it a little ahead to give the user the feeling of progress
    this.spinnerValue = 10
    const myTimeout = setInterval(() => {
      this.spinnerValue += 15
      if (this.spinnerValue >= 100) {
        clearInterval(myTimeout)
      }
    }, 90)
  }

  private initSubscriptions() {
    this.stateStream$.pipe(
      takeWhile(() => this.subscriptionsAreActive)
    ).subscribe(newState => {
      this.state = newState
      // It\'s unclear why these output events are registered as not tested. They are
      /* istanbul ignore next */
      if (newState !== ConfirmationModalStates.Loading) {
        this.completeCircleAsync()
      }
    })
  }
}

<div class=\"text-center\" [ngClass]=\"{
      \'clickable\': (state === LoadingStates.Success || state === LoadingStates.Failure)
}\" (click)=\"genericAction()\">
  <div class=\"spinner-wrapper\">
    <mat-progress-spinner [ngClass]=\"{
      \'spinner-fail\': state == LoadingStates.Failure,
      \'spinner-prompt\': state == LoadingStates.Prompt,
      \'spinner-success\': state == LoadingStates.Success,
      \'spinner-warn\': state == LoadingStates.Warning
    }\" [mode]=\"\'determinate\" [value]=\"spinnerValue\" [strokeWidth]=3 *ngIf=\"state !== LoadingStates.Loading\" [@fadeInOut]>
    </mat-progress-spinner>
  </div>
  <div class=\"spinner-icon\" [@fadeInOut]>
    <i class=\"material-icons text-warning\" *ngIf=\"state == LoadingStates.Failure\">{{failureIcon || \'call\'}}</i>
    <i class=\"material-icons text-primary\" *ngIf=\"state == LoadingStates.Prompt\">more_horiz</i>
    <i class=\"material-icons text-success\" *ngIf=\"state == LoadingStates.Success\">check</i>
    <i class=\"material-icons text-warning\" *ngIf=\"state == LoadingStates.Warning\">{{failureIcon || \'priority_high\'}}</i>
  </div>
</div>

<div [ngSwitch]=\"state\">
  <div class=\"clickable\" *ngSwitchCase=\"LoadingStates.Success\" [@fadeInOut] (click)=\"genericAction()\">
  </div>
  <div class=\"content\" *ngSwitchCase=\"LoadingStates.Warning\">
    <p class=\"headline text-uppercase text-warning\">
      {{warningText || \'Warning\'}}
    </p>
  </div>
  <div class=\"content clickable\" *ngSwitchCase=\"LoadingStates.Failure\" (click)=\"genericAction()\" [@fadeInOut]>
    <p class=\"headline text-uppercase text-warning\">
      {{warningText || \'Call\'}}
    </p>
  </div>
  <div *ngSwitchCase=\"LoadingStates.Loading\">
    <div [@fadeInOut] [class.login-loading]=\"!!loadingText\">
      <div class=\"spinner-wrapper pt-5\">
        <mat-spinner class=\"spinner-loading\" [strokeWidth]=3></mat-spinner>
      </div>
    </div>
    <div class=\"content\">
      <p class=\"headline text-uppercase\">
        {{loadingText}}
      </p>
    </div>
  </div>
</div>

如果您对如何解决此问题有更多见解，我们将不胜感激！

更新 2022.01.14

loading-indicator.component.html，但更重要的是，整个 Angular 8 Web 应用程序利用Ben Nadal\'s blog 描述的这种预引导加载屏幕技术。
我的文本编辑器是 VS Code 和 Windows 10 Pro，我的网络浏览器是 Chrome 版本 97.0.4692.71。也就是说，我在 EDGE 和 Brave 浏览器上也看到过这个问题。

您可以粘贴loading-indicator.component 的代码吗？ html 和 ts。
完毕。请看上面。
你有没有机会创造一个可运行minimal reproducible example 在 codesanbox.io 或类似网站上？理想情况下，它不应该包含您的整个项目，而足以重现错误。这与一个特定的指令或组件有关（它们是在 div 元素上创建上下文的那些）。您可以尝试通过逐渐从模块中删除组件（并在模板中注释掉它们的标签）来确定其来源。从一个一个地消除模块开始。
请注意，在当前形式下，您的问题无法回答，因为无法检查错误、缩小其来源或测试潜在的修复。
我也不确定这是否会破坏构建，但在组件标记中，@fadeInOut 动画被保留为单向绑定，没有表达式。我会简单地将其保留为<div class=\"spinner-icon\" [@fadeInOut]>....</div>（这适用于所有使用它而不使用表达式的地方）。鉴于提供的信息，这是唯一让我觉得奇怪的事情。否则，我同意我们需要更多信息。

标签： javascript angular typescript webpack angular2-aot

【解决方案1】：

这是你真的不知道该怎么做的时刻之一……手头的 Angular 8 项目停止了无中生有的编译。它在同一天工作得很好哈！ Chrome 开发工具中的控制台（也在 Firefox 或 Edge 浏览器开发工具上）没有提供更多提示，并且在任何地方都没有可用的答案。那么，你知道什么真正为我解决了这个问题吗？

npm ci

安装一个干净的项目

描述这个命令类似于 npm install，除了它的意思用于自动化环境，例如测试平台，持续集成和部署——或者任何你需要的情况想要确保您正在对依赖项进行全新安装。

我注意到的不同之处在于它对yarn.lock 文件更新包版本进行了很多更改。

【讨论】：

【解决方案2】：

对我来说，类似的问题得到了解决

从 VsCode 中删除扩展“Angular 语言服务”
删除节点模块并重新安装它们。

【讨论】：