Trying import on app.module.ts error

[melaniol]

Hi, i have a problem, when i try import the plugin on app.module.ts it crash, when i call over my component.ts (i am using nativescript + angular) it works fine but just on Yezz 5E, i had test on devices like samsung s7, j7 prime, s9 and it crash whatever i call it.

the error is System.err: Error: Unexpected value 'Mediafilepicker' imported by the module 'AppModule'. Please add a @NgModule annotation. System.err: File: "file:///data/data/com.qrgroup.letsrelo/files/app/tns_modules/@angular/compiler/bundles/compiler.umd.js, line: 18118, column: 16

my app.module.ts

`import { Mediafilepicker } from 'nativescript-mediafilepicker'; @NgModule({ bootstrap: [ AppComponent ], imports: [ NativeScriptModule, AppRoutingModule, NativeScriptRouterModule, NativeScriptRouterModule.forRoot(routes), TNSFontIconModule.forRoot({ 'flaticon': './assets/css/flaticon.css', }), NativeScriptUIListViewModule, TNSCheckBoxModule, Mediafilepicker, ], declarations:[.....], entryComponents: [......], providers: [.....], schemas: [ NO_ERRORS_SCHEMA ]

`

curiously it error on my devices Yezz 5E dont appear when i delete all related to Mediafilepicker from app.module.ts, but doing on this way crash on all device previously related..

sorry for my bad english, thanks in advance for your help on this bug/problem.

[virtualbjorn]

Hi @melaniol try not adding the import for this plugin on your app.module.ts

I don't remember importing one on my app.module.ts

Just use this plugin as is, following the documentation

[melaniol]

