seo Question posted in
Some basic information to get you started with this can be found here.

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

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

enter image description here

Now with Angular Universal SSR

enter image description here

— 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…
enter image description here

Originally with normal Angular

enter image description here

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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 i.e 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...


  2. 0

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

    run this : npm install
    and try again.

    Login or Signup to reply.
  3. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search