如何在 angular asp.net core 2 模板中使用@angular/animations？

Question

I can't import @angular/animations in app.module.shared file: When i import @angular/animations in app.module.browser file animations don't work.

What i need to do for use material animations in angular asp.net core 2 template?

Answer 1

I initially added the animations import into the app.module.shared file and I got the same error. To fix it I moved the import into the app.module.browser file.

This is how I left my module.browser:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppModuleShared } from './app.module.shared';
import { AppComponent } from './components/app/app.component';

@NgModule({
    bootstrap: [ AppComponent ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        AppModuleShared
    ],
    providers: [
        { provide: 'BASE_URL', useFactory: getBaseUrl }
    ]
})
export class AppModule {
}

export function getBaseUrl() {
    return document.getElementsByTagName('base')[0].href;
}

Example of using BrowserAnimationsModule: https://github.com/aspnet/JavaScriptServices/commit/c0c47e3def208873c470a524a826f8d235a5f9de

Answer 2

The error you posted is caused because @angular/animations uses DOM references, like document and window .

By default, ASP.NET Core MVC SPA apps created using the initial template will pre-render your Javascript code on serverside, as defined in your Index view.

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

So you can't add DOM references on server and shared modules.

You have to add @angular/animation to app.module.browser.ts and then use it on your submodules and/or components.