I’m trying to make an app with angular Ionic + capacitor. One of the components must be able to read NFC messages.
if i try ionic serve on visual studio code, it works just fine. but, when i try ‘run app‘ on Android Studio i got 9 errors:
Build anrdoid: failed At 25/07/2024 12:54 with 9 errors, 2 warnings
warning: Using flatDir should be avoided because it doesn't support any meta-data formats.
warning: SDK processing. This version only understands SDK XML versions up to 3 but an SDK XML file of version 4 was encountered. This can happen if you use versions of Android Studio and the command-line tools that were released at different times.
Errors:
> Task :capacitor-cordova-android-plugins:compileDebugJavaWithJavac
C:UsersManuelDesktopSeminario-UTNFrontendSUBD-transportandroidcapacitor-cordova-android-pluginssrcmainjavacomchariotsolutionsnfcpluginNfcPlugin.java:550: error: cannot find symbol
nfcAdapter.setNdefPushMessage(p2pMessage, getActivity());
^
symbol: method setNdefPushMessage(NdefMessage,Activity)
location: variable nfcAdapter of type NfcAdapter
plus 8 more just like that one and
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: C:UsersManuelDesktopSeminario-UTNFrontendSUBD-transportandroidcapacitor-cordova-android-pluginssrcmainjavacordovapluginsDiagnostic.java uses unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
9 errors
> Task :capacitor-cordova-android-plugins:compileDebugJavaWithJavac FAILED
Since I am a student and I have no previous experience working with Ionic and my experience with Angular is very limited, I will try to comment step by step on what I did.
Searching the internet I found this: https://www.npmjs.com/package/@awesome-cordova-plugins/nfc
so I did the following:
npm install @awesome-cordova-plugins/core
npm install @awesome-cordova-plugins/nfc
npm install @ionic-native/core
npm install @ionic-native/nfc
npm install phonegap-nfc
app.module.ts:
import { NFC } from '@awesome-cordova-plugins/nfc/ngx';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
providers: [
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptorService, multi: true },
NFC
],
bootstrap: [AppComponent],
})
export class AppModule {}
and in NfcReaderComponent:
import { NFC } from '@awesome-cordova-plugins/nfc/ngx';
...
constructor(
private nfc: NFC, <--
private ticketService: TicketService,
private transportService: TransportService,
private router: Router
) { }
...
ionic cap add android
ionic build
npx cap sync
ionic cap open android
here on android studio is where i got the problems with capacitor-cordova-android-plugins
i try removing and re instaling both node_modules and android.
package.json:
{
"name": "SUBD-transport",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "ng lint"
},
"private": true,
"dependencies": {
"@angular/animations": "^18.0.0",
"@angular/common": "^18.0.0",
"@angular/compiler": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/forms": "^18.0.0",
"@angular/platform-browser": "^18.0.0",
"@angular/platform-browser-dynamic": "^18.0.0",
"@angular/router": "^18.0.0",
"@awesome-cordova-plugins/core": "^6.8.0",
"@awesome-cordova-plugins/nfc": "^6.8.0",
"@capacitor-community/barcode-scanner": "^4.0.1",
"@capacitor/android": "^6.1.1",
"@capacitor/app": "6.0.0",
"@capacitor/core": "6.1.0",
"@capacitor/geolocation": "^6.0.0",
"@capacitor/haptics": "6.0.0",
"@capacitor/keyboard": "6.0.1",
"@capacitor/status-bar": "6.0.0",
"@capacitor/storage": "^1.2.5",
"@ionic-native/core": "^5.36.0",
"@ionic-native/diagnostic": "^5.36.0",
"@ionic-native/nfc": "^5.36.0",
"@ionic/angular": "^8.0.0",
"@zxing/library": "^0.21.2",
"angularx-qrcode": "^17.0.1",
"compress-json": "^3.1.0",
"cordova.plugins.diagnostic": "^7.1.4",
"ionicons": "^7.0.0",
"lz-string": "^1.5.0",
"phonegap-nfc": "^1.2.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.0.0",
"@angular-eslint/builder": "^18.0.0",
"@angular-eslint/eslint-plugin": "^18.0.0",
"@angular-eslint/eslint-plugin-template": "^18.0.0",
"@angular-eslint/schematics": "^18.0.0",
"@angular-eslint/template-parser": "^18.0.0",
"@angular/cli": "^18.0.0",
"@angular/compiler-cli": "^18.0.0",
"@angular/language-service": "^18.0.0",
"@capacitor/cli": "6.1.0",
"@ionic/angular-toolkit": "^11.0.1",
"@types/jasmine": "~5.1.0",
"@types/lz-string": "^1.5.0",
"@types/pako": "^2.0.3",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"eslint": "^8.57.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsdoc": "^48.2.1",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~5.1.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.4.0"
},
"description": "An Ionic project"
}
capacitor.config.ts:
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.subd.transport',
appName: 'SUBD-transport',
webDir: 'www'
};
export default config;
variables.gradle:
ext {
minSdkVersion = 22
compileSdkVersion = 34
targetSdkVersion = 34
androidxActivityVersion = '1.8.0'
androidxAppCompatVersion = '1.6.1'
androidxCoordinatorLayoutVersion = '1.2.0'
androidxCoreVersion = '1.12.0'
androidxFragmentVersion = '1.6.2'
coreSplashScreenVersion = '1.0.1'
androidxWebkitVersion = '1.9.0'
junitVersion = '4.13.2'
androidxJunitVersion = '1.1.5'
androidxEspressoCoreVersion = '3.5.1'
cordovaAndroidVersion = '10.1.1'
}
npx cap sync
√ Copying web assets from www to androidappsrcmainassetspublic in 7.20s
√ Creating capacitor.config.json in androidappsrcmainassets in 2.77ms
[info] Found 2 Cordova plugins for android:
[email protected]
[email protected]
√ copy android in 7.40s
√ Updating Android plugins in 24.40ms
[info] Found 7 Capacitor plugins for android:
@capacitor-community/[email protected]
@capacitor/[email protected]
@capacitor/[email protected]
@capacitor/[email protected]
@capacitor/[email protected]
@capacitor/[email protected]
@capacitor/[email protected]
- update android [info] Found 2 Cordova plugins for android:
[email protected]
[email protected]
√ update android in 335.93ms
√ copy web in 47.57ms
√ update web in 52.12ms
[info] Sync finished in 8.077s
New contributor
Manuel Sureda is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.