Search code examples
angulartypescriptnavigator

Property 'wakeLock' does not exist on type 'Navigator'


I need to use the Screen Wake Lock API in my angular app
here is my code

if ('wakeLock' in navigator) {
         await navigator.wakeLock.request();
        
}

However, Angular compilation fails with the following error:

Error: src/app/feature/test/test/test.component.ts:20:42 - error TS2339: Property 'wakeLock' does not exist on type 'Navigator'.

Angular version and information

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 13.0.3
Node: 16.13.0
Package Manager: npm 8.1.0
OS: win32 x64

Angular: 13.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.3
@angular-devkit/build-angular   13.0.3
@angular-devkit/core            13.0.3
@angular-devkit/schematics      13.0.3
@angular/cdk                    13.0.3
@angular/cli                    13.0.3
@angular/flex-layout            13.0.0-beta.36
@angular/material               13.0.3
@schematics/angular             13.0.3
rxjs                            6.6.7
typescript                      4.4.4

How can fix typescript to contain Screen Wake Lock API and can compile codes?


Solution

  • Finally, after two weeks I found a way that supports this by adding the DefinitelyTyped. Two-step can fix this.

    1. Install the @types/dom-screen-wake-lock package
    npm i @types/dom-screen-wake-lock -D
    
    1. After installing the package you must add types to tsconfig.json like this
    {
    ...
       "compilerOptions":{
    ...
             "types":[
    ...
                  "dom-screen-wake-lock"
    ...
                ]
    ...
    }
    ...
    }