Ionic Capacitor Routing provided by Library not working - ionic-framework

My whole application is built as a Library and with RoutingModules and Page.
I have no problem with my Routing as is. But as soon as i open my Capacitor compiled Application in an Emulator and use change Routes for more than one time i cannot use the Back Button.
When i do so my View crashes, mainly the router outlet and i cannot click on anything in the content of my Application. The only working modules are the ones not provided by my router outlet but in the html
library.components.html
<components-header></components-header>
<div [#slide]="getDepth(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</div>
<components-footer></components-footer>
<components-loading *ngIf="Loading"></components-loading>
library.routing-module.ts
const routes: Routes = [
{
path: 'homepage',
component: HomepageComponent,
data: { animation: 1 }
},
{
path: 'report',
component: ReportComponent,
data: { animation: 2 }
},
{
path: 'settings',
component: SettingsComponent,
data: { animation: 4 }
},
];
#NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.module.ts
import { AppComponent } from './app.component'
import { LibraryModule } from 'my-lib'
#NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
IonicModule.forRoot(),
LibraryModule.forRoot(Environment),
LibraryModule.scan(AppComponent)
],
providers: [
//File,
{
provide: RouteReuseStrategy,
useClass: IonicRouteStrategy
},
],
bootstrap: [AppComponent]
})
export class AppModule { }
it makes no difference if i import the RoutingModule directly inside the Application or only in the Library.

Related

What routing format should I use for storybook routes in an angular project?

For example, the url to my "getting started" story is:
http://localhost:6006/?path=/story/angular-component-library-getting-started--page
How would I access this page via routerLink in a template of a storybook story? Right now I have:
const navbarMenuItems = [
{
displayText: 'Home',
routerLink: '/story/angular-component-library-getting-started--page',
},
{
displayText: 'About',
routerLink: '/story/angular-component-library-getting-started--page',
},
{
displayText: 'Google',
href: 'https://google.com',
},
];
And I get the error: Error: Cannot match any routes. URL Segment: 'story/angular-component-library-getting-started--page'
I have tried playing around with adding slashes, removing them, removing the --page suffix, I tried using the page title, nothing works.
Here are my imports and export, for reference:
import { moduleMetadata, Meta, Story } from '#storybook/angular';
import { APP_BASE_HREF, CommonModule } from '#angular/common';
import { RouterModule } from '#angular/router';
import { SandboxNavbarComponent } from '../../app/sandbox/navbar/navbar.component';
export default {
title: 'Angular Component Library/Navbar',
component: SandboxNavbarComponent,
decorators: [
moduleMetadata({
declarations: [TqlIconComponent],
imports: [
CommonModule,
RouterModule.forRoot([
{
path: 'iframe.html',
component: SandboxNavbarComponent,
pathMatch: 'full',
},
]),
],
providers: [
{
provide: APP_BASE_HREF,
useValue: '/',
},
],
}),
],
} as Meta;

ionic 5 - routing to details page with page id issue

