I have a project on angular 9. where i want execute Three components in my homepage named header, body, and footer. and i have other two componets login and signup. These are working fine but homepage components are not working. Only header component is loading, others are not. I have found similar questions but they are not solving my problem
what i have tried
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { LoginComponent } from './component/login/login.component';
import { SignupComponent } from './component/signup/signup.component';
import { HeaderComponent } from './component/header/header.component';
import { BodyComponent } from './component/body/body.component';
import { FooterComponent } from './component/footer/footer.component';
const routes: Routes = [
{
path: '' , redirectTo: 'header,body,footer', pathMatch: 'full'
},
{
path: 'header', component:HeaderComponent
},
{
path: 'body' , component:BodyComponent
},
{
path: 'footer', component:FooterComponent
},
{
path: 'login', component:LoginComponent
},
{
path: 'signup' , component:SignupComponent
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
<router-outlet></router-outlet>
Thankyou
you need to create one common component called home component and include header,body,footer into that
home.component.html
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
route
{
path: 'home', component:HomeComponent
},
{
path: '' , redirectTo: 'home', pathMatch: 'full'
},
Related
I am using the following code in visual studio. Here is the routing part when I click to FAQ component through page component and perform according in FAQ component backs to page component.
Here is routing part
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { PageComponent } from './components/page/page.component';
import { FaqComponent } from './Folder/faq/faq.component';
import { HomeComponent } from './Folder/home/home.component';
const routes: Routes = [
{path: 'login', component: HomeComponent },
{path: 'data', component: FaqComponent },
{ path: '', component: PageComponent },
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
FaqComponent=>PageComponent
data => /
<a routerLink="/">xxx</a>
I have this problem where i made three different components with routing. The problem is when i open my different components they loop twice at the moment i open them. What is causing this and how can i get rid of it?
Heres one example component which console.log runs twice when i open it.
import { Component, OnInit } from '#angular/core';
import nameData from '../../names/names.json'
interface INames {
name: string,
amount: number
}
const { names } = nameData
#Component({
selector: 'app-four',
templateUrl: './four.html',
styleUrls: ["./four.css"]
})
export class FourComponent {
nameArray: Array<INames> = names
constructor() {
}
hasName(nameParam: any) {
console.log("miksi tämä tulee kaksi kertaa")
return this.nameArray.some(elem => elem.name === nameParam)
}
}
And here is the app.module.ts and app-routing.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { OneComponent } from './requirements/one/one';
import { TwoComponent } from './requirements/two/two';
import { ThreeComponent } from './requirements/three/three';
import { FourComponent } from './requirements/four/four';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { HeaderComponent } from './header/header';
#NgModule({
declarations: [
AppComponent,
OneComponent,
TwoComponent,
ThreeComponent,
FourComponent,
HeaderComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing-module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home/home';
import { FourComponent } from './requirements/four/four';
import { OneComponent } from './requirements/one/one';
import { ThreeComponent } from './requirements/three/three';
import { TwoComponent } from './requirements/two/two';
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'one', component: OneComponent },
{ path: 'two', component: TwoComponent },
{ path: 'three', component: ThreeComponent },
{ path: 'four', component: FourComponent }
]
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
I'm really confused why it loops the function as soon as i press the components button?
I do not recommand at all to use function in the HTML template, because they will be called everytime the Angular's change detection runs. Angular isn't able to tell if the result of the function will be different after each modification, si Angular will call the function everytime something change in the UI.
You must store the result of the function in a variable. Angular can check that the reference of the variable hasn't change.
You can read more information about it on this medium.
I recommend that you do the following
public fullName: string;
constructor() {
this.updateName();
}
private updateName(nameParam: any) {
console.log("miksi tämä tulee kaksi kertaa");
this.fullName = this.nameArray.some(elem => elem.name === nameParam);
}
{{ fullName }}
I am working on Angular 6 application and have route survey that is config on app root level and then :id to take it survey detail page, I am trying to navigate from component using
this.router.navigate(['/survey'], this.listedSurvey.surveyIdNum);
But I believe I am missing something from router navigate as I am unable to do so.
App route
const routes: Routes = [
{ path:'welcome', component:WelcomeComponent },
{ path:'', redirectTo: 'welcome', pathMatch:'full'},
{ path:'survey', loadChildren: '../survey/survey.module#SurveyModule' },
{ path:'**', component:PageNotFoundComponent}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
survey module
const routes: Routes = [
{
path:'',
component:SurveyComponent,
},
{
path:':id',
component: SurveyFormComponent
}
];
#NgModule({
imports:[
RouterModule.forChild(routes)
],
exports:[]
})
export class SurveyRouting{
}
component
private handleSelectedSurvey(dataItem:any){
this.listedSurvey = dataItem;
const a:number = 2;
//this.router.navigate(['/survey'], this.listedSurvey.surveyIdNum);
this.router.navigate(['/survey'],{queryParams:{id:a}});
}
Change the navigate()
this.router.navigate(['/survey', this.listedSurvey.surveyIdNum]);
Refer: https://angular.io/api/router/Router#navigate
I have the following route defined in app-routes.ts as a separate module
import {NgModule} from '#angular/core';
import {RouterModule, Routes} from "#angular/router";
import {AppComponent} from "./app.component";
...
const routes:Routes = [
{
path: 'new',
component: New
canActivate:[AuthGuard]
},
{
path:'list',
component:List
},
{
path: 'signup',
component: SignupComponentComponent
},
{
path: '',
redirectTo: 'home',
pathMatch:'full'
},
{
path: 'home',
component:HomepageContentComponentComponent
},
{ path: '**',
component: PageNotFoundComponent }
];
#NgModule({
imports:[RouterModule.forRoot(routes)], //
exports: [RouterModule],
providers:[]
})
export class AppRoutingModule{}
I am using the route in the HomePageComponent. How do I test the routing? I know I need to use RouterTestingModule. like follows:
beforeEach(async(() => {
TestBed.configureTestingModule({
imports:[RouterTestingModule.withRoutes(routes)], //routes is undefined here
declarations: [ HomepageContentComponentComponent,
]
})
.compileComponents();
}));
But the routes variable defined as const routes:Routes = ... in AppRoutingModule isn't available here.
Question 1) How in my current setup, I can make routes visible in the specs
Question 2)I thought to create a separate file myroutes.ts which contains only the routes array so that I can use it in the specs but even that doesn't work. Why? ( something like the following)
my-route.ts
const routes:Routes = [
{... ];
Why am I note able to use routes in imports:[RouterTestingModule.withRoutes(routes)] when I created it in a sepafrate file?
I should have exported the routes as export const routes:Routes
I'm developping an Hybrid App with IONIC 4.
The first page is a login (left) the second the home once authenticated (right):
As you can see the content for each tab is hidden on the bottom and only the component header is shown.
Here is some code:
Home routes
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { HomePage } from './home.page';
const routes: Routes = [
{
path: 'tabs',
component: HomePage,
children: [
{
path: 'newsfeed',
outlet: 'newsfeed',
loadChildren: '../news-feed/news-feed.module#NewsFeedPageModule'
},
{
path: 'sitters',
outlet: 'sitters',
loadChildren: '../sitters/sitters.module#SittersPageModule'
},
{
path: 'userprofile',
outlet: 'userprofile',
loadChildren: '../user-profile/user-profile.module#UserProfilePageModule'
}
]
},
{
path: '',
redirectTo: '/home/tabs/(newsfeed:newsfeed)'
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomePageRoutingModule { }
Homepage router outlet and tabs
<ion-tabs color="warning" useRouter="true">
<ion-tab label="Feed" icon="paw" href="/home/tabs/(newsfeed:newsfeed)">
<ion-router-outlet stack name="newsfeed"></ion-router-outlet>
</ion-tab>
<ion-tab label="Sitters" icon="people" href="/home/tabs/(sitters:sitters)">
<ion-router-outlet stack name="sitters"></ion-router-outlet>
</ion-tab>
<ion-tab label="Profile" icon="person" href="/home/tabs/(userprofile:userprofile)">
<ion-router-outlet stack name="userprofile"></ion-router-outlet>
</ion-tab>
</ion-tabs>
Each tab component has somethig like
<ion-header>
<ion-toolbar>
<ion-title>news-feed</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<p>Hello there.</p>
</ion-item>
</ion-list>
</ion-content>
But the content is always on the bottom. Any ideas? Thanks in advance warriors
I just encounter the same issue. And i spent almost 4 days trying to figure it out !
This is because of lazy loading. So you must do that :
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import NewsfeedPage from '../news-feed/news-feed.page';
import SittersPage from '../sitters/sitters.page';
import UserProfilePage from '../user-profile/user-profile.page';
import { HomePage } from './home.page';
const routes: Routes = [
{
path: 'tabs',
component: HomePage,
children: [
{
path: 'newsfeed',
outlet: 'newsfeed',
component: NewsFeedPage
},
{
path: 'sitters',
outlet: 'sitters',
component: SittersPage
},
{
path: 'userprofile',
outlet: 'userprofile',
loadChildren: UserProfilePage
}
]
},
{
path: '',
redirectTo: '/home/tabs/(newsfeed:newsfeed)'
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomePageRoutingModule { }
Don't forget to import the modules in your home.module.ts
Hope it will help.