如何在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，然後將其用於子模塊和/或組件。