Sometimes get this error in console unsupported URL

[Miklos]

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>

[Nick Iliev]

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