"Call to Node module failed with error"s with Angular2 & ASP.NET

I’m getting an intermittent exception with my ASP.NET Core Angular 2 web-app:

Exception: Call to Node module failed with error: Error: This method is not implemented in Parse5DomAdapter: Parse5DomAdapter#getCookie
 at _notImplemented (D:\Projects\MyProject\MyProject\node_modules\angular2-platform-node\parse5-adapter.js:22:12)
 at Parse5DomAdapter.getCookie (D:\Projects\MyProject\MyProject\node_modules\angular2-platform-node\parse5-adapter.js:641:15)
 at CookieXSRFStrategy.configureRequest (D:\Projects\MyProject\MyProject\node_modules\@angular\http\bundles\http.umd.js:1597:92)
 at XHRBackend.createConnection (D:\Projects\MyProject\MyProject\node_modules\@angular\http\bundles\http.umd.js:1637:32)
 at httpRequest (D:\Projects\MyProject\MyProject\node_modules\@angular\http\bundles\http.umd.js:1975:24)
 at Http.get (D:\Projects\MyProject\MyProject\node_modules\@angular\http\bundles\http.umd.js:2086:20)
 at ApiService.getChatMessages (D:\Projects\MyProject\MyProject\ClientApp\dist\main-server.js:557:20)
 at ChatPageComponent.ngOnInit (D:\Projects\MyProject\MyProject\ClientApp\dist\main-server.js:513:23)
 at AppView._View_ChatPageComponent_Host0.detectChangesInternal (ChatPageComponent_Host.ngfactory.js:30:86)
 at AppView.detectChanges (D:\Projects\MyProject\MyProject\node_modules\@angular\core\bundles\core.umd.js:9566:18)

MoveNext

I believe it’s something to do with the MVC views, as the error shows:

MoveNext in Index.cshtml

[email protected]{
2.    ViewData["Title"] = "Home Page";
3.}
4.
5.<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>
6.
7.<script src="~/dist/vendor.js" asp-append-version="true"></script>
[email protected] scripts {

Which is code in my index.cshtml.

It seems to happen early on after launching the project. It all either works fine, or after loading the home page when any navagation is performed it throws an error.

I can force it to produce the error. I have 4 navagation destinations:

http://localhost:49954/home
http://localhost:49954/counter
http://localhost:49954/fetch-data
http://localhost:49954/chat-page

That were all set up from the Visual Studio Angular 2 template. If I refresh home, everything is fine, and if it’s had a chance to load for a while I can navagate to the other pages. However if I type in the url for any of the other pages, it produces this error every single time.

Edit: Also, interestingly, it produces a slightly different error with http://localhost:49954/counter. In my counter page I use an Angular Material Design component:

<div class="mine">
    <h2>
        Counter Test
    </h2>
    <p>This is a simple example of an Angular 2 component.</p>
    <p>Current count:<strong>{{ currentCount }}</strong></p>
    <button md-raised-button (click)="incrementCounter()">Increment</button>
</div>

and instead of the above error, it’s a similar Call to Node module failed error, but in material design:

Exception: Call to Node module failed with error: Error: Uncaught (in promise): ReferenceError: document is not defined
 ReferenceError: document is not defined
 at new RippleRenderer (D:\Projects\MyProject\MyProject\node_modules\@angular\material\material.umd.js:193:31)

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

This worked for me. Change:

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

to

<app asp-ng2-prerender-module="ClientApp/dist/main-server">Loading...</app>

in the index.html

Solution 2

Edit: A few months later, and this is pretty out of date and there’s a better solution posted by Jimmy. So moving the “correct” marker to his answer.

It seems to be an issue with the pre-rendering as Angular 2 Material is incompatible with Angular Universal.

I changed:

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

to:

<app class="container" style="display: block;">Loading...</app>

in the index.cshtml and it functions fine now (with a “Loading…” untill fully loaded).

Solution 3

To be a little more clear, edit Views/Home/index.html and change the following line:

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

to the following

<app asp-ng2-prerender-module="ClientApp/dist/main-server">Loading...</app>

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply