web-dev-qa-db-fra.com

Erreur: ne peut correspondre à aucun itinéraire. Segment URL: «onglets»

J'essaie de créer une disposition de page d'onglets pour mon application ionic 4. Après mes configurations et ma configuration, j'obtiens l'erreur Erreur: ne peut correspondre à aucun itinéraire. Segment URL: "onglets"

Tout d'abord, lorsque j'ai créé un démarreur par défaut à l'aide du modèle d'onglets, cela ne fonctionne pas. La barre d'onglets s'affiche mais elle n'affiche pas le contenu de l'onglet. Après des jours de recherches et de tests, pas de chance pour le moment. Voyez ce que j'ai actuellement;

Mon Ionic Info

Ionic:
   ionic (Ionic CLI)             : 4.6.0 (C:\Users\Ken\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.17
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.0.7
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.2.0

System:

   NodeJS : v10.13.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: './home/home.module#HomePageModule'
  },
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' }
];

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

tabs.router.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TabsPage } from './tabs.page';


const routes: Routes = [
  {
      path: 'tabs',
      component: TabsPage,
      children: [
          {
              path: 'tab1',
              outlet: 'tab1',
              loadChildren: '../tab1/tab1.module#Tab1PageModule'
          },
          {
              path: 'tab2',
              outlet: 'tab3',
              loadChildren: '../tab2/tab2.module#Tab2PageModule'
          },
          {
              path: 'tab3',
              outlet: 'tab3',
              loadChildren: '../tab3/tab3.module#Tab3PageModule'
          }
      ]
  },
  {
      path: '',
      redirectTo: '/tabs/(one:one)'
  }
];


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

tabs.page.html

<ion-tabs>

  <!-- Tabs -->
  <ion-tab tab="tab1">
    <ion-router-outlet name="tab1"></ion-router-outlet>
  </ion-tab>

  <ion-tab tab="tab2">
    <ion-router-outlet name="tab2"></ion-router-outlet>
  </ion-tab>

  <ion-tab tab="tab3">
    <ion-router-outlet name="tab3"></ion-router-outlet>
  </ion-tab>

  <!-- Tab Buttons -->
  <ion-tab-bar slot="bottom">

    <ion-tab-button tab="tab1" href="/tabs/(tab1:tab1)">
      <ion-icon name="navigate"></ion-icon>
      <ion-label>tab1</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2" href="/tabs/(tab2:tab2)">
      <ion-icon name="person"></ion-icon>
      <ion-label>tab2</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3" href="/tabs/(tab3:tab3)">
      <ion-icon name="bookmarks"></ion-icon>
      <ion-label>tab3</ion-label>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

Je m'attendais à ce que cela charge le contenu de tab1 par défaut lorsque je navigue vers/tabs, puis en cliquant sur l'icône tab2 devrait également afficher le contenu sur tab2page etc. mais j'obtiens l'erreur ci-dessus quand je le fais ionic servir puis ajouter/tabs à l'url. Toute aide ici serait grandement appréciée. Merci d'anticipation.

angularionic-frameworkionic4
4
degee147

Eh bien, j'ai dû mettre à jour l'environnement, puis utiliser le guide des modifications les plus récentes pour que mes pages à onglets fonctionnent. Les ressources suivantes ont été très utiles:

https://forum.ionicframework.com/t/how-to-update-ionic-4-project-to-latest-beta-release/140050/2https: // github.com/ionic-team/ionic/blob/master/CHANGELOG.md#angular-tabs

Maintenant, mon Ionic Info ressemble à ceci:

Ionic:

   ionic (Ionic CLI)             : 4.6.0 (C:\Users\Ken\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

System:

   NodeJS : v10.13.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

Et mon package.json ressemble à ceci:

 "dependencies": {
    "@angular/common": "~7.1.4",
    "@angular/core": "~7.1.4",
    "@angular/forms": "~7.1.4",
    "@angular/http": "~7.1.4",
    "@angular/platform-browser": "~7.1.4",
    "@angular/platform-browser-dynamic": "~7.1.4",
    "@angular/router": "~7.1.4",
    "@ionic-native/core": "5.0.0-beta.21",
    "@ionic-native/splash-screen": "5.0.0-beta.21",
    "@ionic-native/status-bar": "5.0.0-beta.21",
    "@ionic/angular": "4.0.0-rc.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.11.4",
    "@angular-devkit/build-angular": "~0.11.4",
    "@angular-devkit/core": "~7.1.4",
    "@angular-devkit/schematics": "~7.1.4",
    "@angular/cli": "~7.1.4",
    "@angular/compiler": "~7.1.4",
    "@angular/compiler-cli": "~7.1.4",
    "@angular/language-service": "~7.1.4",
    "@ionic/angular-toolkit": "~1.2.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.12.0",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.12.0",
    "TypeScript": "3.1.6"
  }

Maintenant, les exemples sur les Ionic 4 docs https://beta.ionicframework.com/ officiels fonctionnent comme prévu.

0
degee147

Remplacez ces lignes dans tabs.router.module.ts

{
      path: '',
      redirectTo: '/tabs/tabs/(one:one)'
  }

Vous devez ajouter '/ tabs' avant la redirection finale.

1
Abdul Manan