thanks for your quickly response, yeah i am not adding on app.module.ts and it works on my phone (Yezz 5E), but when i try run on s7 and j7 prime, it crash, with this same error, but i dont understand because i am not adding on app.module.ts, i removed the platform and try and try and nothing :(

[virtualbjorn]

how are you using the plugin? you should just directly import them to your components.

[melaniol]

import { Mediafilepicker, ImagePickerOptions } from 'nativescript-mediafilepicker';

`public selectFile(){ console.log("tap on function"); let options: ImagePickerOptions = { android: { isCaptureMood: false, // if true then camera will open directly. isNeedCamera: true, maxNumberFiles: 10, isNeedFolderList: true }, ios: { isCaptureMood: false, // if true then camera will open directly. maxNumberFiles: 10 } }; let mediafilepicker = new Mediafilepicker(); mediafilepicker.openImagePicker(options);

mediafilepicker.on("getFiles", function (res) { let results = res.object.get('results'); console.dir(results); });

mediafilepicker.on("error", function (res) { let msg = res.object.get('msg'); console.log(msg); });

mediafilepicker.on("cancel", function (res) { let msg = res.object.get('msg'); console.log(msg); }); } ` and just one tap on view.

i am following the documentation guide. I dont understand why this error appears if i am not adding on app.module.ts

[virtualbjorn]

You got confused by how to implement the plugin then...

But here's a way to test if the plugin works. on your component e.g home.component.ts

... // other imports
import { MediaFilepicker, FilePickerOptions } from 'nativescript-mediafilepicker';

@Component({ ... })
export class HomeComponent {
      mediaFilePicker = new Mediafilepicker();

      onButtonClick() {
            let fileExtensions = [];
            if (app.ios) {
                fileExtensions = ["kUTTypePDF"];
            } else {
                fileExtensions = ["pdf"];
            }
            const options: FilePickerOptions = {
                android: {
                    extensions: fileExtensions,
                    maxNumberFiles: 1
                },
                ios: {
                    extensions: fileExtensions,
                    multipleSelection: false
                }
            };
            this.mediaFilePicker.openFilePicker(options);

        this.mediaFilePicker.on("getFiles", (res) => {
            const results = res.object.get("results");
            console.dir(results);
        });

        this.mediaFilePicker.on("error", (res) => {
            const msg = res.object.get("msg");
            console.dir(msg);
        });

        this.mediaFilePicker.on("cancel", (res) => {
            const msg = res.object.get("msg");
            console.dir(msg);
        });
      }
}

[virtualbjorn]

Hope that helps you.

[virtualbjorn]

In your case this is how you implement it on a component

import { Component, OnInit } from "@angular/core";
import { Mediafilepicker, ImagePickerOptions } from "nativescript-mediafilepicker";

@Component({
    selector: "app-name",
    templateUrl: "./name.component.html",
    styleUrls: ["./name.component.scss"]
})
export class NameComponent implements OnInit {
    constructor() { }

    ngOnInit(): void { }

    public selectFile() {
        let options: ImagePickerOptions = {
            android: {
                isCaptureMood: false, // if true then camera will open directly.
                isNeedCamera: true,
                maxNumberFiles: 10,
                isNeedFolderList: true
            },
            ios: {
                isCaptureMood: false, // if true then camera will open directly.
                maxNumberFiles: 10
            }
        };
        let mediafilepicker = new Mediafilepicker();
        mediafilepicker.openImagePicker(options);

        mediafilepicker.on("getFiles", (res) => {
            let results = res.object.get("results");
            console.dir(results);
        });

        mediafilepicker.on("error", (res) => {
            let msg = res.object.get("msg");
            console.log(msg);
        });

        mediafilepicker.on("cancel", (res) => {
            let msg = res.object.get("msg");
            console.log(msg);
        });
    }
}

[melaniol]

exactly, i have like that, and it works in my phone (Yezz 5E), but when i run on other devices like samsung s7, and j7 prime it crash with the error previously mentioned. The problem with the crash error is showing than i am adding in app.module.ts but it is not added, i am adding just in my component.

Thanks in advance for your quickly response.

[virtualbjorn]

can you show me a full stack error? and again don't add Mediafilepicker on app.module and also please include here your app.module.ts

[melaniol]

`import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { NativeScriptModule } from "nativescript-angular/nativescript.module"; import { NativeScriptRouterModule } from "nativescript-angular/router"; import { routes, navigatableComponents } from "./app-routing.module"; import { TNSFontIconModule } from 'nativescript-ngx-fonticon'; import { TNSCheckBoxModule } from 'nativescript-checkbox/angular'; //Clase para mediapicker import { Mediafilepicker } from 'nativescript-mediafilepicker';

import { AppRoutingModule } from "./app-routing.module"; import { AppComponent } from "./app.component"; import { ItemsComponent } from "./item/items.component"; import { ItemDetailComponent } from "./item/item-detail.component"; import { LoginComponent } from "./modulos/login/login.component"; import { InicioComponent } from "./modulos/inicio/inicio.component"; import { TutorialComponent } from "./modulos/tutorial/tutorial.component"; import { HomeComponent } from "./modulos/home/home.component"; import { RequestComponent } from "./modulos/request/request.component"; import { TasksComponent } from "./modulos/tasks/tasks.component"; import { NotesComponent } from "./modulos/notes/notes.component"; import { ContactComponent } from "./modulos/contact/contact.component"; import { FooterComponent } from "./modulos/footer/footer.component"; import { ReportComponent } from "./modulos/report/report.component";

import { ChatComponent } from "./modulos/chat/chat.component"; import { ConversacionComponent } from "./modulos/conversacion/conversacion.component"; import { ConversacionService } from "./modulos/conversacion/conversacion.service";

import { LocationsComponent } from "./modulos/locations/locations.component"; import { OptionsComponent } from "./modulos/options/options.component"; import { NotificationsComponent } from "./modulos/notifications/notifications.component"; import { ConfigurationComponent } from "./modulos/configuration/configuration.component"; import { NewrequestsComponent } from "./modulos/newrequests/newrequests.component"; import { animacionesService } from "./modulos/servicios_generales/peticiones.service";

import { Desplegable } from "./modulos/desplegable/desplegable.component"; import { detail_desplegableComponent } from "./modulos/desplegables/desplegables_detail.component"; import { task_desplegableComponent } from "./modulos/desplegables/desplegables_task.component"; import { detail_desplegable_botonsComponent } from "./modulos/desplegables/despegable_detail_botons.component"; import { WebViewComponent } from "./modulos/desplegables/desplegables_webview.component"; import { PropertiesComponent } from "./modulos/properties/properties.component"; import { PropertiesViewComponent } from "./modulos/properties/properties_view.component"; import { desplegable_consultantComponent } from "./modulos/desplegables/desplegable_consultant.component"; //

import { CenectorServerService } from "./modulos/servicios_generales/ConectorServer.service";

import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular"; // Uncomment and add to NgModule imports if you need to use two-way binding // import { NativeScriptFormsModule } from "nativescript-angular/forms";

// Uncomment and add to NgModule imports if you need to use the HttpClient wrapper // import { NativeScriptHttpClientModule } from "nativescript-angular/http-client"; // descargar plugin nativescript-loader-indicator @NgModule({ bootstrap: [ AppComponent ], imports: [ NativeScriptModule, AppRoutingModule, NativeScriptRouterModule, NativeScriptRouterModule.forRoot(routes), TNSFontIconModule.forRoot({ 'flaticon': './assets/css/flaticon.css', }), NativeScriptUIListViewModule, TNSCheckBoxModule, Mediafilepicker, ], declarations: [ AppComponent, ItemsComponent, ItemDetailComponent, LoginComponent, InicioComponent, HomeComponent, TutorialComponent, RequestComponent, TasksComponent, NotesComponent, ContactComponent, FooterComponent, ChatComponent, ConversacionComponent, OptionsComponent, NotificationsComponent, LocationsComponent,
ConfigurationComponent, NewrequestsComponent, ReportComponent,
PropertiesComponent, PropertiesViewComponent,

    Desplegable,
    detail_desplegableComponent,
    task_desplegableComponent,
    detail_desplegable_botonsComponent,
    WebViewComponent,
    desplegable_consultantComponent,
    ...navigatableComponents
],
entryComponents: [Desplegable,detail_desplegableComponent,task_desplegableComponent,detail_desplegable_botonsComponent,WebViewComponent,PropertiesViewComponent,desplegable_consultantComponent],
providers: [animacionesService,CenectorServerService,ConversacionService],
schemas: [
    NO_ERRORS_SCHEMA
]

}) / Pass your application module to the bootstrapModule function located in main.ts to start your app / export class AppModule { }`

It is the error when i try tns run android, after of tns platform remove android and tns prepare andriod

[virtualbjorn]

Remove Mediafilepicker from your imports.

[melaniol]

I am compiling again without the imports. Waiting for the results

[melaniol]

Oh bro, this issue was solved. Thanks, just clean and build all again without the imports and works like a charm.. Thanks so much again! @virtualbjorn

[virtualbjorn]

Glad I could help.