Angular Material on an Ionic existing project(made in Ionic/Angular))をインストールしようとしています
npm install –save @ angular/material @ angular/cdk @ angular/animationse
しかし、アプリケーションを「提供」すると、次のエラーが発生します。
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';
これは私の「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"
]
}
}
そして「イオン情報」
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
エラーをグーグルで試しましたが、解決策は見つかりませんでした。誰かが私の同じ問題を抱えていましたか?
私はこのソリューションをGitHubで見つけました:
https://github.com/storybookjs/storybook/issues/9463#issuecomment-574693419
だから私は交換しました
get players(): AnimationPlayer[];
get totalTime(): number;
と
readonly players: AnimationPlayer[];
readonly totalTime: number;
そしてそれはうまくいった!
@Edrik、はい、私は解決策を書きます(誰か他の人が同じ問題に直面した場合のために)。マテリアル9をアンインストールして8.2.3にダウングレードしましたが、現在は正常に動作しています。 「エラー」を認識するのにしばらく時間がかかりましたが、今はすべて問題ありません。