Angular - Cannot find name 'DOCUMENT' - Solved

This tutorial shows you Cannot find name 'DOCUMENT' in angular. you will learn angular error ts2304 cannot find name 'DOCUMENT'. you will learn angular cannot find document error. let’s discuss about angular cannot find name document.

You can use this solution with angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 version.

In this post, I will give you the solution of "Cannot find name 'DOCUMENT'" in angular application. we need to import DOCUMENT from @angular/common library. so let's see below the solution and full code.

Solution:

let's import DOCUMENT from @angular/common npm package, as bellow:

Import Output:

import { DOCUMENT } from '@angular/common';

Let's see bellow working code:

Example:

import { Component, OnInit, Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  
    port = '';
  
    /*------------------------------------------
    --------------------------------------------
    constructor
    --------------------------------------------
    --------------------------------------------*/
    constructor(@Inject(DOCUMENT) private document: any) { }
  
    /*------------------------------------------
    --------------------------------------------
    ngOnInit
    --------------------------------------------
    --------------------------------------------*/
    ngOnInit() {
        this.port = this.document.location.port;
        console.log(this.port);
    }
  
}

I hope it can help you...