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

Question

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

我需要做什么在角asp.net核心2模板中使用材料动画？

Answer 1

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

这是我离开了我的module.browser： https://github.com/aspnet/JavaScriptServices/commit/c0c47e3def208873c470a524a826f8d235a5f9de

Answer 2

您发布的造成的，因为@angular/animations使用DOM引用，就像文件和错误：

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的实例窗口。

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

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

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

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