search

maciejtreder / ng-toolkit

:star: Angular tool-box! Start your PWA in two steps! Add Serverless support for existing projects and much more
https://www.angular-universal-pwa.maciejtreder.com
MIT License
1.12k stars 157 forks source link

SEO not working for routes #424

Open rohanpadwalkar opened 5 years ago

rohanpadwalkar commented 5 years ago

I have implemented @ng-toolkit/universal its working fine for default rotue("/") but when i navigate to some route it does not show content in page source instead it shows router-outlet tag without content

package.json


{
    "name": "lowcost",
    "version": "0.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "build:server:prod": "ng run lowcost:server && webpack --config webpack.server.config.js --progress --colors",
        "build:browser:prod": "ng build --prod",
        "build:prod": "npm run build:server:prod && npm run build:browser:prod",
        "server": "node local.js"
    },
    "private": true,
    "dependencies": {
        "@agm/core": "^1.0.0-beta.3",
        "@agm/snazzy-info-window": "^1.0.0-beta.3",
        "@angular/animations": "^6.0.9",
        "@angular/common": "^6.0.3",
        "@angular/compiler": "^6.0.3",
        "@angular/core": "^6.0.3",
        "@angular/forms": "^6.0.3",
        "@angular/http": "^6.0.3",
        "@angular/platform-browser": "^6.0.0",
        "@angular/platform-browser-dynamic": "^6.0.3",
        "@angular/platform-server": "^6.0.0",
        "@angular/router": "^6.0.3",
        "@angular/service-worker": "^6.1.0",
        "@ng-toolkit/universal": "^1.1.40",
        "@nguniversal/express-engine": "^6.0.0",
        "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
        "core-js": "^2.5.4",
        "cors": "~2.8.4",
        "hammerjs": "^2.0.8",
        "ngx-bootstrap": "^3.0.1",
        "ngx-gallery": "^5.6.0",
        "ngx-google-places-autocomplete": "^2.0.1",
        "ngx-infinite-scroll": "^6.0.1",
        "ngx-toastr": "^8.8.0",
        "primeng": "^6.0.0",
        "rxjs": "^6.0.0",
        "rxjs-compat": "^6.2.1",
        "snazzy-info-window": "^1.1.1",
        "ts-loader": "4.2.0",
        "webpack-cli": "^2.1.4",
        "zone.js": "^0.8.26"
    },
    "devDependencies": {
        "@angular/compiler-cli": "^6.0.3",
        "@angular-devkit/build-angular": "~0.6.8",
        "typescript": "~2.7.2",
        "@angular/cli": "~6.0.8",
        "@angular/language-service": "^6.0.3",
        "@types/jasmine": "~2.8.6",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~8.9.4",
        "codelyzer": "~4.2.1",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~1.7.1",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.0",
        "karma-jasmine": "~1.1.1",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.3.0",
        "ts-node": "~5.0.1",
        "tslint": "~5.9.1"
    }
}

Current behavior

Environment


Angular CLI: 6.0.8
Node: 9.2.0
OS: darwin x64
Angular: 6.1.0
HassanOumar commented 5 years ago

Same issue here with me. I hope someone find a solution

rohanpadwalkar commented 5 years ago

Hi buddy, it is because when your angular page renders at server side it does not wait for your HTTP request to complete it simply render HTML if HTTP taking a little long also and sends back to the user. so the best way to avoid is user route resolve.

in that way you first download data from HTTP and then send that data to the HTML page. in short, your page will have data before route/page get initiated and the server will render HTML data with the data revied from HTTP call.

do comment if it works for you. Thank you

sahilmobikasa commented 5 years ago

@rohanpadwalkar Please provide some sample code, because i am new to Angular.

YoniTlz commented 5 years ago

Same issue her except in my case it's the opposite. The content of my homepage isn't rendrerd but for others routes it works fine. Can you provide a solution?