app.module.ts

Question

在我的应用程序中添加动画时出现此错误。

我找到了：Importing BrowserAnimationsModule Throws 404 - SystemJS Config Issue?。我将条目添加到systemjs.config.js：

'@angular/animations': 'node_modules/@angular/animations/bundles/animations.umd.min.js',
'@angular/animations/browser':'node_modules/@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js'

我将导入添加到app.module.ts（根模块）：

import { NgModule }         from '@angular/core';
import { BrowserModule }    from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    imports:      [
        BrowserModule,
        BrowserAnimationsModule,
    ],
    declarations: [
      ...
    ],
    bootstrap:    [
        AppComponent
    ],
    providers:    [
        ...
    ]
})
export class AppModule { }

我还安装了动画包：

npm install @angular/animations@latest --save

我可能会遗失什么？

修改我知道这个问题看起来非常像我链接的问题的完全重复，它有各种答案。虽然经过他们没有帮助，这就是为什么我要求我忽视的东西。

EDIT2： 我还检查了How to update the angular2 version to the latest，它针对Angular 4中已经命名的相同解决方案 - Import BrowserAnimationsModule ...（上图）

EDIT3： 正如评论所述：我导入了BrowserModule和BrowserAnimationsModule。上面的代码部分已更新以反映出来。

edit4： 由于我在我的应用程序的子模块中有动画，我尝试了所有三种变体：在根模块中执行导入，在子模块中导入并在两者中导入。

edit5： 我检查了npm过时的软件包版本，并阅读npm update --save duplicates devDependencies as dependencies，发现了这个bug：https://www.w3schools.com/tags/tag_center.asp。我意识到我一直在使用npm update --save更新我的软件包，这就是为什么许多软件包已经过时的原因。可悲的是现在他们已经上升了，但它仍然没有用。

Package         Current   Wanted   Latest  Location
@types/jasmine   2.5.36   2.5.36   2.5.52  kidzpointz
@types/node      6.0.78   6.0.78    8.0.1  kidzpointz
jasmine-core      2.4.1    2.4.1    2.6.4  kidzpointz
protractor       4.0.14   4.0.14    5.1.2  kidzpointz
rxjs              5.0.1    5.0.1    5.4.1  kidzpointz
systemjs        0.19.40  0.19.40  0.20.14  kidzpointz
tslint           3.15.1   3.15.1    5.4.3  kidzpointz
typescript        2.4.0    2.4.0    2.3.4  kidzpointz

Answer 1

添加以下导入您的app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';

Answer 2

如果您在其中一个组件中使用动画，则应向animations装饰器添加@Component额外属性。

例如，如果您的组件具有slideInDownAnimation常量，如the official documentation中所述，您将具有以下内容：

// others import ... 
import { slideInDownAnimation } from 'app/animations';

@Component({
    template: `...`,
    animations: [ slideInDownAnimation ] // this line is required
})
export class HeroDetailComponent implements OnInit {
    @HostBinding('@routeAnimation') routeAnimation = true;
    @HostBinding('style.display')   display = 'block';
    @HostBinding('style.position')  position = 'absolute';

    // ...
}

Answer 3

我现在了解到，抛出该错误不是由于缺少模块导入：

app.module.ts

无需在此处导入BrowserModule和BrowserAnimationsModule，如果您使用的是`AppRoutingModule，则可以稍后将其导入（ app-routing.module.ts ）。

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MyComponent } from './my/my.component';

@NgModule({
  declarations: [
    AppComponent,
    MyComponent,
  ],
  imports: [
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MyComponent } from './my/my.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/my' },
  { path: 'my', component: MyComponent,
    data: {animation: 'AnimationsPage'}, // to reference later in animations.ts
  }
];

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.ts

与François pointed out一样，引用animations: [ slideInAnimation ]是必需的：

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { slideInAnimation } from './animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [ slideInAnimation ] // adding the animation name here!
})

export class AppComponent {
  // ...
  prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData &&
           outlet.activatedRouteData['animation'];
  }
}

animations.ts

import {
  transition,
  trigger,
  // ...
} from '@angular/animations';

export const slideInAnimation = trigger('routeAnimation', [
  transition('* => AnimationsPage', [ // referenced in app-routing.module.ts
  // ...
]);

app.component.html

<!-- ... -->
<section [@routeAnimation]="prepareRoute(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</section>
<!-- ... -->

所以对我来说，唯一的原因就是缺少在组件中引用动画的原因（因为我一直都包含BrowserAnimationsModule）。

Answer 4

导入BrowserAnimationsModule后，我也不断收到此错误，并且还向组件中添加了animations: []元数据。我仍然遇到此错误，但事实证明我已将动画元数据添加到错误的组件中。

一旦我将动画元数据添加到正确的组件 ，并且已正确导入BrowserAnimationsModule，错误就会消失。

很显然，您可能已经尝试过此方法，但是我只是想添加此答案，以便当有人遇到此问题以试图解决他们的问题时（就像我一样），他们可能会看到此答案并仔细检查其代码。

Answer 5

尝试旧版本的@ angular / core @ 2.4.5，其中集成了动画模块在上面的版本4中，动画有自己独立的模块

我试图在我遇到同样问题的每个配置中使用angular-cli，angular2-cli，来自github的angular-seed。

所以我下载了文档中给出的示例代码，并在其上面开发了我的应用程序，现在正在运行。请参考该示例中的package.json并进行必要的更改。

Answer 6

在我的情况下，我有组件：

    import { Component, OnInit, AfterViewInit, Inject, ChangeDetectionStrategy } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { animate, state, style, transition, trigger } from '@angular/animations';


@Component({
  selector: 'app-map-show',
  templateUrl: './map-show.component.html',
  styleUrls: ['./map-show.component.css'],
  // changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [
    trigger('slide', [
      state('topState', style({ transform: 'translateY(50%)' })),
      state('bottomState', style({ transform: 'translateY(0)' })),
      transition('* => *', animate(300))
    ])
  ]
})
export class MapShowComponent implements OnInit {....}

还向app.module.ts添加了诀窍：

    import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MapShowComponent } from './map/map-show/map-show.component';

@NgModule({
  declarations: [
    AppComponent,
    MapShowComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我希望这会对某人有所帮助。

Answer 7

我刚刚发现我用div包装了原始ng自动完成功能，并且由于该原因而出现了错误。我删除了div，它工作正常

找到合成属性@state。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”

7 个答案:

app.module.ts

app-routing.module.ts

app.component.ts

animations.ts

app.component.html