title: Angular 8 ERROR Error: Unable to find context associated with [object HTMLDivElement]
body: <p>Just another day in the office, right? What once worked is no longer working. Yay!</p>
  <p>I am supporting an Angular 8 web application and attempting to kickstart localhost:4200.</p>
  <p>That said, the following error &quot;Unable to find context associated with [object HTMLDivElement]&quot; returns from Chrome DevTools after <code>npm run start</code> completes:</p>
  <p><strong>core.js</strong> file is: <code>webpack:///./node_modules/@angular/core/fesm2015/core.js</code> and kickstarting localhost uses <code>aot</code> (ahead of time compilation).</p>
  <p>From <strong>Chrome DevTools</strong>:</p>
  <p><a href="https://i.stack.imgur.com/S5eGY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S5eGY.png" alt="enter image description here" /></a></p>
  <p>I have tried multiple options (e.g. polyfill updates, assigning a new target to <code>tsconfig.json</code>, npm packages for custom elements, etc.) from these previous resources with no luck:</p>
  <ul>
  <li><a href="https://github.com/angular/angular/issues/24556" rel="nofollow noreferrer">https://github.com/angular/angular/issues/24556</a></li>
  <li><a href="https://stackoverflow.com/questions/50553449/angular-elements-error-failed-to-construct-htmlelement/52702874#52702874">Angular elements error . &quot;Failed to construct &#39;HTMLElement ...&#39;</a></li>
  <li><a href="https://github.com/rangle/augury/issues/1464" rel="nofollow noreferrer">https://github.com/rangle/augury/issues/1464</a></li>
  </ul>
  <p>Subsequently, I've done some of the more known lifehacks to date, including:</p>
  <ul>
  <li>Uninstall node_modules in the existing local project, then reinstall.</li>
  <li>Pull down a new local repository and run <code>npm install</code>.</li>
  <li>Uninstall everything on my operating system (NodeJS, Angular CLI), then reinstall.</li>
  </ul>
  <p><strong>package.json</strong> is as follows:</p>
  <pre class="lang-json prettyprint-override"><code>  &quot;dependencies&quot;: {
      &quot;@agm/core&quot;: &quot;^1.0.0-beta.5&quot;,
      &quot;@angular-devkit/build-angular&quot;: &quot;^0.803.8&quot;,
      &quot;@angular/animations&quot;: &quot;8.2.9&quot;,
      &quot;@angular/cdk&quot;: &quot;8.2.2&quot;,
      &quot;@angular/common&quot;: &quot;8.2.9&quot;,
      &quot;@angular/compiler&quot;: &quot;8.2.9&quot;,
      &quot;@angular/core&quot;: &quot;8.2.9&quot;,
      &quot;@angular/forms&quot;: &quot;8.2.9&quot;,
      &quot;@angular/http&quot;: &quot;6.0.7&quot;,
      &quot;@angular/material&quot;: &quot;8.2.2&quot;,
      &quot;@angular/platform-browser&quot;: &quot;8.2.9&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;8.2.9&quot;,
      &quot;@angular/router&quot;: &quot;8.2.9&quot;,
      &quot;@ngrx/core&quot;: &quot;^1.2.0&quot;,
      &quot;@ngrx/effects&quot;: &quot;^8.3.0&quot;,
      &quot;@ngrx/entity&quot;: &quot;^8.3.0&quot;,
      &quot;@ngrx/store&quot;: &quot;^8.3.0&quot;,
      &quot;@ngrx/store-devtools&quot;: &quot;^8.3.0&quot;,
      &quot;agm-direction&quot;: &quot;^0.7.5&quot;,
      &quot;angulartics2&quot;: &quot;6.2.0&quot;,
      &quot;bootstrap&quot;: &quot;^4.1.1&quot;,
      &quot;core-js&quot;: &quot;^2.5.7&quot;,
      &quot;jasmine-marbles&quot;: &quot;^0.4.1&quot;,
      &quot;jquery&quot;: &quot;^3.3.1&quot;,
      &quot;ldclient-js&quot;: &quot;^2.8.0&quot;,
      &quot;material-design-icons&quot;: &quot;^3.0.1&quot;,
      &quot;moment&quot;: &quot;^2.22.2&quot;,
      &quot;ng2-signalr&quot;: &quot;^6.0.0&quot;,
      &quot;roboto-fontface&quot;: &quot;^0.9.0&quot;,
      &quot;rxjs&quot;: &quot;^6.5.3&quot;,
      &quot;signalr&quot;: &quot;^2.3.0&quot;,
      &quot;typeface-roboto-mono&quot;: &quot;0.0.75&quot;,
      &quot;vanilla-text-mask&quot;: &quot;^5.1.1&quot;,
      &quot;zone.js&quot;: &quot;^0.9.1&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@angular/cli&quot;: &quot;8.3.8&quot;,
      &quot;@angular/compiler-cli&quot;: &quot;8.2.9&quot;,
      &quot;@angular/language-service&quot;: &quot;8.2.9&quot;,
      &quot;@angularclass/hmr&quot;: &quot;^2.1.3&quot;,
      &quot;@types/jasmine&quot;: &quot;^2.8.8&quot;,
      &quot;@types/jasminewd2&quot;: &quot;~2.0.2&quot;,
      &quot;@types/node&quot;: &quot;^6.0.114&quot;,
      &quot;codelyzer&quot;: &quot;^4.4.2&quot;,
      &quot;grunt&quot;: &quot;^1.0.3&quot;,
      &quot;grunt-bump&quot;: &quot;^0.8.0&quot;,
      &quot;jasmine-core&quot;: &quot;~2.8.0&quot;,
      &quot;jasmine-spec-reporter&quot;: &quot;~4.2.1&quot;,
      &quot;karma&quot;: &quot;^2.0.4&quot;,
      &quot;karma-chrome-launcher&quot;: &quot;~2.2.0&quot;,
      &quot;karma-coverage-istanbul-reporter&quot;: &quot;^1.4.3&quot;,
      &quot;karma-jasmine&quot;: &quot;^1.1.2&quot;,
      &quot;karma-jasmine-html-reporter&quot;: &quot;^0.2.2&quot;,
      &quot;protractor&quot;: &quot;~5.1.2&quot;,
      &quot;ts-node&quot;: &quot;~4.1.0&quot;,
      &quot;tslint&quot;: &quot;~5.9.1&quot;,
      &quot;typescript&quot;: &quot;3.5.3&quot;
    },
  </code></pre>
  
  <p><strong>tsconfig.json</strong> is as follows:</p>
  <pre class="lang-json prettyprint-override"><code>  &quot;compilerOptions&quot;: {
      &quot;outDir&quot;: &quot;./dist/out-tsc&quot;,
      &quot;sourceMap&quot;: true,
      &quot;declaration&quot;: false,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;emitDecoratorMetadata&quot;: true,
      &quot;experimentalDecorators&quot;: true,
      &quot;target&quot;: &quot;es5&quot;,
      &quot;typeRoots&quot;: [
        &quot;node_modules/@types&quot;
      ],
      &quot;lib&quot;: [
        &quot;es2017&quot;,
        &quot;dom&quot;
      ]
    },
  </code></pre>
  
  <p><strong>tsconfig.app.json</strong> is as follows:</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;extends&quot;: &quot;../tsconfig.json&quot;,
    &quot;compilerOptions&quot;: {
      &quot;outDir&quot;: &quot;../out-tsc/app&quot;,
      &quot;baseUrl&quot;: &quot;./&quot;,
      &quot;module&quot;: &quot;es2015&quot;,
      &quot;types&quot;: []
    },
    &quot;exclude&quot;: [
      &quot;test.ts&quot;,
      &quot;**/*.spec.ts&quot;
    ]
  }
  </code></pre>
  
  <p>Per SO comment request for <code>.ts</code> and <code>.html</code> (loading-indicator):</p>
  <pre class="lang-js prettyprint-override"><code>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 &quot;Failure&quot; 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&lt;ConfirmationModalStates&gt;
    // The headline text to show when warning
    @Input() warningText: string
    @Output() failureClick = new EventEmitter&lt;void&gt;()
    @Output() successfulClick = new EventEmitter&lt;void&gt;()
  
    // 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(() =&gt; {
        this.spinnerValue += 15
        if (this.spinnerValue &gt;= 100) {
          clearInterval(myTimeout)
        }
      }, 90)
    }
  
    private initSubscriptions() {
      this.stateStream$.pipe(
        takeWhile(() =&gt; this.subscriptionsAreActive)
      ).subscribe(newState =&gt; {
        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()
        }
      })
    }
  }
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;text-center&quot; [ngClass]=&quot;{
        'clickable': (state === LoadingStates.Success || state === LoadingStates.Failure)
  }&quot; (click)=&quot;genericAction()&quot;&gt;
    &lt;div class=&quot;spinner-wrapper&quot;&gt;
      &lt;mat-progress-spinner [ngClass]=&quot;{
        'spinner-fail': state == LoadingStates.Failure,
        'spinner-prompt': state == LoadingStates.Prompt,
        'spinner-success': state == LoadingStates.Success,
        'spinner-warn': state == LoadingStates.Warning
      }&quot; [mode]=&quot;'determinate'&quot; [value]=&quot;spinnerValue&quot; [strokeWidth]=3 *ngIf=&quot;state !== LoadingStates.Loading&quot; [@fadeInOut]&gt;
      &lt;/mat-progress-spinner&gt;
    &lt;/div&gt;
    &lt;div class=&quot;spinner-icon&quot; [@fadeInOut]&gt;
      &lt;i class=&quot;material-icons text-warning&quot; *ngIf=&quot;state == LoadingStates.Failure&quot;&gt;{{failureIcon || 'call'}}&lt;/i&gt;
      &lt;i class=&quot;material-icons text-primary&quot; *ngIf=&quot;state == LoadingStates.Prompt&quot;&gt;more_horiz&lt;/i&gt;
      &lt;i class=&quot;material-icons text-success&quot; *ngIf=&quot;state == LoadingStates.Success&quot;&gt;check&lt;/i&gt;
      &lt;i class=&quot;material-icons text-warning&quot; *ngIf=&quot;state == LoadingStates.Warning&quot;&gt;{{failureIcon || 'priority_high'}}&lt;/i&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div [ngSwitch]=&quot;state&quot;&gt;
    &lt;div class=&quot;clickable&quot; *ngSwitchCase=&quot;LoadingStates.Success&quot; [@fadeInOut] (click)=&quot;genericAction()&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;content&quot; *ngSwitchCase=&quot;LoadingStates.Warning&quot;&gt;
      &lt;p class=&quot;headline text-uppercase text-warning&quot;&gt;
        {{warningText || 'Warning'}}
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;content clickable&quot; *ngSwitchCase=&quot;LoadingStates.Failure&quot; (click)=&quot;genericAction()&quot; [@fadeInOut]&gt;
      &lt;p class=&quot;headline text-uppercase text-warning&quot;&gt;
        {{warningText || 'Call'}}
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div *ngSwitchCase=&quot;LoadingStates.Loading&quot;&gt;
      &lt;div [@fadeInOut] [class.login-loading]=&quot;!!loadingText&quot;&gt;
        &lt;div class=&quot;spinner-wrapper pt-5&quot;&gt;
          &lt;mat-spinner class=&quot;spinner-loading&quot; [strokeWidth]=3&gt;&lt;/mat-spinner&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;content&quot;&gt;
        &lt;p class=&quot;headline text-uppercase&quot;&gt;
          {{loadingText}}
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If you have additional insights as to how to resolve this, that'd be appreciated!</p>
  <p><strong>UPDATE 2022.01.14</strong></p>
  <ul>
  <li><p>The loading-indicator.component.html, but more important, the entire Angular 8 web app leverages this pre-bootstrap loading screen technique as described by <a href="https://www.bennadel.com/blog/3151-revisited-creating-an-event-driven-pre-bootstrap-loading-screen-in-angular-2-0-0.htm" rel="nofollow noreferrer">Ben Nadal's blog</a>.</p>
  </li>
  <li><p>My text editor is VS Code alongside Windows 10 Pro with my web browser being Chrome Version 97.0.4692.71. That said, I've seen this issue on EDGE and Brave browser as well.</p>
  </li>
  </ul>