Develop Reference

angular JavaScript not working in children component, left side nav dropdown is not working

i have a left side navigation in home component, the navigation dropdown is not working in one of the routing module (admin-routing.module.ts).
the navigation is working in app-routing.module.ts "path:'home'"
the component file is same in the two routing modules
i am new in angular, i am using angular 14v
i have a component name with "home"
i used two routing
app-routing.module.ts
admin-routing.module.ts
This goes inside app-routing.module.ts
const routes: Routes =
[
{ path: 'login', component: LoginComponent },
{ path: 'forgot-password', component: ForgotPasswordComponent },
{ path: 'not-found', component: NotFoundComponent },
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{
path: 'admin',
loadChildren: () =>
import('./modules/admin/admin.module').then((m) => m.AdminModule)
},
{path:'home', component:HomeComponent},
{ path: '**', component: NotFoundComponent },
];
This goes inside admin-routing.module.ts
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full'},
{ path: 'dashboard', component: DashboardComponent }
]
}
];
i also added the script file path in angular.json
the navigation dropdown and toogle is not working in admin-routing.module.ts's "home path"
i hosted these files in my server
working navigation link is http://angular.byteinnovations.in/home
this navigation is not working http://angular.byteinnovations.in/admin/home

As i see in your routing
const routes: Routes = [
{
path: '',
component:HomeComponent,
children:
[
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent }
]
}
];
You are using HomeComponent two times can you check and do it in this way on your adminRouting Module
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent }
]

Rerouting sub paths to a main path in angular

In my routes file I am trying to achieve the following.
const routes: Routes = [{ ...
{ path: '', component: MainComponent, children: [
{ path: 'routeA', component: ComponentA },
{ path: 'routeA/subA', component: ComponentAA},
{ path: 'routeA/subB', component: ComponentAB},
{ path: 'routeA/**', redirectTo: 'routeA'}
]}, ...}
The intention being that routeA/ will redirect back to routeA, but the above code doesnt achieve the intended effect.

angular 4 child routing

Im trying to write routing for childs. The problem Im having is with path not beeing inserted in url bar of thhe browser properly. Below the code.
router.module
const routes: Routes = [
{path: 'menu', component: MenuComponent, canActivate: [AuthGuard],
children: [
{ path: 'upload', component: DrawingUploadComponent },
{ path: 'account', component: AccountComponent },
{ path: 'projects', component: ProjectListComponent }
]}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MenuRoutingModule {}
menu.component
<nav>
<a routerLink="/projects" routerLinkActive="active">Projects</a>
<a routerLink="/upload" routerLinkActive="active">Upload</a>
<a routerLink="/account" routerLinkActive="active">Account</a>
</nav>
MENU COMPONENT
<router-outlet></router-outlet>
the parent component:
const routes: Routes = [
{path: 'login', component: LoginComponent},
{path: 'register', component: RegistrationComponent},
{path: "", redirectTo: "login", pathMatch: "full"},
{path: 'menu', component: MenuComponent, canActivate: [AuthGuard]}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
So the problem is when im under "/menu" the menu component is displayed, now when Im clicking on any link e.g
<a routerLink="/upload" routerLinkActive="active">Upload</a>
im getting console error
Cannot match any routes. URL Segment: 'upload'
Error: Cannot match any routes. URL Segment: 'upload'
but when i'd type the route by hand in browser bar "/menu/upload" I'm getting the proper result

When your route starts with /, that refers to the root of your app. You'll need to remove that, or else use the full path e.g. routerLink="/menu/upload".

Angular 2 router - aux route on the root url

I want to load aux route on the / URL but it does not work. For example, I want to load in my homepage the LoginComponent.
const routes : Routes = [
{
path: '',
pathMatch: 'full',
component: HomeComponent
},
{
path: 'login',
outlet: 'auth',
component: LoginComponent
}
];
<router-outlet></router-outlet>
<router-outlet name="auth"></router-outlet>
So now I am trying to access this URL and expecting to get the HomeComponent in the primary outlet and the LoginComponent in the auth outlet:
http://localhost:4200/(auth:login)
But it only loads the LoginComponent and not the HomeComponent.

You need to define redirect route:
const routes : Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent
},
{
path: 'login',
outlet: 'auth',
component: LoginComponent
}
];
<a [routerLink]="[{ outlets: { 'auth': ['login'] } }]">Sign in</a>
Or:
http://localhost/home(auth:login)

Using children states in Angular 2 router throws error

Heres my router config:
import { RouterConfig } from '#angular/router';
...
export const AppRoutes : RouterConfig = [
{
path: '',
redirectTo: 'myview',
pathMatch: 'full'
},
{
path: 'myview',
component: ViewComponent,
children: [{
path: 'hello',
component: HelloComponent
}]
},
];
When I try to load the page I get the following error:
EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: ''
However, when I make the child route a sibling, like this:
export const AppRoutes : RouterConfig = [
{
path: '',
redirectTo: 'myview',
pathMatch: 'full'
},
{
path: 'myview',
component: ViewComponent
},
{
path: 'hello',
component: HelloComponent
}
];
I am able to load the page fine without any errors. What am I doing wrong?

Because the way you have designed it is on initial load it is landing on ViewComponent component but ViewComponent has child so have to redirect to inner component.
You need to add one more route to children routes which will redirect '' to hello component.
export const AppRoutes: RouterConfig = [
{ path: '', redirectTo: 'myview', pathMatch: 'full'},
{ path: 'myview', component: ViewComponent,
children: [
{ path: '', pathMatch: 'full', redirectTo: 'hello' }, //added redirection to hello
{ path: 'hello', component: HelloComponent }
]
}
];
Note: Make sure you have <router-outlet></router-outlet> in myview component HTML so that child route view can be shown
correctly.

You are not using any route for '' in your RouterConfig.
As after redirect the new path will be https://yourdomain/myview/. And for this you have only created https://yourdomain/myview/hello route in routeCofig
I have created an app in angular 2. You can check the source here on Github.
Just add following line to your children path array:
{path: '', component: HelloComponent }
Check hero.routes.ts and dragon.routes.ts files they will help you understand routing more clearly. Hope it will help. Thank you.