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

【问题标题】：How to use @angular/animations in angular asp.net core 2 template?如何在 angular asp.net core 2 模板中使用@angular/animations？
【发布时间】：2017-09-26 07:02:26
【问题描述】：

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

在 angular asp.net core 2 模板中使用材质动画需要做什么？

【问题讨论】：

你必须从@angular/platform-browser/animations 导入BrowserAnimationsModule 或NoopAmimationsModule 没有动画。
@Edric 我将 BrowserAnimationsModule 模块导入到文件 app.module.browser 和 app.module.shared 中。当我在文件 app.module.shared 中导入模块时，会发生错误。当我在 app.module.browser 文件中导入模块时，动画不起作用。
您的完整错误堆栈跟踪是什么？把它贴在某个地方。
@Edric dropmefiles.com/P4sFz html 文件完全错误
抱歉，如果没有实际代码，我仍然无法解决您的问题。

标签： asp.net angular asp.net-core angular-material

【解决方案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

【讨论】：

【解决方案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，然后在您的子模块和/或组件上使用它。

【讨论】：