Nacho's questions

My idea started when I thought of using a login view to protect my entire application (using guards) and force the user to login if they want to navigate the main component (planet.data in this case).

So I used lazy loading (not relevant) for planet.module and canActivate inside planet-routing.module.ts, but then couldn't navigate to planet-detail because the route couldn't match the URL segment. Displayed error: Cannot match any routes. URL Segment: 'rovers/411634'

I "solved" this problem by adding a planet-detail path as a child of 'rovers'. Now comes the part where I put the router-outlet inside the planet-data template and everything is fine until I click on a planet image to navigate to that image id. The planet-detail image is just below the planet data view. What am I missing? I'd like some guidance in the right direction please. Or any possible solution

Expected behavior: Navigate to image ID (only that path)

// planet-data.component.html

<div class="ui-g">
    <div class="ui-g-12 ui-md-12">
        <div class="ui-g-8">
            <app-title *ngIf="pics"></app-title>
        </div>
        <div class="ui-g-4">
            <app-dropdown-menu (selected)="onSelect($event)"></app-dropdown-menu>
        </div>
    </div>
    <div class="ui-g-12">
        <app-no-image class="margin" [cam]="true" [start]="true" *ngIf="!pics"></app-no-image>
    </div>
    <div>
    </div>
    <router-outlet></router-outlet>
    <app-planet-view class="image" [pics]="pics"></app-planet-view>    
</div>
<app-loader></app-loader>

// planet-detail.component.html

<div class="ui-g">
    <app-image [picById]="picById"></app-image>
</div>

// planet-routing.module.ts

const planetRoutes: Routes = [
    {
        path: '',
        component: PlanetDataComponent,
        children: [
            {
                path: ':id',
                component: PlanetDetailComponent,
                canActivate: [AuthGuardService] },
        ],
        canActivate: [AuthGuardService] },
    ];
@NgModule({
    imports: [
        RouterModule.forChild(planetRoutes)
    ],
    exports: [RouterModule],
})
export class PlanetRoutingModule {}

// app.routing-module.ts

const routes: Routes = [
  { path: 'rovers', loadChildren: './planet/planet.module#PlanetModule' },
  { path: '', pathMatch: 'full', redirectTo: '/home' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

// app.component.html

<header><app-header></app-header></header>
<main>
    <router-outlet></router-outlet>
</main>
<footer><app-footer></app-footer></footer>

In principle I want to tell you that I tried several ways but they did not work. It is an application that uses the Spotify backend, and for this I have a service which handles the requests so that I can use them in my component and extract data from the artist, which works within a specific component. Now, once I navigate from one page to another that data obviously "flies" as the component is recreated. To solve this I decided to create another service which saves the JSON data in objects. I really don't know what I'm doing wrong though as I keep getting them as "undefened" in my other component. Although the data in the service is persistent... Thank you very much in advance!

// artist.service.ts

import { OnInit, Injectable } from '@angular/core';
import { SpotifyService } from './spotify.service';
import { ActivatedRoute } from '@angular/router';

@Injectable()
export class ArtistService implements OnInit {

    artist: any = {};
    tracks: any = [];
    albums: any = [];
    artistRel: any = {};

    constructor(private _spotify: SpotifyService, public route: ActivatedRoute) {}

    ngOnInit() {
        this.route.params.map(params => params['id'])
      .subscribe(id => {
        this._spotify.getArtista(id)
          .subscribe(artist => {
            console.log(artist, 'Artista');
            this.artist = artist;
          });
        this._spotify.getTop(id)
            .map( (resp: any) => resp.tracks)
              .subscribe( tracks => {
                console.log(tracks, 'Pistas');
                this.tracks = tracks;
          });
        this._spotify.getAlbumsArtist(id)
            .map( (resp: any) => resp.items)
              .subscribe( albums => {
                console.log(albums, 'Albums');
                this.albums = albums;
          });
        this._spotify.getRelatedArtists(id)
            .map( (resp:any) => resp)
              .subscribe( related => {
                console.log(related, 'Artistas relacionados');
                this.artistRel = related;
          });
      });
    }
}

    // artist.component.ts

    import { Component, OnInit } from '@angular/core'; 
    import { ActivatedRoute, Data } from '@angular/router'; 
    import { ArtistService } from '../../services/artist.service';

    @Component({   
      selector: 'app-artist',   
      templateUrl: './artist.component.html' })

   export class ArtistComponent implements OnInit {

      artist: any = {};


      constructor(private route: ActivatedRoute, public _artist: ArtistService){}

      ngOnInit() {
        this.artist = this._artist.artist;  } }