Angular Universal – routes are not being rendered

  angular

I am trying to prerender my application with angular universal. No routes are being rendered unfortunately except the home page of the website (i.e the first route the application is supposed to open). I’ve the following angular.json.

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "cli": {
        "analytics": false
    },
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "ourworldincrypto2": {
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss"
                },
                "@schematics/angular:application": {
                    "strict": true
                }
            },
            "root": "",
            "sourceRoot": "src",
            "prefix": "app",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/ourworldincrypto2/browser",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.app.json",
                        "aot": true,
                        "assets": ["src/favicon.ico", "src/assets", "src/sitemap.xml"],
                        "styles": [
                            "src/styles.scss",
                            "./node_modules/bootstrap/dist/css/bootstrap.min.css",

                            "./src/assets/vendors/owl/mdi/css/materialdesignicons.min.css",
                            "./src/assets/vendors/owl/aos/dist/aos.css/aos.css",
                            "./src/assets/vendors/owl/owl.carousel/dist/assets/owl.carousel.min.css",
                            "./src/assets/vendors/owl/owl.carousel/dist/assets/owl.theme.default.min.css",
                            "./src/assets/css/owl/style-owl.css",

                            "./src/assets/css/bootstrap-slider.min.css",
                            "./node_modules/bootstrap-icons/font/bootstrap-icons.css"
                        ],
                        "scripts": [
                            "./node_modules/jquery/dist/jquery.min.js",
                            "./src/assets/js/jquery.color.js",
                            "./src/assets/js/bootstrap-slider.min.js",
                            "./node_modules/popper.js/dist/umd/popper.min.js",
                            "./node_modules/bootstrap/dist/js/bootstrap.min.js",

                            "./src/assets/vendors/owl/owl.carousel/dist/owl.carousel.min.js"
                        ]
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [{
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.prod.ts"
                            }],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "namedChunks": false,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "budgets": [{
                                    "type": "initial",
                                    "maximumWarning": "5mb",
                                    "maximumError": "5mb"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "5mb",
                                    "maximumError": "5mb"
                                }
                            ]
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "ourworldincrypto2:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "ourworldincrypto2:build:production"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "ourworldincrypto2:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.spec.json",
                        "karmaConfig": "karma.conf.js",
                        "assets": ["src/favicon.ico", "src/assets"],
                        "styles": ["src/styles.scss"],
                        "scripts": []
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json", "tsconfig.server.json"],
                        "exclude": ["**/node_modules/**"]
                    }
                },
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "ourworldincrypto2:serve"
                    },
                    "configurations": {
                        "production": {
                            "devServerTarget": "ourworldincrypto2:serve:production"
                        }
                    }
                },
                "deploy": {
                    "builder": "angular-cli-ghpages:deploy",
                    "options": {}
                },
                "server": {
                    "builder": "@angular-devkit/build-angular:server",
                    "options": {
                        "outputPath": "dist/ourworldincrypto2/server",
                        "main": "server.ts",
                        "tsConfig": "tsconfig.server.json"
                    },
                    "configurations": {
                        "production": {
                            "outputHashing": "media",
                            "fileReplacements": [{
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.prod.ts"
                            }],
                            "sourceMap": false,
                            "optimization": true
                        }
                    }
                },
                "serve-ssr": {
                    "builder": "@nguniversal/builders:ssr-dev-server",
                    "options": {
                        "browserTarget": "ourworldincrypto2:build",
                        "serverTarget": "ourworldincrypto2:server"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "ourworldincrypto2:build:production",
                            "serverTarget": "ourworldincrypto2:server:production"
                        }
                    }
                },
                "prerender": {
                    "builder": "@nguniversal/builders:prerender",
                    "options": {
                        "browserTarget": "ourworldincrypto2:build:production",
                        "serverTarget": "ourworldincrypto2:server:production",
                        "routes": [
                            "/",
                            "/gdp",
                            "/billionaires",
                            "/athletes",
                            "/cars",
                            "/houses",
                            "/snp500",
                            "/crypto",
                            "/wealthy",
                            "/nba",
                            "/pres-candidates",
                            "/btcppr"
                        ]
                    },
                    "configurations": {
                        "production": {}
                    }
                }
            }
        }
    },
    "defaultProject": "ourworldincrypto2"
}

Note that the main index.html is rendered successfully. The rest of the routes are not. The resulting content of one of the routes.

<body>
    <app-root _nghost-sc117="" ng-version="11.2.9">
        <router-outlet _ngcontent-sc117=""></router-outlet>
        <!---->
    </app-root>
    http://runtime.7b63b9fd40098a2e8207.js
    http://polyfills.00096ed7d93ed26ee6df.js
    http://scripts.e59b277616b2b3c913c8.js
    http://main.8547f840d1e13bfbc738.js
</body>

The resulting content of the main index.html.

<body>
    <app-root _nghost-sc117="" ng-version="11.2.9">
        <router-outlet _ngcontent-sc117=""></router-outlet>
        <app-home _nghost-sc116="">
            <div _ngcontent-sc116="" class="container-scroller">
                <div _ngcontent-sc116="" class="main-panel">
                    <header _ngcontent-sc116="" id="header">
                        <div _ngcontent-sc116="" class="container">
                            <nav _ngcontent-sc116="" class="navbar navbar-expand-lg navbar-light">

and so on…

The prerender command I’m using.

ng run website:prerender

I am not exactly sure, where the problem lies as the build is always successful.

Console output on running pre-render

> [email protected] prerender /home/mywork/ourworldincrypto2
> ng run ourworldincrypto2:prerender

✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.8547f840d1e13bfbc738.js      | main          | 601.84 kB
styles.611a2c13e272c1600ee9.css   | styles        | 424.73 kB
scripts.e59b277616b2b3c913c8.js   | scripts       | 254.49 kB
polyfills.00096ed7d93ed26ee6df.js | polyfills     |  35.98 kB
runtime.7b63b9fd40098a2e8207.js   | runtime       |   1.45 kB

                                  | Initial Total |   1.29 MB

Build at: 2021-06-11T15:15:35.305Z - Hash: 3112fa892b3d16001d76 - Time: 30957ms

Warning: /home/mywork/ourworldincrypto2/src/app/services/helper.service.ts depends on 'millify'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies


✔ Server application bundle generation complete.

Initial Chunk Files | Names         |    Size
main.js             | main          | 3.85 MB

                    | Initial Total | 3.85 MB

Build at: 2021-06-11T15:15:37.487Z - Hash: d3637b1c658cbd8e1cae - Time: 28837ms
✔ Prerendering routes to /home/mywork/ourworldincrypto2/dist/ourworldincrypto2/browser complete.

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.