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

Question

我无法在app.module.shared文件中导入@angular/animations： 当我在app.module.browser文件中导入@angular/animations时，动画无法正常工作。

在角度asp.net core 2模板中使用素材动画我需要做些什么？

Answer 1

我最初将动画导入添加到app.module.shared文件中，我得到了同样的错误。为了解决这个问题，我将导入移动到了app.module.browser文件中。

这就是我离开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;
}

使用BrowserAnimationsModule的示例： https://github.com/aspnet/JavaScriptServices/commit/c0c47e3def208873c470a524a826f8d235a5f9de

Answer 2

您发布的错误是由@angular/animations使用DOM引用引起的，例如文档和窗口。

默认情况下，使用初始模板创建的ASP.NET Core MVC SPA应用程序将在服务器端预呈现您的Javascript代码，如索引视图中所定义。

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

因此，您无法在服务器和共享模块上添加DOM引用。

您必须将@ angular / animation添加到app.module.browser.ts，然后在子模块和/或组件上使用它。