Javascript: How to identify memory leaks? [duplicate]

This question already has an answer here:

I have created a large angular app (Angular 5) with around 80 components and 20-25 services. The app crashes on the machines with lower RAM. There seems to a possibility of memory leak but I am just not been able to identify the same. Following are the steps I have already taken up to optimize the app.

  • Unsubscribing the observables when components are destroyed.
  • Removing console statements.
  • Using ngFor with trackby.
  • Using ChangeDetectionStrategy.OnPush in the component definition.

How do I now identify the part from which the memory is not released? Tried using Chrome developer tools to find out the exact cause, but wasn’t successful. Is there a better way to determine leaks from Chrome developer tool?

EDIT: Since the application has grown, I am unable to find out the correct way.

Angular 4+ Chrome Extension that injects the html into the host page

I’ve been searching (with no luck) for an example of a Chrome Extension built on Angular that injects the index.html into the host page (not in a popup).

I’ve seen many versions which load the html into the default_popup, but i want to inject the angular app into the page I am viewing.

How to Know particular chrome extension is installed or not using angular 2

I want to know whether particular chrome extension is added to the chrome browser or not when my angular application opens.

Content Download time increasing on multiple same requests in Chrome from Angular UI

Whenever I post a API(Word Press) request from Angular UI, the content download time of the response increases exponentially every time in Chrome latest versions(from 62+). This happens when the same request is made from the same open browser tab sequentially. For e.g. consider a UI with a button. When I click on the button, a request is posted and if I check in the Dev tools, I can see the content download time for the response is say x secs. When I repeat the same steps next time, the time is x+y secs. Third time it is x+z secs where z>y and so on. The download size is exactly same each time.

When I refresh the page, the content download time is again back to the original value of x secs.
Also verified same scenario in IE and Firefox browsers but content download time is same on multiple requests, its not incrementing.

Can you please help me in figuring out what is causing the content download time to increase every time in Chrome?

navigator.bluetooth not working in typescript

I am trying to make the chrome bluetooth API call and I am not getting success via typescript. I’ve already tried applying a file in html () but also to no avail.
But if you copy the code and paste it into the browser console, the code runs perfectly 🙁

Error in console (If run code in Ts):

DOMException: Must be handling a user gesture to show a permission request.

// Typescript/TS:

requestBluetooth() {
    (window.navigator as any).bluetooth.requestDevice({ filters: [{ services: [this.PRINT_SERVICE_CODE] }] })
      .then(device => {
        return device.gatt.connect();
      })
      .then(server => {
        return server.getPrimaryService(this.PRINT_SERVICE_CODE);
      })
      .then(service => {
        return service.getCharacteristic('00002af1-0000-1000-8000-00805f9b34fb');
      })
      .then((characteristic) => {
        this.sendTextData(characteristic);
      })
      .catch(error => console.log(error));
  }

sendTextData(characteristic) {
    // Get the bytes for the text
    const encoder = new TextEncoder('UTF-8');
    const text = encoder.encode('TESTETSETS' + 'u000Au000D');
    return characteristic.writeValue(text)
      .then(() => console.log('Write done.'));
  }

// Working in Console Browser:

const PRINT_SERVICE_CODE = '000018f0-0000-1000-8000-00805f9b34fb';

const sendTextData = (function (characteristic) {
  const encoder = new TextEncoder('UTF-8');
  const text = encoder.encode('TESTETSETS' + 'u000Au000D');
  return characteristic.writeValue(text)
    .then(() => console.log('Write done.'));
})

const request = (function () {
  navigator.bluetooth.requestDevice({ filters: [{ services: [PRINT_SERVICE_CODE] }] })
  .then(device => {
    return device.gatt.connect();
  })
  .then(server => {
    return server.getPrimaryService(PRINT_SERVICE_CODE);
  })
  .then(service => {
    return service.getCharacteristic('00002af1-0000-1000-8000-00805f9b34fb');
  })
  .then((characteristic) => {
    this.sendTextData(characteristic);
  })
  .catch(error => console.log(error));
})

request();

