which is most recommended word-cloud for angular 7

i am looking for the most suitable word-cloud for angular 7

i need 2 thinks which i can split into 2: 1. genetaring the right array for the word cloud from a string of data – this point wants me to go to the best perfomance option, as i have a lot of data. 2. displaying a pretty wordcloud based on the array of data and words count.

i tried to search over offered solutions and was very confused. i have several questions regarding:

-i saw lot of people recommending jason davies code https://www.jasondavies.com/wordcloud/ it looks very pretty for me, and i thought of using it, but would like to know pros and cons, and if it is suitable for angular 7 in addition couln’t figure out where to download it from, and all the implemintation data. is there some good documentation?

-i also saw there is a use of angular4-word-cloud but i could not find a demo of it, is it very different from jason davies codes?

-in addition i saw a use of wordcloud2, i saw it is java script based, is there a good tutorial for this ? how hard is it for use comparing the options above?

i would like to know of any other recommended word clouds and any documentation about it

angular 8 fails going to lazy loaded modules directly after prod deploy

I have downloaded lazy-loading-ngmodules.zip from https://angular.io/guide/lazy-loading-ngmodules. I ran the app using ng serve with no problem. I can browse url http://localhost:4200 and click on Customers and Orders which both are lazy loading modules. I also can directly browse the url – http://localhost:4200/customers.

Then I built production version using ng build –prod and hosted it on IIS. I can browse the url http://localhost:80 and click on Customers and Orders to navigate to lazy loading modules. No problems!!! However, if I browse directly to the url http://localhost:80/customers, I got HTTP 404 Error. Why??? I need to directly browse to the lazy loading modules. How should I do it?

Thanks in advance!!!

Desconectar usuários ou autentica-los novamente caso o servidor seja reiniciado – Angular 2

Tenho uma aplicação em Angular 2 que está consumindo uma API em Nodejs. Essa aplicação possui autenticação JWT. Meu problema é o seguinte: Quando o servidor em node é reiniciado, o usuário continua conseguindo navegar entre as páginas, porém, não visualiza o que está sendo requisitado para a API.

Isso porque quando o usuário se conecta ao sistema, eu guardo seu token no localStorage da aplicação e crio uma sessão no node. Mesmo que o servidor esteja offline, a variável no localStorage continuará presente.

