如何在 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 ，然后在您的子模塊和/或組件上使用它。