web-dev-qa-db-fra.com

Un accesseur ne peut pas être déclaré dans un contexte ambiant

J'essaye d'installer Angular Material sur un Ionic projet existant (fait avec Ionic/Angular))

npm install –save @ angular/material @ angular/cdk @ angular/animationse

Mais lorsque je "sers" l'application, cela me donne cette erreur:

ERROR in node_modules/@angular/animations/browser/browser.d.ts:135:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 135     get players(): AnimationPlayer[];
[ng]             ~~~~~~~
[ng] node_modules/@angular/animations/browser/browser.d.ts:301:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng] 301     get totalTime(): number;
[ng]             ~~~~~~~~~
[ng] src/app/app.module.ts:16:52 - error TS2306: File 'C:/Users/William Manzato/Projects/ncr-error-codes-translator - Angular/node_modules/@angular/material/index.d.ts' is not a module.
[ng] 16 import { MatButtonModule, MatCheckboxModule } from '@angular/material';

Ceci est mon "app.module.ts"

import { NgModule,ElementRef, Renderer2, ViewChild, AfterViewInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { PhotoViewer } from '@ionic-native/photo-viewer/ngx';
import { File } from '@ionic-native/file/ngx';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatCheckboxModule } from '@angular/material';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCheckboxModule
  ],
  providers: [
    PhotoViewer,
    StatusBar,
    SplashScreen,
    File,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

"package.json"

{
  "name": "ncr-error-codes-translator",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^9.0.0",
    "@angular/cdk": "^9.0.0",
    "@angular/common": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/material": "^9.0.0",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@ionic-native/core": "^5.19.0",
    "@ionic-native/file": "^5.19.1",
    "@ionic-native/native-page-transitions": "^4.20.0",
    "@ionic-native/photo-viewer": "^5.19.1",
    "@ionic-native/splash-screen": "^5.19.0",
    "@ionic-native/status-bar": "^5.19.0",
    "@ionic/angular": "^4.11.7",
    "com-sarriaroman-photoviewer": "^1.2.4",
    "com.telerik.plugins.nativepagetransitions": "^0.6.5",
    "cordova-Android": "^8.1.0",
    "cordova-plugin-file": "^6.0.2",
    "core-js": "^2.6.11",
    "ionic-img-viewer": "^2.9.0",
    "rxjs": "^6.5.4",
    "tree-kill": "^1.2.2",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "^0.803.22",
    "@angular-devkit/core": "~8.1.2",
    "@angular-devkit/schematics": "~8.1.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@ionic/angular-toolkit": "^2.1.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.2.1",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.1.3",
    "cordova-plugin-splashscreen": "^5.0.3",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.1",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "TypeScript": "~3.5.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "Android_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "com-sarriaroman-photoviewer": {},
      "cordova-plugin-file": {},
      "com.telerik.plugins.nativepagetransitions": {}
    },
    "platforms": [
      "Android"
    ]
  }
}

et "info ionique"

Ionic:

   Ionic CLI                     : 5.4.13 (C:\Users\William Manzato\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.803.22
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : Android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 6 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.3.0

System:

   Android SDK Tools : 26.1.1 (C:\Users\William Manzato\AppData\Local\Android\Sdk)
   NodeJS            : v13.5.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.13.4
   OS                : Windows 10

J'ai essayé de rechercher l'erreur sur Google mais je n'ai trouvé aucune solution. Quelqu'un a-t-il eu mon même problème?

angularangular-materialionic5
4
William Manzato

Je suis tombé sur cette solution sur GitHub:

https://github.com/storybookjs/storybook/issues/9463#issuecomment-574693419

Alors j'ai remplacé

get players(): AnimationPlayer[];
get totalTime(): number;

avec

readonly players: AnimationPlayer[];
readonly totalTime: number;

Et ça a marché !!

1
pppai

@Edrik, oui, j'allais écrire la solution (car si quelqu'un d'autre est confronté au même problème). J'ai désinstallé le matériel 9 et rétrogradé à 8.2.3 et cela fonctionne bien maintenant. Il m'a fallu un certain temps pour reconnaître mon "erreur" mais tout va bien maintenant.

0
William Manzato