Document is not defined - Angular 17

[BugProg]

Hi !

I just updated my project to Angular 17, and I'm using modern compilation method with Vite. I have an issue with TypeIt, I get the following error: ERROR ReferenceError: document is not defined during the compilation.

    at select (/home/user/Projects/Angular/angular-project/.angular/vite-root/angular-project/node_modules/.pnpm/[email protected]/node_modules/typeit/dist/index.es.js:207:1)
    at selectorToElement (/home/user/Projects/Angular/angular-project/.angular/vite-root/angular-project/node_modules/.pnpm/[email protected]/node_modules/typeit/dist/index.es.js:237:32)
    at TypeIt (/home/user/Projects/Angular/angular-project/.angular/vite-root/angular-project/node_modules/.pnpm/[email protected]/node_modules/typeit/dist/index.es.js:765:7)
    at _HomeComponent.ngAfterViewInit (/home/user/Projects/Angular/angular-project/.angular/vite-root/angular-project/src/app/user/home/home.component.ts:92:14)
    at callHookInternal (/home/user/Projects/Angular/angular-project/.angular/vite-root/angular-project/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:3437:5)
    at callHook (/home/user/Projects/Angular/angular-project/.angular/vite-root/angular-project/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:3461:3)
    at callHooks (/home/user/Projects/Angular/angular-project/.angular/vite-root/angular-project/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:3421:7)
    at executeInitAndCheckHooks (/home/user/Projects/Angular/angular-project/.angular/vite-root/angular-project/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:3375:1)
    at refreshView (/home/user/Projects/Angular/angular-project/.angular/vite-root/angular-project/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:13094:36)
    at detectChangesInView (/home/user/Projects/Angular/angular-project/.angular/vite-root/angular-project/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@angular/core/fesm2022/core.mjs:13249:5)

NOTE In spite of this error, the code seems to work perfectly in the browser.

[Rounaque-Noor]

It is happening due to SSR. Use globalThis to fix. I have done it for the error: ERROR ReferenceError: window is not defined. For example: Use globalThis.window?.innerWidth instead of window.innerWidth. I hope this helps.

[BugProg]

Hi @Rounaque-Noor !

Thank you for your message ! I don't understand your fix.

This is my code, where I should insert your code ?

new (TypeIt as any)("#typeIt", {
  speed: 100,
  loop: true
})
  .type("Site-Web", {delay: 2000})
  .delete(() => {
  }, {delay: 1000, instant: false})
  .type("App  Mobile", {delay: 2000})
  .delete(() => {
  }, {delay: 1000})
  .type("Cloud", {delay: 2000})
  .delete(() => {
  }, {delay: 1000})
  .go();

Thank you.

[GeronimoSerial]

hi @BugProg ! you fix this? i have the exactly same issue with the same module

[BugProg]

Hi @GeronimoSerial ! No, sorry, I didn't fix it yet.😢

[BugProg]

Hi @GeronimoSerial,

The code below seems to work without errors:

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

...

private isBrowser: boolean;

constructor(
 @Inject(PLATFORM_ID) platformId: Object) {
 this.isBrowser = isPlatformBrowser(platformId);
}

...

if (this.isBrowser) {
    new (TypeIt as any)("#typeIt", {
      speed: 100,
      loop: true
    })
      .type("CCC", {delay: 2000})
      .delete(() => {
      }, {delay: 1000, instant: false})
      .type("BBB", {delay: 2000})
      .delete(() => {
      }, {delay: 1000})
      .type("AAA", {delay: 2000})
      .delete(() => {
      }, {delay: 1000})
      .go();
}

[alexmacarthur]

Yep, TypeIt shouldn't be instantiated if it's server rendering is going on. Gotta make sure the DOM is available first.