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

Question

我无法在 app.module.shared 文件中导入@angular/animations ： 当我在 app.module.browser 文件中导入@angular/animations ，动画不起作用。

在 angular 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 引用，比如document和window 。

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

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

所以你不能在服务器和共享模块上添加 DOM 引用。

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