Jak wykryć przeglądarkę za pomocą Angular?

Proszę użyć następującego kodu:

// Opera 8.0+
    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

    // Firefox 1.0+
    var isFirefox = typeof InstallTrigger !== 'undefined';

    // Safari 3.0+ "[object HTMLElementConstructor]" 
    var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

    // Internet Explorer 6-11
    var isIE = /*@cc_on!@*/false || !!document.documentMode;

    // Edge 20+
    var isEdge = !isIE && !!window.StyleMedia;

    // Chrome 1+
    //var isChrome = !!window.chrome && !!window.chrome.webstore;
    // If isChrome is undefined, then use:
    var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
    // Blink engine detection
    var isBlink = (isChrome || isOpera) && !!window.CSS;

    var output = 'Detecting browsers by ducktyping:<hr>';
    output += 'isFirefox: ' + isFirefox + '<br>';
    output += 'isChrome: ' + isChrome + '<br>';
    output += 'isSafari: ' + isSafari + '<br>';
    output += 'isOpera: ' + isOpera + '<br>';
    output += 'isIE: ' + isIE + '<br>';
    output += 'isEdge: ' + isEdge + '<br>';
    output += 'isBlink: ' + isBlink + '<br>';
    document.body.innerHTML = output;

Dla osób, które wciąż znajdują ten wątek:

Jeśli jesteś na Angular 10 lub powyżej, proponuję użyć PlatformModule, który został dodany do materiału Angular CDK w wersji 10.

Https://material.angular.io/cdk/platform/api

To zadziałało dla mnie:

  public getBrowserName() {
    const agent = window.navigator.userAgent.toLowerCase()
    switch (true) {
      case agent.indexOf('edge') > -1:
        return 'edge';
      case agent.indexOf('opr') > -1 && !!(<any>window).opr:
        return 'opera';
      case agent.indexOf('chrome') > -1 && !!(<any>window).chrome:
        return 'chrome';
      case agent.indexOf('trident') > -1:
        return 'ie';
      case agent.indexOf('firefox') > -1:
        return 'firefox';
      case agent.indexOf('safari') > -1:
        return 'safari';
      default:
        return 'other';
    }
}

Po wywołaniu getBrowserName() Możesz porównać wartość zwracaną z ==='edge', aby sprawdzić, czy używasz przeglądarki edge.

Dla użytkowników kątowych, możesz użyć tego modułu npm install ngx-device-detector --save

Powyżej odpowiedzi din ' t work for me

Jeśli jesteś zadowolony z korzystania z zewnętrznego modułu, możesz użyć ngx-device-detector.

$ npm install ngx-device-detector --save

Użycie:

  import { NgModule } from '@angular/core';
  import { DeviceDetectorModule } from 'ngx-device-detector';
  ...
  @NgModule({
    declarations: [
      ...
      LoginComponent,
      SignupComponent
      ...
    ],
    imports: [
      CommonModule,
      FormsModule,
      DeviceDetectorModule.forRoot()
    ],
    providers:[
      AuthService
    ]
    ...
  })

W komponencie, w którym chcesz korzystać z usługi urządzenia

 import { Component } from '@angular/core';
  ...
  import { DeviceDetectorService } from 'ngx-device-detector';
  ...
  @Component({
    selector: 'home',  // <home></home>
    styleUrls: [ './home.component.scss' ],
    templateUrl: './home.component.html',
    ...
  })

  export class HomeComponent {
    deviceInfo = null;
    ...
    constructor(..., private http: Http, private deviceService: DeviceDetectorService) {
      this.epicFunction();
    }
    ...
    epicFunction() {
      console.log('hello `Home` component');
      this.deviceInfo = this.deviceService.getDeviceInfo();
      const isMobile = this.deviceService.isMobile();
      const isTablet = this.deviceService.isTablet();
      const isDesktopDevice = this.deviceService.isDesktop();
      console.log(this.deviceInfo);
      console.log(isMobile);  // returns if the device is a mobile device (android / iPhone / windows-phone etc)
      console.log(isTablet);  // returns if the device us a tablet (iPad etc)
      console.log(isDesktopDevice); // returns if the app is running on a Desktop browser.
    }
    ...
  }

Serwis Urządzeń Posiada następujące właściwości

1. przeglądarka
2. os
3. urządzenie
4. userAgent
5. os_version

Metody Pomocnicze

IsMobile() : zwraca, jeśli urządzenie jest urządzeniem mobilnym (android / iPhone / windows-phone itp)

IsTablet (): zwraca, jeśli urządzenie posiada tablet (iPad itp.)

IsDesktop (): zwraca, jeśli aplikacja jest uruchomiona w przeglądarce desktopowej

Oto link do dokumentów: https://koderlabs.github.io/ngx-device-detector/index.html

Możesz użyć regex z useragent do wykrywania IE.

 private isIE() {
    const match = navigator.userAgent.search(/(?:Edge|MSIE|Trident\/.*; rv:)/);
    let isIE = false;

    if (match !== -1) {
        isIE = true;
    }

    return isIE;
}

Ale zawsze zaleca się używanie wykrywania funkcji zamiast wykrywania przeglądarki. Możesz do tego użyć biblioteki modernizr https://modernizr.com

Aby wykryć, czy przeglądarka jest oparta na Chromium, użyj następującego kodu:

const isChromiumBased =
  !!window["chrome"] &&
  (!!window["chrome"]["webstore"] || !!window["chrome"]["runtime"]);

Jeśli chcesz wyświetlić wiadomość, gdy przeglądarka wykryje IE(5,6,7,8) , możesz użyć linii kodu.

Po pierwsze ten kod używany tylko w indeksie .plik html ponieważ kompilator najpierw odczytuje ten plik.

<body>
<p id="NRL" style="background-color: aquamarine;text-align: center"></p>
<app-root></app-root>

<script>

  let isIE1 =/^.*MSIE [5-9]/i.test(window.navigator.userAgent);
    if(isIE1){
      alert('you are using older version of IE .........')

      document.getElementById("NRL").innerHTML = "you are using older version of IE .........";
    }
  </script>
</body>

Możesz uzyskać nazwę przeglądarki za pomocą następującego kodu:

let match = navigator.userAgent.search(/(?:Edge|MSIE|Trident\/.*; rv:)/);
let isIE = false;

if (match !== -1) {
    isIE = true;
}
console.log(isIE,'isIE');