Prevent download of an angular website by unauthenticated users

I have an app using angular and when deployed to a server, everyone can ofc download the source codes, obfuscated or not.

Yet, I would like to prevent user that are not authenticated to see the source code of the core application. Since right now, the login is made on the real app, they have access to everything.

I was planning on making a static page that serve as a portal, where user authenticate, and separated from the main app.

After login, you would receive an email with an url (would be hosted on the same server) and a token, that would bring you to the main app.

The server would verify the token (is this possible with nginx?) BEFORE serving any file from the main application.

Then, when an user is connected, since he is server the real app, but he is connected, I would not care if he as the source code access.

Is this secured enough? Is this doable using nginx?

How to filter mat cards in angular

I’m doing Angular project and I’m wondering how I can filter/search the mat cards that has details (name, description) from different components. I have a searchbox in the home.component.html to filter the cards but since all the information inside the mat cards are getting from different components and back end, I’m not sure how to do that. any suggestion will be really helpful.

I have pipe to filter and searchbox.

This is how I reuse cards from different components in my home.component.html and ts file.

HTML

         <div class = 'caption' *ngIf = "pubWorkspaces.length <= 0">                 You currently have 0 public workspaces             </div>              <mc-workspace-card-list [workspaces] = "pubWorkspaces" [editable] = "false"></mc-workspace-card-list>            </div> 

TS

