Angular Universal SSR components are not working properly & getting $(…).owlCarousel is not a function error

Question

I had a normal angular9 application due to SSR seo meta tags rending i have added angular universal. One i added meta tags gets rendered in source code but my javascript files are not working like Carousel, Slick & some other. Below queries i follow to switch to angular universal.

• ng add @nguniversal/express-engine
• npm run dev:ssr
• npm run serve:ssr

Before i switch to Angular Universal

Now with Angular Universal SSR

-- Not able to understand what things to do tried to solve some other issues which i face like "Window is not defined" and other but i solved all. help me with these issue "owlCarousel is not a function"

• I also want to use javascripts

I have so many things but my website some pages are not working properly. When i was using normal application (CSR) all components was working fine. Now i tried to make my website SEO friendly i switch to angular universal ssr and from there onwards this headache begin...

Originally with normal Angular

Answer 1

Your project has used depndiency of owl you need to be install this.

run this : npm install and try again.

Answer 2

You have to declare the jquery selector in your component. declare var $:any

Answer 3

Finally i solved angular universal issue.

once you install Angular Universal with ng add @nguniversal/express-engine command.

We will see some server files gets created. To check your application in development mode we need to run * npm run dev:ssr command.

If you get error like window is not defined . no worries you need to simply do one thing in component.ts file

 isBrowser; constructor(@Inject(PLATFORM_ID) private platformId) { this.isBrowser = isPlatformBrowser(platformId); } ngOnInit(): void { if (this.isBrowser) { window.scrollTo(0, 0); } }

-Once you solve all errors need to render angular application then run npm run prerender command. It will create two folders in dist/project_name ie browser And server . We need to simply upload all files in browser folder to aws s3 bucket.

That's it our app will work fine to server and it will be work for seo crawler.

For any queries let me know...