I’m having a problem with my Ionic Angular since yesterday. It is as if the Sass file does not compile or not linked to the HTML/TS file or does not exist at all.
I have a page called waktusolat.page.html, and every class/id selector I declared in the any tags on the page have "CSS class/id selector <class/id name> not found message. I have already declared those selectors in the waktusolat.page.scss.
I’m using VSCode btw.
waktusolat.page.html (incomplete because I rewrote it, but even when I completed it previously, the same thing happens.)
<ion-split-pane contentId="main" when="xl">
<ion-menu contentId="main" type="overlay">
<ion-header>
<ion-toolbar>
<div *ngIf="!loginState" id="menuHeader">
<ion-img src="../assets/icon.png"></ion-img>
Selamat Datang ke iMasjid
</div>
<div *ngIf="loginState">Selamat Datang<br><span id="username"><b>{{ username }}</b></span></div>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list lines="full">
<ion-item href="/home" routerDirection="root">
<ion-icon src="assets/icon/home.svg"></ion-icon>
<ion-label>Utama</ion-label>
</ion-item>
<ion-item *ngIf="loginState" button href="/kehadiransolat" routerDirection="back">
<ion-icon src="assets/icon/kehadiransolat.svg"></ion-icon>
<ion-label>Kehadiran Solat</ion-label>
</ion-item>
<ion-item *ngIf="loginState" button href="/kehadiranimam" routerDirection="back">
<ion-icon src="assets/icon/kehadiranimam.svg"></ion-icon>
<ion-label>Kehadiran Imam</ion-label>
</ion-item>
<!-- <ion-item *ngIf="loginState" button href="/etempahan" routerDirection="back">
<ion-icon src="assets/icon/booking.svg"></ion-icon>
<ion-label>E-Tempahan</ion-label>
</ion-item>
<ion-item *ngIf="loginState" button href="/jadualkuliah" routerDirection="back">
<ion-icon src="assets/icon/jadual.svg"></ion-icon>
<ion-label>Jadual Kuliah</ion-label>
</ion-item> -->
<ion-item *ngIf="loginState" button href="/qiblatfinder" routerDirection="back">
<ion-icon src="assets/icon/qiblat.svg"></ion-icon>
<ion-label>Qiblat Finder</ion-label>
</ion-item>
<ion-item id="activeMenu" *ngIf="loginState" button href="/waktusolat" routerDirection="back">
<ion-icon src="assets/icon/waktusolat.svg" color="primary"></ion-icon>
<ion-label>Waktu Solat</ion-label>
</ion-item>
<!-- <ion-item *ngIf="loginState" button href="/tasbihzikir" routerDirection="back">
<ion-icon src="assets/icon/tasbih.svg"></ion-icon>
<ion-label>Tasbih dan Zikir</ion-label>
</ion-item>
<ion-item *ngIf="loginState" button href="/lokasimasjid" routerDirection="back">
<ion-icon src="assets/icon/mosque.svg"></ion-icon>
<ion-label>Lokasi Masjid</ion-label>
</ion-item>
<ion-item *ngIf="loginState" button href="/iderma" routerDirection="back">
<ion-icon src="assets/icon/derma.svg"></ion-icon>
<ion-label>iDerma</ion-label>
</ion-item>
<ion-item *ngIf="loginState" button href="/quranhadis" routerDirection="back">
<ion-icon src="assets/icon/quran.svg"></ion-icon>
<ion-label>Quran dan Hadis</ion-label>
</ion-item> -->
<ion-item *ngIf="loginState" button href="/doaharian" routerDirection="back">
<ion-icon src="assets/icon/doa.svg"></ion-icon>
<ion-label>Doa Harian</ion-label>
</ion-item>
<ion-item *ngIf="loginState" button href="/logout" routerDirection="back">
<ion-icon src="assets/icon/logout.svg"></ion-icon>
<ion-label>Log Keluar</ion-label>
</ion-item>
<ion-item *ngIf="!loginState" button href="/login" routerDirection="forward">
<ion-icon src="assets/icon/login.svg"></ion-icon>
<ion-label>Log Masuk</ion-label>
</ion-item>
<ion-item *ngIf="!loginState" button href="/register" routerDirection="forward">
<ion-icon src="assets/icon/registration.svg"></ion-icon>
<ion-label>Daftar</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-content [fullscreen]="true" id="main">
<ion-header>
<ion-toolbar>
<ion-menu-button slot="start" autoHide="true"></ion-menu-button>
<ion-title>Waktu Solat</ion-title>
</ion-toolbar>
</ion-header>
<div class="selectLocation" *ngIf="!resultExist">
</div>
</ion-content>
</ion-split-pane>
waktusolat.page.scss
ion-split-pane {
--side-max-width: 320px;
}
ion-menu ion-header ion-toolbar {
--min-height: 250px;
--padding-top: 20px;
--padding-bottom: 20px;
--padding-start: 20px;
--padding-end: 20px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
--background: var(--ion-color-success);
--color: var(--ion-color-light)
}
ion-menu ion-content ion-list ion-item {
--color-activated: var(--ion-color-success);
--ripple-color: var(--ion-color-success);
}
ion-menu ion-content ion-list ion-item ion-label {
padding: 0 10px;
}
#menuHeader {
font-size: 22px;
font-weight: 800;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#menuHeader ion-img {
width: 100px;
height: auto;
margin-bottom: 10px;
}
#activeMenu {
color: var(--ion-color-success);
font-weight: bold;
}
#activeMenu ion-icon {
color: var(--ion-color-success);
}
ion-content{
background-color: cornsilk;
}
.selectLocation {
margin: 10px 20px;
}
waktusolat.page.ts
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../auth/auth.service';
import { Storage } from '@ionic/storage';
import { HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Router } from '@angular/router';
import { Geolocation } from '@ionic-native/geolocation/ngx';
@Component({
selector: 'app-waktusolat',
templateUrl: './waktusolat.page.html',
styleUrls: ['./waktusolat.page.scss'],
})
export class WaktusolatPage implements OnInit {
username = 'username';
loginState = false;
baseURL = 'https://mpt.1906.my/api/prayer/';
date = new Date();
day = this.date.getDate();
month = this.date.getMonth();
year = this.date.getFullYear();
notice = '';
latitude: Number;
longitude: Number;
kawasan: String;
kodkawasan: String;
resultExist = false;
waktuSolat: any;
johor = {
"Batu Pahat": "jhr-0",
"Gemas": "jhr-1",
"Johor Bahru": "jhr-2",
"Kluang": "jhr-3",
"Kota Tinggi": "jhr-4",
"Mersing": "jhr-5",
"Muar": "jhr-6",
"Pemanggil": "jhr-7",
"Pontian": "jhr-8",
"Pulau Aur": "jhr-9",
"Segamat": "jhr-10",
}
kedah = {
"Baling": "kdh-0",
"Bandar Baharu": "kdh-1",
"Kota Setar": "kdh-2",
"Kuala Muda": "kdh-3",
"Kubang Pasu": "kdh-4",
"Kulim": "kdh-5",
"Langkawi": "kdh-6",
"Padang Terap": "kdh-7",
"Pendang": "kdh-8",
"Pokok Sena": "kdh-9",
"Puncak Gunung Jerai": "kdh-10",
"Sik": "kdh-11",
"Yan": "kdh-12",
}
kelantan = {
"Bachok": "ktn-0",
"Bertam": "ktn-1",
"Jeli": "ktn-2",
"Kota Bharu": "ktn-3",
"Kuala Krai": "ktn-4",
"Machang": "ktn-5",
"Mukim Chiku": "ktn-6",
"Mukim Galas": "ktn-7",
"Pasir Mas": "ktn-8",
"Pasir Puteh": "ktn-9",
"Tanah Merah": "ktn-10",
"Tumpat": "ktn-11",
}
melaka = {
"Alor Gajah": "mlk-0",
"Bandar Melaka": "mlk-1",
"Jasin": "mlk-2",
"Masjid Tanah": "mlk-3",
"Merlimau": "mlk-4",
"Nyalas": "mlk-5",
}
negeriSembilan = {
"Jelebu": "ngs-0",
"Jempol": "ngs-1",
"Kuala Pilah": "ngs-2",
"Port Dickson": "ngs-3",
"Rembau": "ngs-4",
"Seremban": "ngs-5",
"Tampin": "ngs-6",
}
pahang = {
"Bentong": "phg-0",
"Bera": "phg-1",
"Bukit Fraser": "phg-2",
"Cameron Highland": "phg-3",
"Chenor": "phg-4",
"Genting Highlands": "phg-5",
"Jerantut": "phg-6",
"Kuala Lipis": "phg-7",
"Kuantan": "phg-8",
"Maran": "phg-9",
"Muadzam Shah": "phg-10",
"Pekan": "phg-11",
"Pulau Tioman": "phg-12",
"Raub": "phg-13",
"Rompin": "phg-14",
"Temerloh": "phg-15",
}
perak = {
"Bagan Datoh": "prk-0",
"Bagan Serai": "prk-1",
"Batu Gajah": "prk-2",
"Belum": "prk-3",
"Beruas": "prk-4",
"Bukit Larut": "prk-5",
"Grik": "prk-6",
"Ipoh": "prk-7",
"Kampar": "prk-8",
"Kampung Gajah": "prk-9",
"Kuala Kangsar": "prk-10",
"Lenggong": "prk-11",
"Lumut": "prk-12",
"Parit": "prk-13",
"Parit Buntar": "prk-14",
"Pengkalan Hulu": "prk-15",
"Pulau Pangkor": "prk-16",
"Selama": "prk-17",
"Setiawan": "prk-18",
"Slim River": "prk-19",
"Sri Iskandar": "prk-20",
"Sungai Siput": "prk-21",
"Taiping": "prk-22",
"Tanjung Malim": "prk-23",
"Tapah": "prk-24",
"Teluk Intan": "prk-25",
"Temengor": "prk-26",
}
perlis = {
"Arau": "pls-0",
"Kangar": "pls-1",
"Padang Besar": "pls-2",
}
pulauPinang = {
"Pulau Penang": "png-0",
}
sabah = {
"Balong": "sbh-0",
"Bandar Bukit Garam": "sbh-1",
"Beaufort": "sbh-2",
"Beluran": "sbh-3",
"Gunung Kinabalu": "sbh-4",
"Kalabakan": "sbh-5",
"Keningau": "sbh-6",
"Kota Belud": "sbh-7",
"Kota Kinabalu": "sbh-8",
"Kota Marudu": "sbh-9",
"Kuala Penyu": "sbh-10",
"Kuamut": "sbh-11",
"Kudat": "sbh-12",
"Kunak": "sbh-13",
"Lahad Datu": "sbh-14",
"Long Pa Sia": "sbh-15",
"Membakut": "sbh-16",
"Merotai": "sbh-17",
"Nabawan": "sbh-18",
"Papar": "sbh-19",
"Penampang": "sbh-20",
"Pensiangan": "sbh-21",
"Pinangah": "sbh-22",
"Pitas": "sbh-23",
"Pulau Banggi": "sbh-24",
"Ranau": "sbh-25",
"Sahabat": "sbh-26",
"Sandakan": "sbh-27",
"Semawang": "sbh-28",
"Semporna": "sbh-29",
"Silabukan": "sbh-30",
"Sipitang": "sbh-31",
"Tambisan": "sbh-32",
"Tambunan": "sbh-33",
"Tawau": "sbh-34",
"Telupit": "sbh-35",
"Temanggong": "sbh-36",
"Tenom": "sbh-37",
"Terusan, Sabah": "sbh-38",
"Tuaran": "sbh-39",
"Tungku": "sbh-40",
"Weston": "sbh-41",
}
sarawak = {
"Bau": "swk-0",
"Bekenu": "swk-1",
"Belaga": "swk-2",
"Belawai": "swk-3",
"Belingan": "swk-4",
"Betong": "swk-5",
"Bintulu": "swk-6",
"Bintangor": "swk-7",
"Dalat": "swk-8",
"Daro": "swk-9",
"Debak": "swk-10",
"Engkelili": "swk-11",
"Igan": "swk-12",
"Julau": "swk-13",
"Kabong": "swk-14",
"Kanowit": "swk-15",
"Kapit": "swk-16",
"Kuching": "swk-17",
"Lawas": "swk-18",
"Limbang": "swk-19",
"Lingga": "swk-20",
"Lundu": "swk-21",
"Marudi": "swk-22",
"Matu": "swk-23",
"Meludam": "swk-24",
"Miri": "swk-25",
"Niah": "swk-26",
"Oya": "swk-27",
"Pusa": "swk-28",
"Rajang": "swk-29",
"Roban": "swk-30",
"Samarahan": "swk-31",
"Saratok": "swk-32",
"Sarikei": "swk-33",
"Sebauh": "swk-34",
"Sebuyau": "swk-35",
"Sematan": "swk-36",
"Serian": "swk-37",
"Sibu": "swk-38",
"Sibuti": "swk-39",
"Simunjan": "swk-40",
"Song": "swk-41",
"Spaoh": "swk-42",
"Sri Aman": "swk-43",
"Sundar": "swk-44",
"Tatau": "swk-45",
"Terusan Sarawak": "swk-46",
}
selangor = {
"Gombak": "sgr-0",
"Hulu Langat": "sgr-1",
"Hulu Selangor": "sgr-2",
"Klang": "sgr-3",
"Kuala Langat": "sgr-4",
"Kuala Selangor": "sgr-5",
"Petaling": "sgr-6",
"Rawang": "sgr-7",
"Sabak Bernam": "sgr-8",
"Sepang": "sgr-9",
"Shah Alam": "sgr-10",
}
terengganu = {
"Besut": "trg-0",
"Hulu Terengganu": "trg-1",
"Kemaman/Dungun": "trg-2",
"Kuala Terengganu": "trg-3",
"Marang": "trg-4",
"Setiu": "trg-5",
}
wilayahPersekutuan = {
"Kuala Lumpur": "wlp-0",
"Labuan": "wlp-1",
"Putrajaya": "wlp-2",
}
arrayNegeri = ["Johor", "Kedah", "Kelantan", "Melaka", "Negeri Sembilan", "Pahang", "Perak", "Perlis", "Pulau Pinang", "Sabah", "Sarawak", "Selangor", "Terengganu", "Wilayah Persekutuan"];
arrayKawasan = new Array();
constructor(private authService: AuthService, private storage: Storage, private http: HttpClient, private geolocation: Geolocation) {}
ngOnInit(): void {
this.authService.isLoggedIn().subscribe(res => {
if(res) {
this.storage.get('USER_USERNAME').then(val => {
this.username = val;
});
this.loginState = true;
}
});
}
changeNegeri(value) {
this.arrayKawasan = [];
switch(value) {
case 'Johor':
for(let i of Object.keys(this.johor)) {
this.arrayKawasan.push(i);
}
break;
case 'Kedah':
for(let i of Object.keys(this.kedah)) {
this.arrayKawasan.push(i);
}
break;
case 'Kelantan':
for(let i of Object.keys(this.kelantan)) {
this.arrayKawasan.push(i);
}
break;
case 'Melaka':
for(let i of Object.keys(this.melaka)) {
this.arrayKawasan.push(i);
}
break;
case 'Negeri Sembilan':
for(let i of Object.keys(this.negeriSembilan)) {
this.arrayKawasan.push(i);
}
break;
case 'Pahang':
for(let i of Object.keys(this.pahang)) {
this.arrayKawasan.push(i);
}
break;
case 'Perak':
for(let i of Object.keys(this.perak)) {
this.arrayKawasan.push(i);
}
break;
case 'Perlis':
for(let i of Object.keys(this.perlis)) {
this.arrayKawasan.push(i);
}
break;
case 'Pulau Pinang':
for(let i of Object.keys(this.pulauPinang)) {
this.arrayKawasan.push(i);
}
break;
case 'Sabah':
for(let i of Object.keys(this.sabah)) {
this.arrayKawasan.push(i);
}
break;
case 'Sarawak':
for(let i of Object.keys(this.sarawak)) {
this.arrayKawasan.push(i);
}
break;
case 'Wilayah Persekutuan':
for(let i of Object.keys(this.wilayahPersekutuan)) {
this.arrayKawasan.push(i);
}
break;
default:
this.arrayKawasan.push('Sila Pilih Negeri');
break;
}
}
getWaktuSolatByLocation() {
this.http.get(`${this.baseURL}${this.kodkawasan}?year=${this.year}&month=${this.month}`).subscribe(result => {
this.resultExist = true;
this.waktuSolat = result['data'];
}, err => {
this.resultExist = false;
this.notice = 'Waktu Solat Tidak Ditemui.';
});
}
getWaktuSolatByCoordinates() {
this.geolocation.getCurrentPosition().then(response => {
this.latitude = response.coords.latitude;
this.longitude = response.coords.longitude;
this.http.get(`${this.baseURL}${this.latitude},${this.longitude}?year=${this.year}&month=${this.month}`).subscribe(result => {
this.resultExist = true;
this.waktuSolat = result['data'];
}, err => {
this.resultExist = false;
this.notice = 'Waktu Solat Tidak Ditemui Untuk Lokasi Pengguna';
});
}).catch(err => {
console.log('Lokasi tidak dapat diterima dari GPS: ' + err);
this.notice = 'Lokasi Tidak Ditemui Oleh GPS.';
});
}
}
1 post - 1 participant