While constructing a nativescript carousel using the nativescript-carousel plug-in, I encountered an issue when running tns build android. The error message reads as follows:
node_modules/nativescript-carousel/index.d.ts(1,22): error TS6053: File 'D:/Documents/coursera_examples/nativescript/VilcabambaHotel/node_modules/nativescript-carousel/node_modules/tns-platform-declarations/android.d.ts' not found.
Below is the code snippet for my carousel in home.component.html:
<GridLayout horizontalAlignment="center" verticalAlignment="top" rows="*" columns="*" height="95%">
<Carousel #carousel ios:indicatorOffset="0,-10" ios:finite="true" ios:bounce="false" showIndicator="true" height="100%" indicatorAnimation="SWAP"
indicatorColor="#66ccff" indicatorColorUnselected="#cceeff" height="250" width="80%">
<CarouselItem backgroundColor="white" height="100%">
<GridLayout *ngIf="cabin">
<Image [src]="BaseURL + cabin.image" ></Image>
</GridLayout>
</CarouselItem>
<CarouselItem backgroundColor="white">
<GridLayout *ngIf="house">
<Image [src]="BaseURL + house.image" ></Image>
</GridLayout>
</CarouselItem>
<CarouselItem backgroundColor="white">
<GridLayout *ngIf="ecoactivity">
<Image [src]="BaseURL + ecoactivity.image" ></Image>
</GridLayout>
</CarouselItem>
</Carousel>
</GridLayout>
This is how my home.component.ts looks like:
import { Component, OnInit, Inject, ChangeDetectorRef } from '@angular/core';
//import { TNSFontIconService } from 'nativescript-ngx-fonticon';
import { Page } from "ui/page";
import { View } from "ui/core/view";
import { SwipeGestureEventData, SwipeDirection } from "ui/gestures";
import * as enums from "ui/enums";
import { Cabin } from '../shared/cabin';
import { CabinService } from '../services/cabin.service';
import { House } from '../shared/house';
import { HouseService } from '../services/house.service';
import { Ecoactivity } from '../shared/ecoactivity';
import { EcoactivityService } from '../services/ecoactivity.service';
import { DrawerPage } from '../shared/drawer/drawer.page';
import { registerElement } from 'nativescript-angular/element-registry';
import { Carousel, CarouselItem } from 'nativescript-carousel';
registerElement('Carousel', () => Carousel);
registerElement('CarouselItem', () => CarouselItem);
@Component({
selector: 'app-home',
moduleId: module.id,
templateUrl: './home.component.html',
// styleUrls: ['./home.component.css']
})
export class HomeComponent extends DrawerPage implements OnInit {
cabin: Cabin;
house: House;
ecoactivity: Ecoactivity;
cabinErrMess: string;
houseErrMess: string;
ecoactivityErrMess: string;
constructor(private cabinservice: CabinService,
private houseservice: HouseService,
private ecoactivityservice: EcoactivityService,
private changeDetectorRef: ChangeDetectorRef,
private page: Page,
// private fonticon: TNSFontIconService,
@Inject('BaseURL') private BaseURL) {
super(changeDetectorRef);
}
ngOnInit() {
this.cabinservice.getFeaturedCabin()
.subscribe(cabin => this.cabin = cabin,
errmess => this.cabinErrMess = <any>errmess);
this.houseservice.getFeaturedHouse()
.subscribe(house => this.house = house,
errmess => this.houseErrMess = <any>errmess);
this.ecoactivityservice.getFeaturedEcoactivity()
.subscribe(ecoactivity => this.ecoactivity = ecoactivity,
errmess => this.ecoactivityErrMess = <any>errmess);
}
The error disappears if I remove the following lines of code, but it causes the carousel to stop functioning:
import { registerElement } from 'nativescript-angular/element-registry'; import { Carousel, CarouselItem } from 'nativescript-carousel';
To address this issue, I created a file named reference.d.ts with the below content, yet the error persists:
/// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />
/// <reference path="./node_modules/tns-platform-declarations/android.d.ts" />