My page from folder.page.html takes over others

Ionic Framework Ionic Angular
1

My page from folder.page.html takes over others

Hello everyone,

I’ve been stuck on this issue for a while. I have my folder.page.html page taking over the others. I did several tests mainly on the landscapes.page.html page before taking care of the others. I access the path (http://localhost:8100/folder/paysages) well, however the html page does not appear and remains on that of folder.page.html, here are different codes so that you can help me ?

Thanks in advance !
You are the best… ^^

app.component.ts :slight_smile:

import { Component } from '@angular/core';
import { PaysagesPageModule } from './folder/paysages/paysages.module';
import { GaleriePage } from './folder/galerie/galerie.page';
import { CombatPage } from './folder/combat/combat.page';
import { PnjPage } from './folder/pnj/pnj.page';
import { PresentationPage } from './folder/presentation/presentation.page';
import { BandeherosPage } from './folder/bandeheros/bandeheros.page';



@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
public appPages = [
  { title: '', url: '/folder', img: 'assets/icons/guidehorizontal.png' },
  { title: '', url: '/folder/presentation', img: 'assets/icons/presentation.png' },
  { title: '', url: '/folder/paysages/', img: 'assets/icons/paysage.png' },
  { title: '', url: '/folder/combat', img: 'assets/icons/combat.png' },
  { title: '', url: '/folder/bandeheros', img: 'assets/icons/bandeheros.png' },
  { title: '', url: '/folder/pnj', img: 'assets/icons/pnj.png' },
  { title: '', url: '/folder/galerie', img: 'assets/icons/galerie.png' },
];

  constructor() {}

}

app-routing.module.ts :

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { PaysagesPage } from './folder/paysages/paysages.page';
import { PaysagesPageModule } from './folder/paysages/paysages.module';


const routes: Routes = [

    
  { path: 'folder/:id', loadChildren: () => import('./folder/folder.module').then( m => m.FolderPageModule)},
  { path: 'paysages/:id', loadChildren: () => import('./folder/paysages/paysages.module').then(m => m.PaysagesPageModule) },
  { path: 'combat', loadChildren: () => import('./folder/combat/combat.module').then( m => m.CombatPageModule) },
  { path: 'pnj', loadChildren: () => import('./folder/pnj/pnj.module').then( m => m.PnjPageModule) },
  { path: 'presentation', loadChildren: () => import('./folder/presentation/presentation.module').then( m => m.PresentationPageModule) },
  { path: 'bandeheros', loadChildren: () => import('./folder/bandeheros/bandeheros.module').then( m => m.BandeherosPageModule) },
  { path: 'galerie', loadChildren: () => import('./folder/galerie/galerie.module').then( m => m.GaleriePageModule) }
];

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

folder.page.html :

<ion-content [fullscreen]="true">
  <ion-header collapse="">

    <ion-toolbar>
	<ion-buttons slot="start">
	  <ion-menu-button>{{ folderId }}</ion-menu-button>
      <ion-title size="large"></ion-title>
	  </ion-buttons>
	  
    </ion-toolbar>
  </ion-header>
<ion-label>
 <object type="text/html" data="https://www.g-u-i-d-e.fr/Presentation.html" width="100%" height="90%"></object>
</ion-label>
  
  <ion-footer collapse="">

    <ion-toolbar>
	<ion-buttons>
	  <ion-menu-button>{{ folderId }}</ion-menu-button>
      <ion-title size="large"></ion-title>
	  </ion-buttons>
	  
    </ion-toolbar>
  </ion-footer>
  
</ion-content>

folder.page.ts :

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-folder',
  templateUrl: './folder.page.html',
  styleUrls: ['./folder.page.scss'],
})
export class FolderPage implements OnInit {

  folderId!: string;

  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.folderId = this.activatedRoute.snapshot.paramMap.get('id') ?? '';

  }

}

paysages.page.html :

<ion-content [fullscreen]="true">
  <ion-header collapse="">

    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
        <ion-title size="large"></ion-title>
      </ion-buttons>
      
    </ion-toolbar>
  </ion-header>
  
<ion-label>
 <object type="text/html" data="https://www.g-u-i-d-e.fr/Paysages.html" width="100%" height="90%"></object>
</ion-label>
  
  <ion-footer collapse="">

    <ion-toolbar>
      <ion-buttons>
        <ion-menu-button></ion-menu-button>
        <ion-title size="large"></ion-title>
      </ion-buttons>
      
    </ion-toolbar>
  </ion-footer>
  
</ion-content>

paysages.page.ts :

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-paysages',
  templateUrl: './paysages.page.html',
  styleUrls: ['./paysages.page.scss'],
})
export class PaysagesPage implements OnInit {

  
  paysagesId!: string;

  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.paysagesId = this.activatedRoute.snapshot.paramMap.get('id') ?? '';

  }

}