Nativescript-angular: No provider for ModalDialogParams!

[job111]

Note: when i use providers it throws new error that says "Can't resolve all parameters for ModalDialogParams: (?, ?)."

import { Component, OnInit} from "@angular/core";
import { RadSideDrawer } from "nativescript-ui-sidedrawer";
import * as app from "tns-core-modules/application";
import { ActivatedRoute } from "@angular/router";
import { RouterExtensions } from "nativescript-angular";
import { Page } from "tns-core-modules/ui/page";
import { SearchBar } from "tns-core-modules/ui/search-bar";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { isAndroid } from "tns-core-modules/platform";
import { Color } from "tns-core-modules/color";
import { ModalDialogParams } from "nativescript-angular/modal-dialog";

class DataItem {
    constructor(public name: string) {
    }
}

@Component({
        selector: "ns-Search",
        templateUrl: "./search.component.html",
        moduleId: module.id,



    })

export class SearchComponent implements OnInit{
    private _searchedText: string = '';
    private arrayAirports: Array<DataItem> = [];
    public airports: ObservableArray<DataItem> = new ObservableArray<DataItem>();
    public isFrom: boolean = false;

    constructor(private _params: ModalDialogParams, private _page: Page, private router: RouterExtensions, private _activeRoute: ActivatedRoute) {
        this.arrayAirports.push(new DataItem("Rotterdam The Hague Airport"));
        this.arrayAirports.push(new DataItem("Chiclayo Capitán FAP José Quiñones G. Airport"));
        this.arrayAirports.push(new DataItem("Lima Jorge Chávez International Airport"));
        this.arrayAirports.push(new DataItem("Arequipa Rodríguez Ballón Airport"));
        this.arrayAirports.push(new DataItem("Cuzco Alejandro Velazco Astete Airport"));
        this.arrayAirports.push(new DataItem("Atlanta Hartsfield-Jackson International Airport"));
        this.arrayAirports.push(new DataItem("New York John F. Kennedy International Airport"));
        this.arrayAirports.push(new DataItem("New York LaGuardia Airport"));
        this.arrayAirports.push(new DataItem("San Diego International Airport"));

        this.airports = new ObservableArray<DataItem>(this.arrayAirports);

        this.isFrom = this._params.context.isFrom;
    }

    ngOnInit() {
    }

    onClose(): void {
        this._params.closeCallback("return value");
    }

    onSelectItem(args) {
        let airport = (this._searchedText !== "") ? this.airports.getItem(args.index) : this.arrayAirports[args.index];
        this._params.closeCallback({
            isFrom: this.isFrom,
            airport
        });
    }

    public onSubmit(args) {
        let searchBar = <SearchBar>args.object;
        let searchValue = searchBar.text.toLowerCase();
        this._searchedText = searchValue;

        this.airports = new ObservableArray<DataItem>();
        if (searchValue !== "") {
            for (let i = 0; i < this.arrayAirports.length; i++) {
                if (this.arrayAirports[i].name.toLowerCase().indexOf(searchValue) !== -1) {
                    this.airports.push(this.arrayAirports[i]);
                }
            }
        }
    }

    public searchBarLoaded(args) {
        let searchBar = <SearchBar>args.object;
        searchBar.dismissSoftInput();

        if (isAndroid) {
            searchBar.android.clearFocus();
        }

        searchBar.text = "";
    }

    public onClear(args) {
        let searchBar = <SearchBar>args.object;
        searchBar.text = "";
        searchBar.hint = "Search for a airport";

        this.airports = new ObservableArray<DataItem>();
        this.arrayAirports.forEach(item => {
            this.airports.push(item);
        });
    }

    public onTextChanged(args) {
        this.onSubmit(args);
    }


    onDrawerButtonTap(): void {
        const sideDrawer = <RadSideDrawer>app.getRootView();
        sideDrawer.showDrawer();
    }
}