export class ExploreComponent implements OnInit, OnDestroy {   pubWorkspaces: Workspace[] = [];   loading: boolean = false;    constructor(private workspaceService: WorkspaceService, private router: Router) { }   ngOnInit(): void {      this.loading = true;     this.workspaceService.getUserWorkspaces().subscribe((workspaces) =>{      workspaces.forEach(workspace => {       if(workspace.type == WorkspaceType.public){         this.pubWorkspaces.push(workspace);       }     });     this.loading = false;     }, ()=>this.loading = false) } 

My search Pipe

import { Pipe, PipeTransform } from '@angular/core';  @Pipe({ name: 'search', pure: true }) export class SearchPipe implements PipeTransform { transform(names: string[], query: string): string[] {   if (!query || !names) {     return names;   }    return names.filter(name => name.toLowerCase().indexOf(query.toLowerCase()) > -1); } } ``` 

Angular SEO friendly product detail page URL

Hello folks currently I am searching for best SEO friendly URL for product detail page for our live site Right-on EC

where currently we use the following pattern for product detail page it seems not SEO & user-friendly.
https://right-on.co.jp/product/1000162003200

there are Domain / product id need to change with SEO friendly please suggest me best URL pattern I am thinking following are some: Conditions

  1. site is in japanese.
  2. product name is in japanese
  3. periodically product name changes (if any offer or sale set on the product then that product name is prefixed with that sale or offer name once sale gone name is excluded with that sale prefix name)
  4. high priorities is URL with Japanese name if it is best for the user and good with seo then otherwise ok with English in last conditions.

Possible URL

Domain / product / product name (without sale name of product) Domain / product / product-sale / product name  (with sale name of product) Domain / product / brand / product name  (without sale name of product) Domain / product / brand / product-sale / product name (with sale name of product) 

or other then please suggest me the best SEO friendly

*Note: Used Angular framework.

Why HOG angular bins have values between 0 and 180 degrees?

I have learned that HOG angular bins have values from 0 to 180 since the algorithm uses unsigned gradients. I am failing to understand why.

As far as I know gradient orientation is calculated as

angle = atan(S_y / S_x) 

where S_x and S_y are image gradients in x and y directions respectively.

Provided that S_y and S_x are non-negative, the ratio will also never be negative. Hence, the angle should be in range from 0 to 90 degrees (see atan graph below). What am I missing?

enter image description here

How does Angular ViewEncapsulation affect web pages and style maintenance?

So we have a team of developers who embraces Angular and with that comes ViewEncapsulation.

This means that when they create a Angular component, they add the styling with the component and don’t use the global css. Depending on the ViewEncapsulation mode, the CSS ends up as inline styling either in the header or in the HTML.

We do have a Design System and we want to create a library of re-usable Angular components.

During my years developing web pages, the mantra was: Inline styling is bad! I don’t know if this still applies today as the browsers get more advanced.

My arguments for not encapsulating styling in Angular components are:

  • Inline styling makes html documents bigger, thus slower to load
  • If the Angular component reads a css file on page load, it creates additional HTTP requests which again slows down page load
  • Maintaining a style guide will be difficult when you do not have control over the components used
  • Different styling may be added to similar components because it’s done by different developers. This may alter component behaviour.

Dose anyone have experience with putting styling in Angular components and at the same time manage a design system?

Angular 8: duplica datos cuando vuelvo a la misma ruta

tengo un problema con angular que no logro comprender. tengo una aplicacion hecho con angular 8 y tengo un componente en localhost:4200/inicio y tengo otro componente en localhost:4200/tabla resulta que cuando navego entre los dos componentes usando

<a mat-list-item routerLink="/inicio"></a> <a mat-list-item routerLink="/tabla"></a> 

me duplica la información.

muestro cantidad de registro que realmente tiene la tabla introducir la descripción de la imagen aquí

cuando navego de nuevo a /inicio y despues a /tabla (sin recargar el navegador) introducir la descripción de la imagen aquí

al recargar el navegador me vuelve a la cantidad de registros originales (13), lo único que supongo que pasa es que guarda datos en el caché pero no se como areglar ese problema ni por donde comenzar arreglar, si me pueden aunque sea que pasa se lo agradecería mucho porque me urge areglar ese problema

NOTA: la información la leo en TablaComponent

   obtenerInfo() {       this.http.get('url').subscribe((data) => {          // aqui lleno la informacion de la tabla       });    }  

¿Cómo llenar un arreglo con datos de un servicio en angular?

Tengo esto en ejemplo.component.ts
Quiero reemplazar los arreglos de columns por datos de un servicio que funciona a la perfección

ngAfterViewInit() {     const chart2 = c3.generate({       bindto: '#product-sales',       data: {         columns: [           ['Iphone', 8, 6, 3, 7, 9, 10, 14, 12, 11, 9, 8, 7, 10, 6, 12, 10, 8],           ['Ipad', 7, 2, 8, 3, 4, 5, 7, 6, 5, 6, 4, 3, 3, 12, 5, 6, 3]         ],         type: 'spline'       } }) } 

El servicio solo cuenta con dos filas para este ejemplo: http://rubbercorp.net/servicio/serviciosales.php

export class SalesComponent implements AfterViewInit {   listasales:Sale[];   constructor(private salesService:SalesService) { }    ngOnInit(){     this.leerInfo();   }    leerInfo():void{     this.salesService.leerinfo().subscribe(       (res:Sale[]) =>{           this.listasales = res;       }     )   } } 

He intentado reemplazar los arreglos de columns por Sale[0] y Sale[1] respectivamente pero no obtengo resultado esperado

columns: [           Sale[0],           Sale[1]         ] 

Como cambiar el [src] de una imagen en Angular 7

Tengo mi vista en Angular y quiero cambiar la imagen, utilicé databinding pero al darle click no me cambia de imagen, que estoy realizando mal ? Inclusive al pintar el valor de superball no me arroja nada en la consola web, gracias.

Deseo cambiarla por '../../../assets/images/png/up-arrow.png'

.html

<td style="padding-left: 50px;cursor: pointer;" mat-cell *matCellDef="let element">     <img (click)="functioninTypeScript($  event.target)" style="width: 30px;height:30px" [src]="superball" />  </td> 

.ts

export class PokelistaComponent implements OnInit, OnDestroy {  superball = '../../../assets/images/png/superball.png';  constructor() ...  functioninTypeScript(image: any) {     this.superball = image.src;     this.superball = (image.src === this.superball) ?     this.superball = '../../../assets/images/png/up-arrow.png' : this.superball;     console.log(this.superball);   }