Sometimes get this error in console unsupported URL

Thread is closed for posting
2 posts, 0 answers
  1. Miklos
    Miklos avatar
    6 posts
    Member since:
    Aug 2017

    Posted 15 Aug 2017 Link to this post

    Dear Forum!

    I use nativescript with angular and get sometimes console error.

    CONSOLE ERROR file:///app/tns_modules/@angular/core/./bundles/core.umd.js:1092:24: ERROR Error: Uncaught (in promise): Error: unsupported URL

    Plese help me what I wrong the code.
    Thanx

    Miklos

    Package json:
    "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/router": "4.0.0",
    "fs.realpath": "^1.0.0",
    "nativescript-angular": "~3.0.0",
    "nativescript-barcodescanner": "^2.5.5",
    "nativescript-geolocation": "^3.0.0",
    "nativescript-google-maps-sdk": "^2.1.3",
    "nativescript-pdf-view": "^2.0.1",
    "nativescript-telerik-ui": "^2.0.1",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-zxing": "^1.5.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.2.0",
    "tns-core-modules": "^3.1.0",
    "zone.js": "~0.8.5"
    },

     

    component.ts:

    private items:ObservableArray<Item>;
    get dataItems() {
            return this.items;
        }
    private setItems(){
            this.items = new ObservableArray<Item>();
            this.itemService.getItems()
                .subscribe(
                    (response) => {
                        response.data.items.forEach((i) => {
                            let item:Item = {
                                id: "",
                                itemnumber: i.itemnumber,
                                name: i.title,
                                price: i.price,
                                url: i.url,
                                photosrc: i.photosrc
                            };
                            this.items.push(item);
                        });
                        setTimeout( () => {
                            this.isLoading = false;
                        },100 );
                    }
                );
        }

     

    public onPullToRefreshInitiated(args: ListViewEventData) {
            let that = new WeakRef(this);
            timerModule.setTimeout(function () {
                let listView = args.object;
                while(that.get().items.length){
                    that.get().items.pop();
                }
                that.get().setItems();
                listView.notifyPullToRefreshFinished();
            }, 1000);
        }

     

    XML html:

     

    <RadListView
                            [items]="dataItems"
                            pullToRefresh="true"
                            (pullToRefreshInitiated)="onPullToRefreshInitiated($event)">
                        <ng-template tkListItemTemplate let-item="item">
                            <GridLayout
                                    orientation="vertical"
                                    class="list-group-item list-item-template-style"
                                    rows="auto"
                                    columns="auto, *"
                                    (tap)="goToItemPage(item.url)">
                                <Image
                                        *ngIf="item.photosrc"
                                        class="list-item-photo"
                                        row="0" col="0"
                                        [src]="item.photosrc"
                                        loadMode="async"
                                        width="50"></Image>
                                <StackLayout row="0" col="1" >
                                    <Label class="list-item-title" [text]="item.name" textWrap="true"></Label>
                                    <Label class="list-item-excerpt" [text]="'Cikkszám: ' + item.itemnumber"></Label>
                                    <Label class="list-item-price" [text]="'Ár: '+item.price + 'Ft'"></Label>
                                </StackLayout>
                            </GridLayout>
                        </ng-template>
                        <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="1"></ListViewStaggeredLayout>
                    </RadListView>
  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 15 Aug 2017 Link to this post

    Hi Miklos,

    Based on the error you are receiving the problem not related to the code included in the snippets but to the part where the API call is made. This might happen is your URL is using special characters (e.g., like blank Space or % or other symbols).
    To resolve it encode the URL, for example, replace the blank space with %20  or replace the percent sign(%) with %25. These solutions are discussed here and here.

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top