package.Json
`{
    "nativescript": {
        "id": "org.nativescript.mydrawerng",
        "tns-ios": {
            "version": "5.1.0"
        },
        "tns-android": {
            "version": "5.2.1"
        }
    },
    "description": "NativeScript Application",
    "license": "SEE LICENSE IN <your-license-filename>",
    "repository": "<fill-your-repository-here>",
    "scripts": {
        "lint": "tslint \"src/**/*.ts\""
    },
    "dependencies": {
        "@angular/animations": "~7.1.0",
        "@angular/common": "~7.1.0",
        "@angular/compiler": "~7.1.0",
        "@angular/core": "~7.1.0",
        "@angular/forms": "~7.1.0",
        "@angular/http": "~7.1.0",
        "@angular/platform-browser": "~7.1.0",
        "@angular/platform-browser-dynamic": "~7.1.0",
        "@angular/router": "~7.1.0",
        "nativescript-angular": "^7.2.2",
        "nativescript-plugin-firebase": "^7.6.0",
        "nativescript-theme-core": "~1.0.4",
        "nativescript-ui-core": "^2.0.1",
        "nativescript-ui-dataform": "^3.10.0",
        "nativescript-ui-sidedrawer": "~5.0.0",
        "reflect-metadata": "~0.1.10",
        "rxjs": "~6.3.0",
        "tns-core-modules": "~5.1.0",
        "zone.js": "~0.8.18"
    },
    "devDependencies": {
        "@nativescript/schematics": "~0.4.0",
        "codelyzer": "~4.5.0",
        "nativescript-dev-sass": "~1.6.0",
        "nativescript-dev-typescript": "~0.7.0",
        "nativescript-dev-webpack": "~0.18.0",
        "tslint": "~5.11.0",
        "@angular/compiler-cli": "~7.1.0",
        "@ngtools/webpack": "~7.1.0"
    },
    "readme": "NativeScript Application"
}

[tsonevn]

Hi @job111,
I tested your case with the modal view in a sample project, however, was unable to recreate an issue with the modal or the params, that are passed while opening it. For your convenience, I am attaching a sample project. You can review it and make the needed changes, which will allow us to reproduce the issue.
Archive.zip

[job111]

i tried to use ModalDialogParams on the sample project you suggested, then end up with the same error ..you will find my sample project here my-drawer-ng.zip
what's causing the error is in search.component.ts

[edusperoni]

You're trying to navigate to SearchComponent, instead of opening a modal:

{ path: "search", loadChildren: "~/app/search/search.module#SearchModule" },

[job111]

Yes am trying to navigate to SearchComponent the error occurs when i navigate to SearchComponent
i already did that but still facing the same error
`import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";

const routes: Routes = [
{ path: "", redirectTo: "/home", pathMatch: "full" },
{ path: "welcome", loadChildren: "~/app/welcome/welcome.module#WelcomeModule" },
{ path: "home", loadChildren: "~/app/home/home.module#HomeModule" },
{ path: "browse", loadChildren: "~/app/browse/browse.module#BrowseModule" },
{ path: "search", loadChildren: "~/app/search/search.module#SearchModule" },
{ path: "featured", loadChildren: "~/app/featured/featured.module#FeaturedModule" },
{ path: "settings", loadChildren: "~/app/settings/settings.module#SettingsModule" }
];

@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }
`

[edusperoni]

You can't navigate to a modal, so you can't navigate to SearchComponent.

Edit:

Check the full example, you're skipping a few steps https://docs.nativescript.org/angular/ui/modal-view-ng

[job111]

you right turned out i actually missed some steps ,,,,but i fixed it cheers

[tahir-jamil]

@job111 how you are able to fix it ?

[kfw9257]

@job111 Any updates on how you were able to fix this error?

[edusperoni]

@kfw9257 just follow the documentation for opening the modal:

https://docs.nativescript.org/angular/ui/ng-components/modal-view-ng

this error occurs when you try to instantiate a modal component in any way other than calling dialogService.showModal, so if you're navigating to the component it'll throw this error.

[fpaaske]

I just want to add that this might also happen if you declare your modal view component in one module, and provide the ModalDialogService and entryComponents in another.

I tried to do this:

@NgModule({
    imports: [
        NativeScriptCommonModule,
        TranslateModule
    ],
    declarations: [
        ModalListViewComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class ModalListViewModule {
}

Then use it like this:

@NgModule({
    imports: [
        ModalListViewModule
    ],
    entryComponents: [
        ModalListViewComponent
    ],
    providers: [
        ModalDialogService
    ],
    declarations: [
        ContactDetailsComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class ContactDetailsModule {
}

But I had to do this instead:

@NgModule({
    imports: [
        NativeScriptCommonModule,
        TranslateModule
    ],
    entryComponents: [
        ModalListViewComponent
    ],
    providers: [
        ModalDialogService
    ],
    declarations: [
        ModalListViewComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class ModalListViewModule {
}

Then use it like this:

@NgModule({
    imports: [
        ModalListViewModule
    ],
    declarations: [
        ContactDetailsComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class ContactDetailsModule {
}