Search code examples
angularasp.net-coretypeerrorwebpack-2

How do I resolve type errors using angular2 and aspnet core?


I used dotnet cli tool to create a new angular application and everything looks and works fine.

C:/..myprojectlocation> dotnet new angular

This creates a new folder and file structure with the angular application. After this, I go to the home.component and import AfterViewInit event from angular.

import { Component, AfterViewInit } from '@angular/core';

As well, I add the event handler:

ngAfterViewInit(): void {
    const inputs: NodeListOf<HTMLInputElement> =
                        document.getElementsByTagName("input");
}

When, I build my project it exceeds but when I refresh my page I get the following error at run-time.

An unhandled exception occurred while processing the request.

Exception: Call to Node module failed with error: Error: Uncaught (in 
   promise): ReferenceError: document is not defined
   ReferenceError: document is not defined

This feels like a fairly insignificant piece of code but I have encountered similar problems over and over as I try to interface with other modules. I can find seemingly similar issues on google none seem to have much direction to they are or how to fix them.

Could be related to HotModuleReplacement, Weback2, angular/universal, or typescript version. But, I honestly don't have many leads so I am stuck until I understand the issue.


Solution

  • Do you have something like this in your html?

    <app asp-prerender-module="xxxxxxxxx">Loading...</app>
    

    Try changing to

    <app asp-ng2-prerender-module="xxxxxxx">Loading...</app>