Aqui está meu canActivate (protegendo todas as rotas e redirecionando caso necessário):

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {  const currentUser = this.authenticationService.currentUserValue; if (currentUser) {   // authorised so return true   if (currentUser.permissions.basic_permissions === true && currentUser.permissions.owner === false) {      this.router.navigate(["/demo"]);   }   return true; }  // not logged in so redirect to login page with the return url this.router.navigate(["/login"], { queryParams: { returnUrl: state.url } }); return false; } 

O serviço de autenticação, realizando o login:

login(username: string, password: string) { return this.http   .post<any>(     `$  {this.APIEndpoint}/login`,     { username, password },     { withCredentials: true }   )   .pipe(     map(user => {       if (user && user.userInfo.token) {         localStorage.setItem("currentUser", JSON.stringify(user.userInfo));         this.currentUserSubject.next(user.userInfo);         this.loggedIn = true;       }        return user.userInfo;     })   ); } 

Error Angular component no detectado en la importación

//Este es mi archivo de rutas, y cuando hago la importacion de heroe, no me lo detecta, pero si comento la linea del { path: ‘heroe’, component: HeroeComponent }, todo funciona bien.

import { Routes, RouterModule } from '@angular/router'; import { NgModule } from '@angular/core';  import { HomeComponent } from './components/home/home.component'; import { HeroesComponent } from './Components/heroes/heroes.component'; import { HeroeComponent } from './Components/heroe/heroe.component'; import { AboutComponent } from './Components/about/about.component';  const APP_ROUTES: Routes = [     { path: 'home', component: HomeComponent },     { path: 'heroes', component: HeroesComponent },     { path: 'heroe', component: HeroeComponent },     { path: 'about', component: AboutComponent },     { path: '**', pathMatch: 'full', redirectTo: 'home' } ];  @NgModule({     imports: [RouterModule.forChild(APP_ROUTES)],     exports: [RouterModule] }) export class RoutingModule {} // export const app_routing = RouterModule.forRoot(APP_ROUTES); 

Angular 7 Component Abuse

I am currently working on a new project and are migrating to Angular 8. I’m noticing in code reviews that developers are basically putting just about anything and everything into a component. These components are single use and to me make no sense to split them out from the main component.

When I say everything I mean everything, a drop down list, a button group, a context menu and in some cases even a single input. This is blowing up the code base and introducing what I would consider unnecessary complexity, bloat and a maintenance nightmare in the making. I understand the importance of components but is there is any literature or authoritative guidance on effective component use and abuse?

problema con slider multi item en bootstrap y angular

tengo un carousel multi-item de 3 item por vez, cuando hago click en el boton siguiente o anterior se muestran otros 3 nuevos items y así sucesivamente. el problema que tengo ahorita es que estoy haciendo binding entre el .ts y el .html para poder obtener el valor de la variable Z que modifico cada vez que hago click en el Next o en el Previous ya que esa variable Z la uitlizo como indice de un vector donde tengo alamacenadas las imagenes que muestro en el slider. por eso hago referencia a z , z+1 y z+2 para las 3 primeras imagenes y luego z+3, z+4 y z+5 para las siguientes 3 imagenes cuando se hace click en el boton previous. el gran problema que estoy viendo es que cuando hago click en el boton siguiente, la variable Z se modifica obviamente y todo se me vuelve un desastre xq los valores se mezclan. Como podría mejorar esto? se que ese slider tiene demasido código repetitivo pero intente hacerlo con algunos frameworks ya que con bootstrap no se puede originalmente y no logre hacerlo funcionar. aquí dejo el código que tengo:

<div class="container" id="contenedor-global">     <div class="d-flex justify-content-center align-items-center">        <div class="d-flex align-items-center justify-content-center">         <div> <span class="text-hot">           <b>HOT</b> </span> </div>         </div>         <div id="div-redondo" class="d-flex ml-2 align-items-center justify-content-center">           <div class="text-hot align-middle">               list           </div>         </div>     </div>   <!--<div *ngIf="inmuebles!=null; else espera">-->   <div class="carousel slide " data-ride="carousel" data-interval="false" id="multi_item">     <div class="carousel-inner">       <div class="carousel-item active">         <div class="row">           <div class="col-sm-4">             <div class="card" style="width: 18rem;">               <div class="" *ngIf="inmuebles[z].fotos[0]!=''; else sino">                   <h1>{{z}}</h1>                   <img class="card-img-top" id="imgPortada" src="{https://es.stackoverflow.com/questions/271134/problema-con-slider-multi-item-en-bootstrap-y-angular}{{inmuebles[z].id}}_{{inmuebles[z].fotos[0]}}" alt="Card image cap">               </div>               <ng-template #sino>                 <h1>{{z}}</h1>                 <img class="card-img-top" id="imgPortada" src="../assets/images/slider/3.jpg" alt="Card image cap">               </ng-template>                <div class="card-body ">                 <div class="">                   <i class="fas fa-cart-plus "></i> <h6 class="d-inline-flex ml-2" >Precio: {{inmuebles[i].precio}}</h6>                 </div>                 <div class="">                   <i class="fas fa-map-marker-alt"></i> <h6 class="d-inline-flex ml-2">Ubicacion</h6>                 </div>                 <div class="">                   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ver detalles</button>                 </div>               <!-- Modal -->               <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">                 <div class="modal-dialog" role="document">                   <div class="modal-content">                     <div class="modal-header">                       <div class="alert alert-primary text-center" style="width: 100%;" role="alert">Apartamento en Valencia</div>                       <button type="button" class="close" data-dismiss="modal" aria-label="Close">                         <span aria-hidden="true">&times;</span>                       </button>                     </div>                     <div class="modal-body">                       <div class="row">                           <div class="col-6"> <img src="../assets/images/slider/2.jpg" alt="" style="height: 100%; width:100%;"> </div>                           <div class="col-6"> <img src="../assets/images/slider/3.jpg" alt="" style="height: 100%; width:100%;"> </div>                       </div>                     </div>                     <table class="table">                       <thead>                         <tr>                           <th scope="col" class="text-center">Categoría</th>                           <th scope="col" class="text-center">Fecha de Publicación</th>                           <th scope="col" class="text-center">Localización</th>                         </tr>                       </thead>                       <tbody>                         <tr>                           <td class="text-center">Apartamentos</td>                           <td class="text-center">15/02/19</td>                           <td class="text-center">Valencia</td>                         </tr>                       </tbody>                     </table>                     <div class="modal-footer">                       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>                     </div>                   </div>                 </div>               </div>               </div>             </div>           </div>           <div class="col-sm-4">             <div class="card" style="width: 18rem;">               <div class="" *ngIf="inmuebles[z+1].fotos[0]!=''; else sino">                   <h1>{{z+1}}</h1>                   <img class="card-img-top" id="imgPortada" src="{https://es.stackoverflow.com/questions/271134/problema-con-slider-multi-item-en-bootstrap-y-angular}{{inmuebles[z+1].id}}_{{inmuebles[z+1].fotos[0]}}" alt="Card image cap">               </div>               <ng-template #sino>                 <h1>{{z+1}}</h1>                 <img class="card-img-top" id="imgPortada" src="../assets/images/slider/3.jpg" alt="Card image cap">               </ng-template>               <h1>{{inmuebles[z+1].fotos[0]}}</h1>               <div class="card-body">                 <div class="d-inline-flex">                   <i class="fas fa-cart-plus"></i><h6>Precio: {{inmuebles[i+1].precio}}</h6>                 </div>                 <div class="d-inline-flex">                   <i class="fas fa-map-marker-alt"></i><h6>Ubicacion</h6>                 </div>               <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ver detalles</button>               <!-- Modal -->               <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">                 <div class="modal-dialog" role="document">                   <div class="modal-content">                     <div class="modal-header">                       <div class="alert alert-primary text-center" style="width: 100%;" role="alert">Apartamento en Valencia</div>                       <button type="button" class="close" data-dismiss="modal" aria-label="Close">                         <span aria-hidden="true">&times;</span>                       </button>                     </div>                     <div class="modal-body">                       <div class="row">                           <div class="col-6"> <img src="../assets/images/slider/2.jpg" alt="" style="height: 100%; width:100%;"> </div>                           <div class="col-6"> <img src="../assets/images/slider/3.jpg" alt="" style="height: 100%; width:100%;"> </div>                       </div>                     </div>                     <table class="table">                       <thead>                         <tr>                           <th scope="col" class="text-center">Categoría</th>                           <th scope="col" class="text-center">Fecha de Publicación</th>                           <th scope="col" class="text-center">Localización</th>                         </tr>                       </thead>                       <tbody>                         <tr>                           <td class="text-center">Apartamentos</td>                           <td class="text-center">15/02/19</td>                           <td class="text-center">Valencia</td>                         </tr>                       </tbody>                     </table>                     <div class="modal-footer">                       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>                     </div>                   </div>                 </div>               </div>               </div>             </div>           </div>           <div class="col-sm-4">             <div class="card" style="width: 18rem;">                <div class="" *ngIf="inmuebles[z+2].fotos[0]!=''; else sino">                 <h1>{{z+2}}</h1>                   <img class="card-img-top" id="imgPortada" src="{https://es.stackoverflow.com/questions/271134/problema-con-slider-multi-item-en-bootstrap-y-angular}{{inmuebles[z+2].id}}_{{inmuebles[z+2].fotos[0]}}" alt="Card image cap">               </div>               <ng-template #sino>                 <h1>{{z+2}}</h1>                 <img class="card-img-top" id="imgPortada" src="../assets/images/slider/3.jpg" alt="Card image cap">               </ng-template>               <div class="card-body">                 <div class="d-inline-flex">                   <i class="fas fa-cart-plus"></i><h6>Precio: {{inmuebles[i+2].precio}}</h6>                 </div>                 <div class="d-inline-flex">                   <i class="fas fa-map-marker-alt"></i><h6>Ubicacion</h6>                 </div>               <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ver detalles</button>               <!-- Modal -->               <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">                 <div class="modal-dialog" role="document">                   <div class="modal-content">                     <div class="modal-header">                       <div class="alert alert-primary text-center" style="width: 100%;" role="alert">Apartamento en Valencia</div>                       <button type="button" class="close" data-dismiss="modal" aria-label="Close">                         <span aria-hidden="true">&times;</span>                       </button>                     </div>                     <div class="modal-body">                       <div class="row">                           <div class="col-6"> <img src="../assets/images/slider/2.jpg" alt="" style="height: 100%; width:100%;"> </div>                           <div class="col-6"> <img src="../assets/images/slider/3.jpg" alt="" style="height: 100%; width:100%;"> </div>                       </div>                     </div>                     <table class="table">                       <thead>                         <tr>                           <th scope="col" class="text-center">Categoría</th>                           <th scope="col" class="text-center">Fecha de Publicación</th>                           <th scope="col" class="text-center">Localización</th>                         </tr>                       </thead>                       <tbody>                         <tr>                           <td class="text-center">Apartamentos</td>                           <td class="text-center">15/02/19</td>                           <td class="text-center">Valencia</td>                         </tr>                       </tbody>                     </table>                     <div class="modal-footer ">                       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>                     </div>                   </div>                 </div>               </div>               </div>             </div>           </div>         </div>       </div>         <div class="carousel-item">         <div class="row">           <div class="col-sm-4">             <div class="card" style="width: 18rem;">                <div class="" *ngIf="inmuebles[z+3].fotos[0]!=''; else sino">                 <h1>{{z+3}}</h1>                   <img class="card-img-top" id="imgPortada" src="{https://es.stackoverflow.com/questions/271134/problema-con-slider-multi-item-en-bootstrap-y-angular}{{inmuebles[z+3].id}}_{{inmuebles[z+3].fotos[0]}}" alt="Card image cap">               </div>               <ng-template #sino>                 <h1>{{z+3}}</h1>                 <img class="card-img-top" id="imgPortada" src="../assets/images/slider/3.jpg" alt="Card image cap">               </ng-template>                <div class="card-body">                 <div class="d-inline-flex">                   <i class="fas fa-cart-plus"></i><h6>Precio: {{inmuebles[i+3].precio}}</h6>                 </div>                 <div class="d-inline-flex">                   <i class="fas fa-map-marker-alt"></i><h6>Ubicacion</h6>                 </div>               <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ver detalles</button>               <!-- Modal -->               <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">                 <div class="modal-dialog" role="document">                   <div class="modal-content">                     <div class="modal-header">                       <div class="alert alert-primary text-center" style="width: 100%;" role="alert">Apartamento en Valencia</div>                       <button type="button" class="close" data-dismiss="modal" aria-label="Close">                         <span aria-hidden="true">&times;</span>                       </button>                     </div>                     <div class="modal-body">                       <div class="row">                           <div class="col-6"> <img src="../assets/images/slider/2.jpg" alt="" style="height: 100%; width:100%;"> </div>                           <div class="col-6"> <img src="../assets/images/slider/3.jpg" alt="" style="height: 100%; width:100%;"> </div>                       </div>                     </div>                     <table class="table">                       <thead>                         <tr>                           <th scope="col" class="text-center">Categoría</th>                           <th scope="col" class="text-center">Fecha de Publicación</th>                           <th scope="col" class="text-center">Localización</th>                         </tr>                       </thead>                       <tbody>                         <tr>                           <td class="text-center">Apartamentos</td>                           <td class="text-center">15/02/19</td>                           <td class="text-center">Valencia</td>                         </tr>                       </tbody>                     </table>                     <div class="modal-footer">                       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>                     </div>                   </div>                 </div>               </div>               </div>             </div>           </div>           <div class="col-sm-4">             <div class="card" style="width: 18rem;">                <div class="" *ngIf="inmuebles[z+4].fotos[0]!=''; else sino">                 <h1>{{z+4}}</h1>                   <img class="card-img-top" id="imgPortada" src="{https://es.stackoverflow.com/questions/271134/problema-con-slider-multi-item-en-bootstrap-y-angular}{{inmuebles[z+4].id}}_{{inmuebles[z+4].fotos[0]}}" alt="Card image cap">               </div>               <ng-template #sino>                 <h1>{{z+4}}</h1>                 <img class="card-img-top" id="imgPortada" src="../assets/images/slider/3.jpg" alt="Card image cap">               </ng-template>                <div class="card-body">                 <div class="d-inline-flex">                   <h6>Precio: {{inmuebles[i+4].precio}}</h6>                 </div>                 <div class="d-inline-flex">                   <i class="fas fa-map-marker-alt"></i><h6>Ubicacion</h6>                 </div>               <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ver detalles</button>               <!-- Modal -->               <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">                 <div class="modal-dialog" role="document">                   <div class="modal-content">                     <div class="modal-header">                       <div class="alert alert-primary text-center" style="width: 100%;" role="alert">Apartamento en Valencia</div>                       <button type="button" class="close" data-dismiss="modal" aria-label="Close">                         <span aria-hidden="true">&times;</span>                       </button>                     </div>                     <div class="modal-body">                       <div class="row">                           <div class="col-6"> <img src="../assets/images/slider/2.jpg" alt="" style="height: 100%; width:100%;"> </div>                           <div class="col-6"> <img src="../assets/images/slider/3.jpg" alt="" style="height: 100%; width:100%;"> </div>                       </div>                     </div>                     <table class="table">                       <thead>                         <tr>                           <th scope="col" class="text-center">Categoría</th>                           <th scope="col" class="text-center">Fecha de Publicación</th>                           <th scope="col" class="text-center">Localización</th>                         </tr>                       </thead>                       <tbody>                         <tr>                           <td class="text-center">Apartamentos</td>                           <td class="text-center">15/02/19</td>                           <td class="text-center">Valencia</td>                         </tr>                       </tbody>                     </table>                     <div class="modal-footer">                       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>                     </div>                   </div>                 </div>               </div>               </div>             </div>           </div>           <div class="col-sm-4">             <div class="card" style="width: 18rem;">                <div class="" *ngIf="inmuebles[z+5].fotos[0]!=''; else sino">                 <h1>{{z+5}}</h1>                   <img class="card-img-top" id="imgPortada" src="{https://es.stackoverflow.com/questions/271134/problema-con-slider-multi-item-en-bootstrap-y-angular}{{inmuebles[z+5].id}}_{{inmuebles[z+5].fotos[0]}}" alt="Card image cap">               </div>               <ng-template #sino>                 <h1>{{z+5}}</h1>                 <img class="card-img-top" id="imgPortada" src="../assets/images/slider/3.jpg" alt="Card image cap">               </ng-template>                <div class="card-body">                 <div class="d-inline-flex">                   <i class="fas fa-cart-plus"></i><h6>Precio: {{inmuebles[i+5].precio}}</h6>                 </div>                 <div class="d-inline-flex">                   <i class="fas fa-map-marker-alt"></i><h6>Ubicacion</h6>                 </div>               <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ver detalles</button>               <!-- Modal -->               <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">                 <div class="modal-dialog" role="document">                   <div class="modal-content">                     <div class="modal-header">                       <div class="alert alert-primary text-center" style="width: 100%;" role="alert">Apartamento en Valencia</div>                       <button type="button" class="close" data-dismiss="modal" aria-label="Close">                         <span aria-hidden="true">&times;</span>                       </button>                     </div>                     <div class="modal-body">                       <div class="row">                           <div class="col-6"> <img src="../assets/images/slider/2.jpg" alt="" style="height: 100%; width:100%;"> </div>                           <div class="col-6"> <img src="../assets/images/slider/3.jpg" alt="" style="height: 100%; width:100%;"> </div>                       </div>                     </div>                     <table class="table">                       <thead>                         <tr>                           <th scope="col" class="text-center">Categoría</th>                           <th scope="col" class="text-center">Fecha de Publicación</th>                           <th scope="col" class="text-center">Localización</th>                         </tr>                       </thead>                       <tbody>                         <tr>                           <td class="text-center">Apartamentos</td>                           <td class="text-center">15/02/19</td>                           <td class="text-center">Valencia</td>                         </tr>                       </tbody>                     </table>                     <div class="modal-footer ">                       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>                     </div>                   </div>                 </div>               </div>               </div>             </div>           </div>         </div>       </div>     <a class="carousel-control-prev" (click)="anteriorInmueble()" href="#multi_item" role="button" data-slide="prev">       <span class="carousel-control-prev-icon" aria-hidden="true"></span>       <span class="sr-only">Previous</span>     </a>     <a class="carousel-control-next" (click)="siguienteInmueble()" href="#multi_item" role="button" data-slide="next">       <span class="carousel-control-next-icon" aria-hidden="true"></span>       <span class="sr-only">Next</span>     </a>   </div>   </div>   <!--</div> <ng-template #espera>Esperando datos...</ng-template>--> </div>

Aquí es donde incremento los valores de la variable Z, la incremento o decremento de 5 en 5 porque esa es la cantidad de posiciones en la que debo moverme en el vector de las fotos para poder rotar el carousel.

    anteriorInmueble(){       (this.z<=0)? this.z=680: this.z=this.z-5;     }       siguienteInmueble(){       (this.z>=680)? this.z=0: this.z=this.z+5;     }

How to get both request and response headers using Angular interceptor?

I’m using an Http Interceptor to set some special headers which we need for all requests, now I need to get one of those headers which I previously set, but I can only get response header, not request header

enter image description here

I’m trying to get that X-Cache-Id from the Request Headers (not Response Header)

Here is my interceptor code (the part which response is back)

return next.handle(requestWithHeaders).pipe(tap(event => {       if (event instanceof HttpResponse) {          console.log(event.headers.get('X-Cache-Id'));           // Returns: null       }      }));