guys , I am creating and ionic app which has details page with page id, I am trying to configure router, its not redirecting its always on main page , my code is below please check ?
parent page route
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { RecepiesPage } from './recepies.page';
const routes: Routes = [
{
path: '',
component: RecepiesPage
},
{
path: 'recipedatail',
loadChildren: () => import('./recipedatail/recipedatail.module').then( m => m.RecipedatailPageModule)
},
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class RecepiesPageRoutingModule {}
details page routing
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { RecipedatailPage } from './recipedatail.page';
const routes: Routes = [
{
path: '',
component: RecipedatailPage
},
{
path: ':recipeId',
loadChildren: () => import('./recipedatail.module').then( m => m.RecipedatailPageModule)
},
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class RecipedatailPageRoutingModule {}
Check the angular documentation for correct router implementation

PageNotFound route in root routes triggered after outsourcing routes to component

my routes used to work fine when they were all together, the notfound route
{ path: '**', component: PageNotFoundComponent}
was at the last place to capture any other not defined paths.
After I moved the recipe routes to its own module these are never called. Instead, the pagenotfound is called.
Everything works fine if I remove the PageNotFoundComponent route from the root routes. Any ideas regarding whats going on here?
This is the root app routing module:
import { Routes, RouterModule } from '#angular/router';
import { NgModule, OnInit } from '#angular/core';
import { ShoppingListComponent } from './shopping-list/shopping-list.component';
import { PageNotFoundComponent } from './errors/page-not-found/page-not-found.component';
import { AuthComponent } from './auth/auth.component';
const appRoutes: Routes = [
{ path: '', redirectTo: 'recipes', pathMatch: 'full' },
{ path: 'shopping-list', component: ShoppingListComponent },
{ path: 'auth', component: AuthComponent },
{ path: '**', component: PageNotFoundComponent}
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule {
OnInit() {
console.log(appRoutes);
}
}
This is the child recipe routing module:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { RecipesComponent } from './recipes.component';
import { AuthGuard } from '../auth/auth.guard';
import { RecipeStartComponent } from './recipe-start/recipe-start.component';
import { RecipeEditComponent } from './recipe-edit/recipe-edit.component';
import { RecipeDetailComponent } from './recipe-detail/recipe-detail.component';
import { RecipesResolverService } from './recipes-resolver.service';
const routes: Routes = [
{
path: 'recipes', component: RecipesComponent, canActivate: [AuthGuard] , children: [
{ path: '', component: RecipeStartComponent },
{ path: 'new', component: RecipeEditComponent },
{
path: ':id',
component: RecipeDetailComponent,
resolve: [RecipesResolverService]
},
{
path: ':id/edit',
component: RecipeEditComponent,
resolve: [RecipesResolverService]
},
]
}
];
#NgModule({
declarations: [
],
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class RecipesRoutingModule {
}
Thanks for taking the time to get this far, any idea would be appreciated.
The problem was that the wildcard route ('**') always should be at the end of your routes list because of the way it works.
It watches all the routes before it, and checks if any given URL, that the user is searching on matches those.
Since you've outsourced your recipes paths, and probably imported them into app.module, those paths get concatenated after the original path list that you have in your app-routing.module.
Therefore your paths in the recipe routing module end up being AFTER the wildcard route ('**'), so they get ignored by it. That's why searching on any URL listed in the recipe routing module will reroute the user to the wild card path, to your PageNotFoundComponent.
Great solution tho.
I solved the problem lazy loading all the routes and then adding the PageNotFound route '**' at the end, hope this helps anyone that faced the same problem:
import { Routes, RouterModule } from '#angular/router';
import { NgModule } from '#angular/core';
import { PageNotFoundComponent } from './errors/page-not-found/page-not-found.component';
// If new and :id children were inverted that would make angular take new as id
// ant that would break the app, the order of the routes is very important
// that's why the 404 PageNotFoundComponent goes the last one
const appRoutes: Routes = [
{ path: '', redirectTo: 'recipes', pathMatch: 'full' },
{ path: 'recipes', loadChildren: () => import('./recipes/recipes.module').then(m => m.RecipesModule) },
{ path: 'shopping-list', loadChildren: () => import('./shopping-list/shopping-list.module').then( m => m.ShoppingListModule) },
{ path: 'auth', loadChildren: () => import('./auth/auth.module').then( m => m.AuthModule) },
{ path: '**', component: PageNotFoundComponent }
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}

angular 2 router is not working on iphone device i have build using cordova

I have createsimple angular2 project make ios build using cordova but my default router is not loading on iOS device it is working fine on browser and android device.Below is the my app-routing.module.ts and also i have set the base href="/" in index.html file
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { DashboardComponent } from './dashboard.component';
import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail.component';
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'detail/:id', component: HeroDetailComponent },
{ path: 'heroes', component: HeroesComponent }
];
#NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
Do this
base href="."
this will work
Actually, cordova with angular 2+, this is what worked for me:
<base href="">
So just empty href.

Angular 2: Too many components in a module?

I'm a currently working on a sign up forms, which has multiple steps and various conditional forms depending on the account type. The module has almost 30 components (a mix of children and parent components) and all of these are imported into the module file. This is making the entire Angular 2 site run really slow, especially after navigating to the sign up forms and then to another route.
Is it possible that there are too many components/service/providers in a module that it's impacting the performance of the site negatively? Is it recommended to break down the multi-step sign up application forms to multiple modules?
import { CommonModule } from '#angular/common';
import { RouterModule } from '#angular/router';
import { NgModule } from '#angular/core';
import { ReactiveFormsModule } from '#angular/forms';
... all the other imports of components/service for this module
export const routes = [{
path: '',
component: parentComponent,
canActivate: [AuthGuard],
resolve: {
someData: someDataResolver
},
children: [
{ path: '', redirectTo: '0', pathMatch: 'full' },
{ path: '0',
component: someComponent1,
resolve: {
someData1: someData1Resolver
}
},
... a bunch more children routes/components
{ path: '20',
component: someComponent20,
resolve: {
someData20: someData1Resolver
}
}
]
}]
#NgModule({
declarations: [ ... ],
entryComponents: [ ... ],
imports: [ ... ],
providers: [ ... ],
})
export default class SampleModule {
static routes = routes
}
Components number in a module matters only on first load time(or page refresh), then they are loaded in memory. Look for issue in other place