// Informations of Project:

Angular CLI: 6.0.8

Node: 8.11.3

OS: linux x64

Angular: 6.0.9

Angular dev, body has an off white background in chrome?

Image of the issue

Anyone know why the body of my chrome when doing development shows an offwhite color? I’ve validated on other PC’s I don’t have this problem, even when using the same extensions/account in chrome.

It only effects the body and grows/shrinks accordingly. Even setting the background/color of body to #fff doesn’t change it, and looking in the console for chrome there doesn’t appear to be any styling being applied. Its driving me nuts.

How to use @types/chrome in angular?

I am unable to use chrome extension api in angular. I tried using @types/chrome but chrome.windows is of undefined type.

Chrome extensions update criteria

I have created Chrom extension using Angular and Hosted on chrome store.

I know Chrome store will automatically update all extension on user end within 5Hours (Default time) on the basis of the version number of your extension.

My question is – Is it possible to update chrome extension without changing the version number in a manifest file? If so then what are the changes to be made to let chrome store know that this extension needs to be updated?

Angular 6 with Chrome device toolbar click event firing multiple times

I’m new to the world of Angular and am just starting a web app in Angular 6. I ran into this strange problem today while trying to show/hide my menu on a click. For some reason, in the Chrome device toolbar (trying to emulate a phone to develop for mobile first) it will fire the click event twice unless I use the very edge of the touch circle on the icon. It works in the normal Chrome window with the mouse pointer as well as in Firefox’s “responsive design mode” which basically is the same thing as Chrome’s device toolbar mode. This makes me suspect it has something to do with the simulated touch it’s doing, but I’m not sure. Is there anything I’m doing wrong or that I should be worried about? Or this a weird Chrome bug? I’m not to the point where I can actually test this on a phone, sadly.

In-progess code below:


  
Geomni PRODUCTS

And the component here:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  showMenu = false;

  constructor() {

  }

  toggleMobileMenu() {
    this.showMenu = !this.showMenu;
  }

  ngOnInit() {
  }

}

angular elements in gmail chrome extension

i have project to insert angular elements in gmail chrome extension for injecting the elements i use inboxSDK(it can be make also with plain js).
the issue is un expected behave in the keyup events on inputs and also angular material not working properly. for example the open only on second click and inputs with matInput directive animation not applied on focus. and another wired issue with keyup event some keys not displayed on the input i see the event happen but the text inside the input not change. from what i checked (space and v but there is more). but when i check the angular element in plain html everything working as expected. what make it different when it in gmail chrome extension.

for compiling the angular element i used the instructions from:
https://medium.com/codingthesmartway-com-blog/angular-elements-a-practical-introduction-to-web-components-with-angular-6-52c0b3076c2c

attached my angular element code:

import {
  Component,
  OnInit,
  ViewEncapsulation,
  AfterViewInit
} from '@angular/core';

@Component({
  selector: 'custom-input',
  templateUrl: './custom-input.component.html',
  styleUrls: ['./custom-input.component.css'],
  encapsulation: ViewEncapsulation.Native
})
export class CustomInputComponent implements OnInit, AfterViewInit {


  public text: string = ' ';
  constructor() {
    console.log('construct');
  }

  ngOnInit() {
    console.log('ngOnInit');
  }
  ngAfterViewInit() {
    console.log('ngAfterViewInit')
  }

  onkeyUp(x) {
    console.log(x);
    this.text = x;
  }

}

  



{{text}}




  
  
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';


import { AppComponent } from './app.component';
import { CustomInputComponent } from './custom-input/custom-input.component';
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {MatButtonModule, MatInputModule, MatMenuModule} from "@angular/material";



@NgModule({
  declarations: [
    AppComponent,
    CustomInputComponent
  ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    MatButtonModule,
    MatMenuModule,
    MatInputModule
  ],
  providers: [],
  entryComponents: [
    CustomInputComponent
  ]
})
export class AppModule {

  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const el = createCustomElement(CustomInputComponent, {injector: this.injector});
    customElements.define('custom-input', el);
  }

}