Angular 4 router is appending components on routerLink navigation instead of destroying them -


when navigating within submodule child route sibling child route, instead of router destroying previous component, appends new 1 on navigation forward , backward.

why happening?

starting in /#/subscriber/lookup, moving /#/subscriber/register route

<a [routerlink]="['../register']">subscriber register link</a>

app.routes.ts

/**  * angular 2 decorators , services  */  import { routes } '@angular/router';  /**  * other services  */ import { routeprotection } '../services/route-protection.service'; // import { dataresolver } './app.resolver';  /**  * imported components  */ import { logincomponent } '../login/login.component'; import { notfound404component } '../404/notfound404.component';  export const routes: routes = [{    path: '',    redirectto: 'subscriber',    pathmatch: 'full', }, {    path: 'subscriber',    loadchildren: '../+subscriber/subscriber.module#subscribermodule',    // canactivate: [routeprotection] }, {    path: 'detail',    loadchildren: '../+detail/detail.module#detailmodule',    canactivate: [routeprotection] }, {    path: 'login',    component: logincomponent }, {    path: '**',    component: notfound404component }, {    path: '404',    component: notfound404component }];  // export const routing = routermodule.forroot(routes, { usehash: true});

subscriber.routes.ts

/**  * imported components  */ import { subscriberlookupcomponent } './lookup/subscriber-lookup.component'; import { subscriberregistercomponent } './register/subscriber-register.component';  /*  * shared utilities & other services  */ // import { routeprotection } '../services/route-protection.service'; // import { dataresolver } '../services/app.resolver';  export const subscriberroutes = [{    path: '',    children: [{       path: '',       pathmatch: 'full',       redirectto: 'lookup'    }, {       path: 'lookup',       component: subscriberlookupcomponent, //canactivate: [routeprotection],    }, {       path: 'register',       component: subscriberregistercomponent, //canactivate: [routeprotection],  // resolve: {      'databroughttocomponent': dataresolver   }    }]  },];

app.module.ts

/**  * `appmodule` main entry point angular2's bootstraping process  */ @ngmodule({    bootstrap: [appcomponent],    declarations: [ // declarations contains: components, directives , pipes        // components       appcomponent, logincomponent, notfound404component, // directives       navsidebarcomponent, navheadercomponent, navfootercomponent        // pipes     ],    imports: [ // import other modules       browsermodule, sharedmodule, browseranimationsmodule, routermodule.forroot(routes, {usehash: true}), ngbmodule.forroot()       /*      applicationinsightsmodule.forroot({                instrumentationkey: '116b16e7-0307-4d62-b201-db3ea88a32c7'             })*/     ],    providers: [ // expose our services , providers angular's dependency injection       env_providers, app_providers, auth_providers] })

subscriber.module.ts

@ngmodule({    imports: [       sharedmodule,       commonmodule,       routermodule.forchild(subscriberroutes)    ],    declarations: [ // components / directives / pipes       subscriberlookupcomponent,       subscriberregistercomponent    ],    // exports: [    //    sharedmodule,    //    subscriberlookupcomponent,    //    subscriberregistercomponent    // ] })

this happens on navigation:

appending routes

update: works normal , did not change anything. cannot understand happened, maybe bug angular router or webpack dev server. investigate , update if happens again, if not delete question.

i figured out reason happening me. because viewing angular app through browsersync.

for reason, browsersync's javascript messes angular's router. i'm assuming bug. when view app directly, router works expected.


Comments

Post a Comment

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

running parallel cpu processes in matlab starts command parpool() according documentation , function: [creates] special job on pool of workers, , [connects] matlab client parallel pool. this function takes bit of time execute, on order of 30 seconds. in other multi-cpu paradigms openmp, parallel execution seems totally transparent -- i've never noticed behavior analogous matlab (granted i'm not experienced parallel programming). so, happening between time parpool() called , when finishes executing? takes long? parallel computing toolbox enables run matlab code in parallel using several different paradigms (e.g. jobs , tasks, parfor , spmd , parfeval , batch processing), , run either locally (parallelised across cores in local machine) or remotely (parallelised across machines in cluster - either 1 own, or 1 in cloud). in of these cases, code run on matlab workers , copies of matlab without interactive desktop. if you're intending run on remo...
Read more

angular - DownloadURL return null in below code -

when change file updated in firebase storage when try downloadurl show null. filechange(event: any) { const imagefolder: string = this.employee.id; const filelist: filelist = event.target.files; const file: file = filelist[0]; const storageref = firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file); console.log(storageref.snapshot.downloadurl); } the put() asynchronous. if want url after file uploaded have this: firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file).then((snapshot) => { storageref = snapshot.downloadurl: console.log(snapshot.downloadurl); });
Read more

php - Cannot override Laravel Spark authentication with own implementation -

during login process of laravel spark need request token of remote api. api stores exact same users , passwords laravel spark application. therefore need username , non hashed password of user during authentication process. i thought overriding authenticated method solution problem. in routes/web.php override post /login endpoint , pointing endpoint own logincontroller: <?php namespace app\http\controllers\auth; use illuminate\support\facades\log; use illuminate\http\request; use laravel\spark\http\controllers\auth\logincontroller sparklogincontroller; class logincontroller extends sparklogincontroller { /** * create new login controller instance. * * @return void */ public function __construct() { parent::__construct(); } /** * handle successful authentication attempt. * * @param request $request * @param \illuminate\contracts\auth\authenticatable $user * @return response */ public fu...
Read more