El componente Modal y el Modal Controller

Hola

No me redireccionaba al modal, lo resolvó agregando la línea
modal.present();
así:

async showSongs(artist) {
const songs = await this.musicService.getArtistTopTracks(artist.id);
const modal = await this.modalController.create({
component: SongsModalPage,
componentProps: {
songs: songs.tracks,
artist: artist.name
}
});
modal.present();
}

showSong(artist) {
this.sharedService.getArtistsTopTracks(artist.id)
.subscribe(songs => {
this.modalSong(songs, artist);
}, error => {
console.log(error);
});

}

async modalSong(songs, artist) {
const modal = await this.modalController.create({
component: SongsModalPage,
componentProps: {
songs: songs.tracks,
artist: artist.name
}
});

return await modal.present();

}

Recordar que la API cambió de
https://platzi-music-api.now.sh
a
https://platzi-music-api.herokuapp.com

por lo tanto se tiene

getNewReleases() {
    return fetch("https://platzi-music-api.herokuapp.com/browse/new-releases").then(
      response=> response.json()
      );
  }

  getArtistsTopTracks(artistId){
    return fetch(
      "https://platzi-music-api.herokuapp.com/artists/${artistId}/top-tracks?country=CO"
      ).then(
      response=> response.json()
      );
  }

Saludos al tratar de dar clic en el avatar del artista me arroja el siguiente error:

Access to fetch at 'http s://platzi-music-api.now.sh/artists/0yNSzH5nZmHzeE2xn6Xshb/top-tracks?country=CO' from origin 'http ://localhost:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Hacer un get segun un parametro especifico

getArtistTopTracks(artistId){
    return fetch("https://platzi-music-api.now.sh/artists/${artistId}/top-tracks?country=CO").then(
        response => response.json()
    );
}

Crear un modal en base a un API get (este es el mismo codigo que publico odortega mas abajo)

async showSongs(artist) {
    const songs = await this.musicService.getArtistTopTracks(artist.id);
    const modal = await this.modalController.create({
        component: SongsModalPage,
        componentProps: {
            songs: songs.tracks,
            artist: artist.name
            
        }
        
    });
modal.present();
}

• Los modal se deben crear como paginas
• modalController se tendra que poner en el constructor

Link de repo al commit de la clase asi cosas que cambian hoy en dia (al menos a mi) tuve que poner como Any en el archivo de platzi-music.service.ts para que no me tire error en el home.page.ts al llamar songs: songs.tracks

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as dataArtists from './artists.json';

@Injectable({
  providedIn: 'root'
})
export class PlatziMusicService {

  private urlapi = 'https://platzi-music-api.herokuapp.com';

  constructor(private http: HttpClient) { }

  getArtists() {
    return dataArtists;
    }

  getNewReleases(): any{
    return this.http.get(`${this.urlapi}/browse/new-releases`);
  }

  getArtistTopTracks(artistId): any {
    return this.http.get(`${this.urlapi}/artists/${artistId}/top-tracks?country=EC`);
  }

}

crearemos una nueva page llamada songs-modal

ionic generate page songs-modal

importamos el modulo de songs-modal en nuestro modulo raiz app.module.ts

app.module.ts

import { SongsModalPageModule } from './songs-modal/songs-modal.module';

@NgModule({
 imports: [
	 SongsModalPageModule,
 ],
})

cambiamos el consumo del API en el servicio de platzi-music

platzi-music.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as dataArtists from './artists.json';

@Injectable({
 providedIn: 'root'
})

export class PlatziMusicService {
 private urlapi = 'https://platzi-music-api.herokuapp.com';
 
 constructor(
 private http: HttpClient
 ) { }

 getNewreleases(): any {
	 return this.http.get(`${this.urlapi}/browse/new-releases`);
 }
 
 getArtists() {
	 return dataArtists;
 }

 getArtistTopTracks(artistId) {
	 return this.http.get(`${this.urlapi}/artists/${artistId}/top-tracks?country=EC`);
 }
}

posteriormente ingresamos el modal y consumimos la nueva función de nuestro servicio platzi-music en la page home

home.page.ts

import { SongsModalPage } from '../songs-modal/songs-modal.page';


showSongs(artist) {
 this.musicService.getArtistTopTracks(artist.id)
 .subscribe(songs => {
	 this.modalSong(songs, artist);
 }, error => {
	 console.error(error);
	 });
 }

 async modalSong(songs, artist) {
	 const modal = await this.modalController.create({
		 component: SongsModalPage,
		 componentProps: {
			 songs: songs.tracks,
			 artist: artist.name
		 }
	 });
	 return await modal.present();
 }

Saludos al tratar de abrir el modal me arroja el siguiente error:

ERROR Error: Uncaught (in promise): ReferenceError: tracks is not defined
ReferenceError: tracks is not defined

si le ha sucedido a alguien aqui, por favor ayudenme a resolverlo.

el import de

import {SongsModalPageModule} from './songs-modal/songs-modal.module';

no se importaria en home-module? ya que es en ese modulo que se utiliza