skip to Main Content

I have converted my website from angular 6 to Angular Universal..
But now facing an issue
Angular universal is only applied to homepage of the website not the inner pages

Can anyone let me know how to convert inner pages to angular universal so it should be SEO friendly?

Home Page:

enter image description here

INNER PAGE CODE:

enter image description here

Waiting for your response.

2

Answers


  1. This is how angular universal works.

    Angular universal use concept of server-side rendering. It means when URL of your angular app hits for the first time. first, the internal server app (Express) will render your requested page. the reason behind this is in your server app javascript is allowed and you can change meta tags dynamically which will improve your SEO.

    now if you are using Hashlocation strategy inside your app server will render APP component first so it will not work if you dynamically change meta tags.

    My suggestion for you is…

    1). if you are using HashLocation strategy then remove it.

    2). if you are performing any dom operations (jQuery) or using any browser provided objects (window,localstorage) inside your ngOnInit() move it to ngAfterViewInit().

    Login or Signup to reply.
  2. Agree to remove HashLocation strategy also with a few additional things.

    • Make sure your API base URL is configured properly which means that I had a similar issue where node express was picking the API base from the local environment.ts.

    • Make sure you have the following lines in the "server" section in angular.json

    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
       }
     ]
    
    • Easy debug technique is commenting your HTTP Client code, and browser code (i.e. window, local storage, all browser global objects)
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search