简体   繁体   中英

Angular 4 router loading all the components

I am currently working on a project with Angular 4. Until today I had no problems with Router but I use Angular Materials components and this morning I saw that I had to update the Angular Material package. I executed :

npm update

Since then when I use a RouterLink, the component is loading on top of the actual page. So for example if I'm in the '/dashboard' and i want to go to the '/signin' page. The 'signin' component loads on top of the dashboard and so in the same page I have the dashboard component and the signin component.

Have you an idea to help me out on this ?

Edit :

My components are no more responsives, if I use a *ngFor with an array defined in my components, if the array changes the component with *ngFor doesn't change... I think that all of my problems are linked but I can't see how.

How I use RouterLink :

<a md-tab-link routerLink="/login" routerLinkActive="active">Login</a>

The code of my app.routing.module.ts :

    import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SentierDetailComponent } from './map/sentier/sentier-detail.component'
import { DashboardComponent }   from './dashboard/dashboard.component';
import { LoginComponent } from './login/login.component';
import { SignInComponent } from './signin/signin.component';
import { MembreComponent } from './membre/membre.component'
import { FormComponent } from './form.component'

const routes: Routes = [
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
    { path: 'dashboard',  component: DashboardComponent },
    { path: 'login', component: LoginComponent},
    { path: 'signin', component: SignInComponent},
    { path: 'sentier-detail/:id', component: SentierDetailComponent},
    { path: 'membres', component: MembreComponent},
    { path:'evenement', component: FormComponent}
];

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

Well, it seems that the error was coming from the file app.module.ts. I took an old version of it from an old version of my project and everything is fine now but still I don't know exactly the source of this bug.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM