0
votes

I have implemented Angular Universal in my project and I want it to deploy to Serverless environment in AWS but when I running the app local I am getting below error.

I followed below link for implementing Angular Universal

https://medium.com/cactus-techblog/deploy-angular-universal-on-aws-lambda-from-scratch-1b169289eac2

index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>CodeToSolutions</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    

</head>

<body>
    <app-root></app-root>
</body>

</html>

angular.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "BlogApp": {
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss"
                }
            },
            "root": "",
            "sourceRoot": "src",
            "prefix": "app",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/BlogApp/browser",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.app.json",
                        "aot": false,
                        "assets": [
                            "src/favicon.ico",
                            "src/assets",
                            "src/sitemap.xml",
                            "src/robots.txt"
                        ],
                        "styles": [
                            "node_modules/bootstrap/dist/css/bootstrap.min.css",
                            "node_modules/font-awesome/css/font-awesome.min.css",
                            "src/styles.scss"
                        ],
                        "scripts": ["./node_modules/jquery/dist/jquery.min.js",
                            "node_modules/bootstrap/dist/js/bootstrap.min.js"
                        ]
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [{
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.prod.ts"
                            }],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": false,
                            "budgets": [{
                                    "type": "initial",
                                    "maximumWarning": "2mb",
                                    "maximumError": "5mb"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "6kb",
                                    "maximumError": "10kb"
                                }
                            ]
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "BlogApp:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "BlogApp:build:production"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "BlogApp: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",
                            "src/sitemap.xml",
                            "src/robots.txt"
                        ],
                        "styles": [
                            "src/styles.scss"
                        ],
                        "scripts": []
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
                            "tsconfig.app.json",
                            "tsconfig.spec.json",
                            "e2e/tsconfig.json"
                        ],
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                },
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "BlogApp:serve"
                    },
                    "configurations": {
                        "production": {
                            "devServerTarget": "BlogApp:serve:production"
                        }
                    }
                },
                "serverless": {
                    "builder": "@angular-devkit/build-angular:server",
                    "options": {
                      "outputPath": "dist/BlogApp/serverless",
                      "main": "serverless.ts",
                      "tsConfig": "tsconfig.serverless.json"
                    },
                    "configurations": {
                      "production": {
                        "outputHashing": "media",
                        "fileReplacements": [
                          {
                            "replace": "src/environments/environment.ts",
                            "with": "src/environments/environment.prod.ts"
                          }
                        ],
                        "sourceMap": false,
                        "optimization": false
                      }
                    }
                  },
                "server": {
                    "builder": "@angular-devkit/build-angular:server",
                    "options": {
                        "outputPath": "dist/BlogApp/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": "BlogApp:build",
                        "serverTarget": "BlogApp:server"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "BlogApp:build:production",
                            "serverTarget": "BlogApp:server:production"
                        }
                    }
                },
                "prerender": {
                    "builder": "@nguniversal/builders:prerender",
                    "options": {
                        "browserTarget": "BlogApp:build:production",
                        "serverTarget": "BlogApp:server:production",
                        "routes": [
                            "/"
                        ]
                    },
                    "configurations": {
                        "production": {}
                    }
                }
            }
        }
    },
    "defaultProject": "BlogApp"
}

package.json

{
    "name": "BlogApp",
    "version": "0.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "dev:ssr": "ng run BlogApp:serve-ssr",
        "serve:ssr": "node dist/BlogApp/server/main.js",
        "build:ssr": "ng build --prod && ng run BlogApp:server:production",
        "prerender": "ng run BlogApp:prerender",
        "serve:sls": "serverless offline start",
        "build:sls": "ng build --prod && ng run BlogApp:serverless:production",
        "deploy": "serverless deploy",
        "terminate": "serverless remove",
        "build:serverless:deploy": "npm run build:sls && npm run deploy"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "~9.1.6",
        "@angular/common": "~9.1.6",
        "@angular/compiler": "~9.1.6",
        "@angular/core": "~9.1.6",
        "@angular/forms": "~9.1.6",
        "@angular/platform-browser": "~9.1.6",
        "@angular/platform-browser-dynamic": "~9.1.6",
        "@angular/platform-server": "~9.1.6",
        "@angular/router": "~9.1.6",
        "@syncfusion/ej2-angular-richtexteditor": "^18.2.56",
        "aws-sdk": "^2.797.0",
        "aws-serverless-express": "^3.4.0",
        "@vendia/serverless-express": "^4.3.4",
        "bootstrap": "^3.3.7",
        "express": "^4.15.2",
        "font-awesome": "^4.7.0",
        "jquery": "^3.5.1",
        "ng-lazyload-image": "^9.1.0",
        "ngx-spinner": "^10.0.1",
        "rxjs": "~6.5.4",
        "tslib": "^1.10.0",
        "web-animations-js": "^2.3.2",
        "zone.js": "~0.10.2"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "~0.901.5",
        "@angular/cli": "~9.1.5",
        "@angular/compiler-cli": "~9.1.6",
        "@nguniversal/builders": "^9.1.1",
        "@nguniversal/express-engine": "^9.1.1",
        "@types/express": "^4.17.0",
        "@types/jasmine": "~3.5.0",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^12.19.6",
        "codelyzer": "^5.1.2",
        "jasmine-core": "~3.5.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~5.0.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "~2.1.0",
        "karma-jasmine": "~3.0.1",
        "karma-jasmine-html-reporter": "^1.4.2",
        "protractor": "~5.4.3",
        "serverless": "^2.30.2",
        "serverless-apigw-binary": "^0.4.4",
        "serverless-offline": "^6.8.0",
        "ts-node": "~8.3.0",
        "tslint": "~6.1.0",
        "typescript": "~3.8.3"
    }
}


I am running the below command to run the app locally

npm run build:sls && npm run serve:sls

enter image description here

1

1 Answers

0
votes

This is resolved by changing the serve:sls script in package.json file serverless offline start --noPrependStageInUrl