Why my google instance don't work in my Angular Universal project?

Question

I have a Angular project that work's fine if i build without Angular Universal command "ng serve dev:ssr"

When i use this command to build with Universal i get this error:

Error: src/app/widgets/location/google-places/google-places.component.ts:87:29 - error TS2304: Cannot find name 'google'.

87     this.sessionToken = new google.maps.places.AutocompleteSessionToken();

This error i get when i try to build, but after some search i knew that i just need to add @types and works fine in my project without Universal.

But now that i want to build with Universal this is getting the same error in the past, what should i do?

  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.4",
    "@angular/cli": "~12.1.4",
    "@angular/compiler-cli": "~12.1.0",
    "@nguniversal/builders": "^12.1.0",
    "@types/body-scroll-lock": "^3.1.0",
    "@types/crypto-js": "^4.0.2",
    "@types/express": "^4.17.0",
    "@types/googlemaps": "^3.43.3",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.3.2"
  }

I already have the @types.

Answer 1

The reason is that you don't have access to global object like window, document in SSR, and I think, that you receive this google object from window.google.

So it's better to run your code only in browser:

export class Service {

  constructor(
    @Inject(PLATFORM_ID) private platformId: string,
  ){}

  method(){
    if (isPlatformBrowser(this.platformId)) { 
      // place your code about google
    }
  }

}