Importing BrowserAnimationsModule breaks my .NET Core & Angular app

Question

I've been browsing SO and various other sites for about 4 hours now trying to figure out how to fix this, but I can't seem to find any solution that allows me to load the page, other than a solution that breaks prerender.

it was suggested to change:

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

to

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

This will result in the page loading, but it breaks prerendering and (over time) seems to cause weird artifacts on the site (for example, my secondary nav-menu loading without styles)

The error I'm getting:

Exception: Call to Node module failed with error: ReferenceError: document is not defined
at DefaultDomRenderer2.module.exports.DefaultDomRenderer2.selectRootElement (D:\_angular\ngageonline\ClientApp\dist\vendor.js:22930:72)
at BaseAnimationRenderer.selectRootElement (D:\_angular\ngageonline\ClientApp\dist\main-server.js:11230:106)
at createElement (D:\_angular\ngageonline\ClientApp\dist\vendor.js:14280:23)
at createViewNodes (D:\_angular\ngageonline\ClientApp\dist\vendor.js:17260:44)
at createRootView (D:\_angular\ngageonline\ClientApp\dist\vendor.js:17189:5)
at Object.createProdRootView [as createRootView] (D:\_angular\ngageonline\ClientApp\dist\vendor.js:17874:12)
at ComponentFactory_.module.exports.ComponentFactory_.create (D:\_angular\ngageonline\ClientApp\dist\vendor.js:14966:46)
at ComponentFactoryBoundToModule.module.exports.ComponentFactoryBoundToModule.create (D:\_angular\ngageonline\ClientApp\dist\vendor.js:8440:29)
at ApplicationRef_.module.exports.ApplicationRef_.bootstrap (D:\_angular\ngageonline\ClientApp\dist\vendor.js:9870:57)
at D:\_angular\ngageonline\ClientApp\dist\vendor.js:9653:81

I've tried updating as much as possible, but even with the latest version of Angular, the problem is the same (upgraded from 4.1.2 to 4.3.5).

I'm running Angular inside .NET Core project <TargetFramework>netcoreapp1.1.1</TargetFramework> and there are not all that many tutorials about it. Since I'm new to Angular with .NET Core, there many things that are slightly different from a regular Angular app's setup and confuse me enough to keep me busy for a while, but this seems to be completely beyond me.

package.json

{
  "name": "ngageonline",
  "version": "0.0.0",
  "dependencies": {
    "@angular/animations": "^4.3.5",
    "@angular/common": "^4.3.5",
    "@angular/compiler": "^4.3.5",
    "@angular/compiler-cli": "^4.3.5",
    "@angular/core": "^4.3.5",
    "@angular/forms": "^4.3.5",
    "@angular/http": "^4.3.5",
    "@angular/platform-browser": "^4.3.5",
    "@angular/platform-browser-dynamic": "^4.3.5",
    "@angular/platform-server": "^4.3.5",
    "@angular/router": "^4.3.5",
    "@types/node": "7.0.18",
    "angular2-chartjs": "^0.2.0",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^2.0.5",
    "aspnet-webpack": "^1.0.29",
    "awesome-typescript-loader": "3.1.3",
    "bootstrap": "3.3.7",
    "chartjs": "^0.3.24",
    "css": "2.2.1",
    "css-loader": "0.28.1",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.0",
    "file-loader": "0.11.1",
    "font-awesome": "^4.7.0",
    "html-loader": "0.4.5",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "preboot": "4.5.2",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.3",
    "style-loader": "0.17.0",
    "to-string-loader": "1.1.5",
    "typescript": "^2.4.2",
    "url-loader": "0.5.8",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.0",
    "webpack-merge": "4.1.0",
    "zone.js": "0.8.10"
  },
  "devDependencies": {
    "@angular/cli": "^1.3.1",
    "@angular/compiler-cli": "^4.3.5"
  }
}

relevant parts of app.module.ts :

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';

export const sharedConfig: NgModule = {
    bootstrap: [AppRootComponent],
    declarations: [
        ...
    ],
    imports: [
        ...
        BrowserModule,
        BrowserAnimationsModule
    ],
    providers: [
        ...
    ]
};

I'd love to get this running again with Angular Animations without losing the ability to prerender. I hope you guys can point me in the right direction. Please let me know if you need anymore information.

app.module.ts is my app.module.client.ts. I renamed it (and updated code where needed) to get Angular-CLI file generation to work — nGAGE, Sep 26 '17 at 19:47
I'am not familiar with Angular-CLI but, Since you have sharedconfig, you must have client and server app modules seperated. Removing BrowserAnimationsModule from shared config and adding it to the only client AppModule resolved the problem for me. — Okan Aslankan, Sep 26 '17 at 20:08
Like I said... app..module.ts == app.module.client.ts. I just renamed it. And altered the code in relevant places so it knows the new filename. Other than that, there's no change. However, I have already restarted the entire project and haven't reached the point yet, where I want to include animations. I'm hoping that I will not have the same issue on the new project. — nGAGE, Sep 28 '17 at 07:40
@mzain Sorry, no. I've started a new project and I went a different way with the project. So I didn't encounter this issue. I'm not using BrowserAnimationModule. — nGAGE, Oct 17 '17 at 16:10

Importing BrowserAnimationsModule breaks my .NET Core & Angular app

0 Answers0