web-dev-qa-db-ja.com

合成プロパティ@stateが見つかりました。アプリケーションに「BrowserAnimationsModule」または「NoopAnimationsModule」のいずれかを含めてください

アプリケーションにアニメーションを追加すると、このエラーが発生します。

私が見つかりました： Angular 4-BrowserAnimationsModuleまたはNoopAnimationsModule をインポートします。 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

何が欠けているのでしょうか？

edit：この質問は、リンクした質問とまったく同じように見え、さまざまな答えがあります。それらを通過しても助けにはならなかったので、私は見落としているものを求めています。

edit2：私もチェックしました BrowserAnimationsModuleが404をスローするインポート-SystemJS Configの問題？ 同じソリューションを目的としていますAngularですでに名前が付けられている4-BrowserAnimationsModuleをインポート...（上）

edit3：コメントのとおり：BrowserModuleとBrowserAnimationsModuleをインポートしました。上記のコードセクションは、それを反映するように更新されました。

edit4：アプリケーションの子モジュールにアニメーションがあるので、3つのバリアントをすべて試しました。ルートモジュールでインポートを実行し、子モジュールと両方のインポート。

edit5：npmが古いパッケージバージョンを確認し、 を読んで、angular2バージョンを最新に更新する方法 、このバグについて見つけました： npm update --saveはdevDependenciesを依存関係として複製します 。私は常にnpm update --saveでパッケージを更新していることに気付きました。そのため、多くのパッケージが古くなっています。悲しいことに、それらはup2dateですが、まだ機能していません。

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
angularanimation
9
Worp

以下を追加してapp.module.tsをインポートします

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

コンポーネントの1つでアニメーションを使用する場合は、@Componentデコレーターにanimationsエキストラプロパティを追加する必要があります。

たとえば、コンポーネントにslideInDownAnimation定数がある場合、 公式ドキュメント で説明されているように、次のようになります。

// 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';

    // ...
}
4
Francois Stock

モジュールのインポートがないためではなく、エラーがスローされることを理解しました：

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が指摘した のように、参照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を含めたため）。

1
CPHPython

また、BrowserAnimationsModuleをインポートした後もこのエラーが継続的に発生し、animations: []メタデータもコンポーネントに追加していました。まだこのエラーが発生していましたが、アニメーションメタデータを間違ったコンポーネントに追加したことがわかりました。

正しいコンポーネントにアニメーションメタデータを追加すると、andが正しくインポートされ、BrowserAnimationsModuleエラーはなくなりました。

明らかに、あなたはすでにこれを試したことがあるかもしれませんが、私がこの答えを追加したかったのは、誰かが自分の問題を理解しようとしてこの質問に来たときに（私がしたように）この答えが表示され、コードを再確認できるようにするためです。

1
Justin

私の場合、コンポーネントがありました：

    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 { }

参考になれば幸いです。

0
Jviaches

上記のバージョン4に統合されたアニメーションモジュールを含む@ angular/core @ 2.4.5の古いバージョンを試してください。アニメーションには独自のモジュールがあります。

同じ問題に直面していたすべての構成で、githubからangular-cli、angular2-cli、angular-seedを使用しようとしました。

そこで、ドキュメントで提供されているサンプルコードをダウンロードし、その上に私のアプリを開発しました。その例からpackage.jsonを参照し、それに取り組む前に必要な変更を行ってください。

0
Srikanth Sharma