angular - 'Nájdená syntetická vlastnosť @panelState. Prosím, zahrňte do svojej aplikácie buď "BrowserAnimationsModule" alebo "NoopAnimationsModule".'

Vylepšil som projekt Angular 4 pomocou angular-seed a teraz dostávam chybu

Nájdená syntetická vlastnosť @panelState. Do svojej aplikácie prosím zahrňte buď „BrowserAnimationsModule“ alebo „NoopAnimationsModule“.

Ako to môžem opraviť? Čo presne mi hovorí chybové hlásenie?

Odpoveď č. 1

Uistite sa, že balík @angular/animations je nainštalovaný (napr. spustením npm install @angular/animations). Potom vo vašom súbore app.module.ts

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

@NgModule({
  ...,
  imports: [
    ...,
    BrowserAnimationsModule
  ],
  ...
})

Odpoveď č. 2

Táto chybová správa je často zavádzajúca.

Možno ste zabudli importovať BrowserAnimationsModule. Ale to nebol môj problém. Importoval som BrowserAnimationsModule v hlavnom AppModule, ako by mal robiť každý.

Problém bol niečo úplne nesúvisiace s modulom. Animoval som *ngIf v šablóne komponentu, ale zabudol som to spomenúť v @Component.animations pre triedu komponentu.

@Component({
  selector: '...',
  templateUrl: './...',
  animations: [myNgIfAnimation] // <-- Don't forget!
})

Ak v šablóne použijete animáciu, musíte túto animáciu uviesť aj v metadátach animations komponentu ... pri každom použití.

Odpoveď č. 3

Ak niekto hľadá riešenie pre toto pri použití samostatnej komponenty, pridajte toto do vášho súboru main.ts

import { importProvidersFrom } from '@angular/core';

bootstrapApplication(AppComponent,{
  providers:[importProvidersFrom([BrowserAnimationsModule])]
});

alebo použiť

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

 bootstrapApplication(AppComponent, {
        providers: [
          provideAnimations()
        ]
  })

Zdroj: Ako pridať BrowserAnimationsModule alebo NoopAnimationsModule do nezávislej komponenty?

Odpoveď č. 4

Narazil som na podobné problémy, keď som sa pokúsil použiť BrowserAnimationsModule. Nasledujúce kroky vyriešili môj problém:

  1. Odstráňte adresár node_modules
  2. Vyčistite svoju vyrovnávaciu pamäť balíčkov pomocou npm cache clean
  3. Spustite jeden z týchto dvoch príkazov uvedených tu na aktualizáciu vašich existujúcich balíkov

Ak zažijete chyby 404 ako

http://.../node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations

pridajte nasledujúce položky do map vo vašom system.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'

naveedahmed1 poskytol riešenie na tento problém na GitHube.

Súvisiace články