Angular 8 Cannot read property 'init' of undefined when serve as SSR

[StevRoger]

• Bug

Specifications

• Browser: Chrome
• Window 10

Expected Behavior

Should have known the AOS after imported import AOS from 'aos';

Actual Behavior

Everything was fine until I start running my Angular project with SSR mode. But the build was fine too. I have no errors while building the project. Only when I start serving the project. The animation is showing like normal only I want to get rid of the error.

Steps to Reproduce the Problem

1. Install Node JS
2. Install Angular 8 by using the command npm install -g angular/[email protected]
3. Install AOS via npm and import CSS and JS to file angular.json
4. Add Angular Universal into the project
5. Build the project with Angular SSR command
6. Serve the project with Angular SSR command

Detailed Description

The result is working fine. Just error appears that make me cannot get the project running without an error. Here is my code example import { Component, OnInit } from '@angular/core'; import AOS from 'aos'; @Component({ selector: 'app-contact-us-page', templateUrl: './contact.component.html', styleUrls: ['./contact.component.scss'] }) export class ContactComponent implements OnInit {

constructor() { }

ngAfterViewInit() { AOS.init({ once: true, }); }

ngOnInit() { }

}

And this is the error that showing in my node terminal ERROR TypeError: Cannot read property 'init' of undefined

Possible Solution

I'm not sure this is a bug or I missed something. NOTE: The result is working fine just error that make me unconfortable.

[murraco]

You have to instantiate it in your constructor like this:

constructor(private aos: AOS) { }

And then:

ngAfterViewInit() {
  this.aos.init({ once: true });
}

[BugProg]

Hi ! Is it possible to use AOS with Angular SSR ? I tried your solution @murraco but it didn't work for me.

Can you help me please ? I use Angular 14

[BugProg]

I resolve the problem !

Replace the line import * as AOS from 'aos; by declare let AOS: any; It works for me with Angular Universal too !