tns run android --bundle errors with nativescript 3.4.0 about nativescript-nfc

[skhye05]

Yes,
npm i and tns run android --bundle

[EddyVerbruggen]

I've been able to reproduce your issue. Hope to find a solution..

[EddyVerbruggen]

Tried a few things but it really looks like something is broken upstream. We may need to ask this in the https://github.com/NativeScript/android-runtime repo... found this issue just now: NativeScript/android#911

[EddyVerbruggen]

You may want to make that NFCHelper a singleton so it's only instantiated once. Just create an Angular service, provide it in the app module, and inject it in any component you need it.

That being said, I still wouldn't expect that error - is there a repo I can clone to see this myself?

[skhye05]

No I have no repo, but i can create one

[skhye05]

Hey @EddyVerbruggen,

You can find the project here : project repo

[EddyVerbruggen]

Thx @skhye05! It's a simple matter of cloning, npm i and tns run android to reproduce it?

[Plamen5kov]

Hi @skhye05, you can check out this to help you with the migration of your project.

[skhye05]

@Plamen5kov I have done the migration and the issue still occurs...

[Plamen5kov]

@skhye05 I'm sorry to hear you encounter issues with your project. I'd suggest opening a new issue, describing your problem in detail so we can do the best we can to help you to figure out the problem.

[des-esseintes]

I can confirm the issue, introduced webpack to my app w/ this great nfc plugin (thank you for your work, using bt, nfc and going to use fingerprint one as well) and getting that activity error: com.tns.NativeScriptException: Failed to create JavaScript extend wrapper for class 'com/tns/NativeScriptNfcActivity'
the app is pure js.

[EddyVerbruggen]

@des-esseintes Looks like something like NativeScript/nativescript-dev-webpack#446 needs to be added to the readme. Can you perhaps give it a try?

[des-esseintes]

hello.
i feel very stupid, but can't get it working :)
at firsrt ie tried the ts version, like on the link you posted. as my project is js only i had to add ts support, but still could not get it buit -- always complains about missing 'android'.
ok so i copied the corresponding portion of the code from nfc.android.js from node_modules/nativescript-nfc and now it's giving me

Warning: there already is an extend called com.tns.NativeScriptNfcActivity.
Warning: The static binding generator will generate extend from:bundle.js implementation
Exception in thread "main" java.io.IOException: File already exists. This may lead to undesired behavior.
Please change the name of one of the extended classes.
File:/home/k/dev/android/firedoor/platforms/android/app/src/main/java/com/tns/NativeScriptNfcActivity.java Class: com.tns.NativeScriptNfcActivity
	at org.nativescript.staticbindinggenerator.Generator.writeBindings(Generator.java:68)
	at org.nativescript.staticbindinggenerator.Main.main(Main.java:15)

i'm probably doing something wrong here as am not a 'pro' {N} developer and dont fully understand its internals.

[EddyVerbruggen]

Don't feel stupid, this is actually a very hard problem.

I'm going to see if it's easier to fix with NativeScript 4 (hoping to get rid of this file entirely).

You were right to copy the .js file and use that, and change webpack.config.js to add it as a 'MainAcivity' as mentioned in the linked issues.

Perhaps try removing the platforms/android folder and build again?

[des-esseintes]

yesterday i've totally messed the whole project with all those rebuild (a weird {N} bugs started to appear), i think i'll try again, from scratch, later.
i think i'll stick with some tiny test app first and then port the changes to my main one. i'll report back as soon as i get some results. thanks for your help

[des-esseintes]

Hello
I've created a test empty app, tried building in default mode with nfc activity -- ok
then tried to build w/ webpack -- failure
added portion of code from your android file (generated js version) -- working!
haven't ported it into my main app yet, though, but this is another question.

[skhye05]

Hi,

I have a found a workaround by importing the nfc class in app.component.ts and create a service with an eventEmitter to emit the callback response after i get the reading data.

Here is the code:

app.module.ts

import { NgModule, NgModuleFactoryLoader, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { BroadcastService } from "./broadcast.service";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ],
    providers:[
        BroadcastService
    ]
})
export class AppModule { }

app.component.ts

import { Component } from "@angular/core";
import { Nfc } from "nativescript-nfc";
import { BroadcastService } from "./broadcast.service";
@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
    public nfc = new Nfc();
    constructor(private br: BroadcastService) {
    }

    ngOnInit(): void {
        this.nfc.available().then((avail) => {
            this.nfc.setOnTagDiscoveredListener((data: any) => {
                console.log("Discovered a tag with ID " + data.id);
                this.br.emit("MOI");

            }).then(() => {
                console.log("OnTagDiscovered listener added");
            });
        });
    }

    test() {
        console.log('from app component');
    }
}

broadcast.service.ts

import { Injectable, EventEmitter } from "@angular/core";
import { Observable } from "tns-core-modules/ui/page/page";

@Injectable()
export class BroadcastService {
    public answer: EventEmitter<string>;
    constructor() {
        this.answer = new EventEmitter<string>();
    }

    emit(args): void {
        this.answer.emit(args);
    }
}

home.component.ts

import { Component, OnInit } from "@angular/core";
import { BroadcastService } from "../broadcast.service";
import { RouterExtensions } from "nativescript-angular/router";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
    private sub: any;
    constructor(private br: BroadcastService, private router: RouterExtensions) {
    }

    ngOnInit(): void {
        this.sub = this.br.answer.subscribe((args) => {
            console.log('HOME ' + args);
            this.sub.unsubscribe();
        });
    }

    public goto() {
        this.router.navigate(['/test']);
    }
}

test.component.ts

import { Component, OnInit } from "@angular/core";
import { BroadcastService } from "../broadcast.service";

@Component({
    selector: "Test",
    moduleId: module.id,
    templateUrl: "./test.component.html"
})
export class TestComponent implements OnInit {
    constructor(private br: BroadcastService) {
    }

    ngOnInit(): void {
        this.br.answer.subscribe((args) => {
            console.log('TEST ' + args);
        });
    }
}

This work for me at the current moment and i hope it will help you as well @des-esseintes
if you want me to create a repo with my code sample just let me know.

[ikhsan017]

is this issue still present in nativescript 4.0?

[EddyVerbruggen]

Should be OK now. See the webpack note in the readme.