jacobjohn-transitiv commented 2 years ago

🐞 Bug report

What modules are related to this issue?

[ ] builders
[ ] common
[x] express-engine

Is this a regression?

Yes, the previous version in which this bug was not present was: 9 ### Description We have decided to update our Angular from 9, step-wise, to 14. after many updates to dependencies, I have been able to transpile the application just fine and run it locally via `ng serve` and even build it via `npm run build`. But when I try to make an ssr build, I'm met with this error after `Server application bundle generation complete.` I'm not quite sure what the issue is here based on the error message. ## 🔬 Minimal Reproduction

package.json


{
  "name": "app-name",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng serve",
    "start-test": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng run appname-frontend:serve-coverage",
    "start-lighthouse": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng serve -c test",
    "build": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --configuration production --base-href /app/ && npm run post-build",
    "test": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng test",
    "test:tc": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng test --watch=false --source-map=false --code-coverage",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "e2e:ci": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng run appname-frontend-e2e:e2e-ci",
    "e2e:coverage": "npx nyc report --reporter=lcov --reporter=text-summary",
    "serve-coverage": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng run appname-frontend:serve-coverage",
    "ngcc": "ngcc",
    "lighthouse:ci": "lhci autorun",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    "cypress:browserstack:start": "browserstack-cypress run",
    "cypress:open": "./node_modules/cypress/bin/cypress open",
    "cypress:r": "node run-cypress.js",
    "cypress:run": "cypress run --record --key 6178512f-732c-46dc-9b45-db19c83f5792",
    "cypress:ci": "run-p --race start-test cypress:r",
    "fix-memory-limit": "cross-env LIMIT=2048 increase-memory-limit",
    "ng-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng",
    "post-build": "node ./build/post-build.js",
    "build:ssr_bak": "npm run build:client-and-server-bundles && npm run post-build && npm run webpack:server",
    "serve:ssr_bak": "node dist/server",
    "build:client-and-server-bundles_bak": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --configuration production --base-href /app/ && node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng run appname-frontend:server",
    "dev:ssr": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng run appname-frontend:serve-ssr",
    "serve:ssr": "node dist/server/main.js",
    "build:ssr": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --configuration production --base-href / && npm run post-build && node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng run appname-frontend:server:production",
    "prerender": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng run appname-frontend:prerender",
    "postinstall": "ngcc",
    "deploy": "docker-compose up --build || true",
    "compodoc": "node --max_old_space_size=8000 ./node_modules/@compodoc/compodoc/bin/index-cli.js -p tsconfig.json"
  },
  "browserslist": [
    "> 0.5%",
    "last 2 versions",
    "Firefox ESR",
    "not dead",
    "not IE 9-11"
  ],
  "engines": {
    "node": "10.19.0"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.1.3",
    "@angular/cdk": "^14.1.3",
    "@angular/common": "^14.1.3",
    "@angular/compiler": "^14.1.3",
    "@angular/core": "^14.1.3",
    "@angular/flex-layout": "14.0.0-beta.40",
    "@angular/forms": "^14.1.3",
    "@angular/localize": "^14.1.3",
    "@angular/material": "^14.1.3",
    "@angular/platform-browser": "^14.1.3",
    "@angular/platform-browser-dynamic": "^14.1.3",
    "@angular/platform-server": "^14.1.3",
    "@angular/router": "^14.1.3",
    "@angular/upgrade": "^14.1.3",
    "@fullcalendar/core": "^4.4.2",
    "@fullstory/browser": "^1.4.5",
    "@gorniv/ngx-universal": "^2.2.2",
    "@highcharts/map-collection": "^1.1.3",
    "@microsoft/signalr": "^5.0.0-rc.1.20451.17",
    "@ng-bootstrap/ng-bootstrap": "^13",
    "@ng-matero/extensions": "^14.1.0",
    "@ngrx/data": "^14",
    "@ngrx/effects": "^14",
    "@ngrx/entity": "^14",
    "@ngrx/store": "^14",
    "@ngrx/store-devtools": "^14",
    "@nguniversal/express-engine": "^14",
    "@popperjs/core": "^2.11.6",
    "@sentry/angular": "^7.11.1",
    "@sentry/fullstory": "^1.1.5",
    "@sentry/tracing": "^7",
    "@stripe/stripe-js": "^1.16.0",
    "@syncfusion/ej2-angular-base": "^20.2.45",
    "@syncfusion/ej2-angular-buttons": "^20.2.45",
    "@syncfusion/ej2-angular-dropdowns": "^20.2.45",
    "@syncfusion/ej2-angular-grids": "^20.2.45",
    "@syncfusion/ej2-angular-inputs": "^20.2.45",
    "@syncfusion/ej2-angular-lists": "^20.2.45",
    "@syncfusion/ej2-angular-navigations": "^20.2.45",
    "@syncfusion/ej2-angular-querybuilder": "^20.2.45",
    "@types/file-saver": "^2.0.1",
    "@types/moment-duration-format": "^2.2.2",
    "@types/numeral": "0.0.26",
    "@types/request": "^2.48.5",
    "@types/stripe-v3": "^3.1.25",
    "@uirouter/angular": "^9.1.0",
    "@uirouter/core": "^6.0.6",
    "@uirouter/rx": "^0.6.5",
    "angular": "^1.8.1",
    "angular-file": "2.0.0",
    "angular-tree-component": "^8.5.6",
    "chart.js": "^2.9.3",
    "compression": "^1.7.4",
    "cookie-parser": "^1.4.5",
    "core-js": "^3.6.5",
    "d3": "^5.16.0",
    "domino": "^2.1.6",
    "express": "^4.17.1",
    "file-saver": "^2.0.2",
    "font-awesome": "^4.7.0",
    "fullcalendar": "^3.10.2",
    "highcharts": "^8.2.0",
    "https-proxy-agent": "^2.2.4",
    "i": "^0.3.7",
    "increase-memory-limit": "^1.0.7",
    "jquery": "^3.5.1",
    "js-marker-clusterer": "^1.0.0",
    "karma-coverage": "~2.0.3",
    "karma-junit-reporter": "^2.0.1",
    "launchdarkly-js-client-sdk": "^2.19.2",
    "less": "^3.12.2",
    "lodash": "^4.17.20",
    "log4js": "^3.0.6",
    "moment": "^2.29.1",
    "moment-duration-format": "^2.3.2",
    "morgan": "^1.10.0",
    "nanoscroller": "0.8.7",
    "ng-editable-table": "^0.3.15",
    "ngx-clipboard": "^13.0.1",
    "ngx-color-picker": "^11.0.0",
    "ngx-loggly-logger": "^6.0.0",
    "ngx-mask": "^12.0.0",
    "ngx-mat-select-search": "^4.2.1",
    "ngx-monaco-editor": "^8.0.0",
    "ngx-order-pipe": "^2.1.0",
    "ngx-papaparse": "^5.0.0",
    "ngx-toastr": "^14.3.0",
    "ngx-window-token": "^5.0.0",
    "npm": "^8.1.3",
    "numeral": "^2.0.6",
    "primeicons": "^2.0.0",
    "quill": "^1.3.7",
    "rxjs": "6.6.7",
    "sass": "^1.54.4",
    "save": "^2.4.0",
    "terraformer-wkt-parser": "^1.2.1",
    "ts-loader": "8.0.14",
    "tslib": "^2.0.0",
    "winston": "^3.3.3",
    "winston-loggly-bulk": "^2.0.3",
    "xstate": "^4.13.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "9.0.0",
    "@angular-devkit/build-angular": "^14.1.3",
    "@angular-devkit/core": "^14.1.3",
    "@angular/cli": "^14.1.3",
    "@angular/compiler-cli": "^14.1.3",
    "@angular/language-service": "^14.1.3",
    "@briebug/cypress-schematic": "^4.3.0",
    "@compodoc/compodoc": "^1.1.18",
    "@cypress/code-coverage": "^3.9.2",
    "@cypress/webpack-preprocessor": "^5.5.0",
    "@istanbuljs/nyc-config-typescript": "^1.0.1",
    "@lhci/cli": "^0.9.0",
    "@nguniversal/builders": "^14",
    "@types/angular": "^1.7.3",
    "@types/angular-ui-router": "^1.1.37",
    "@types/compression": "^1.7.0",
    "@types/cookie-parser": "^1.4.2",
    "@types/d3": "^5.16.4",
    "@types/d3-geo": "^1.12.1",
    "@types/express": "^4.17.8",
    "@types/geojson": "^7946.0.7",
    "@types/google.maps": "^3.43.3",
    "@types/highcharts": "^5.0.44",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.8",
    "@types/jquery": "^3.5.2",
    "@types/lodash": "^4.14.161",
    "@types/node": "^12.12.64",
    "@types/node-fetch": "^2.5.7",
    "@types/quill": "^2.0.4",
    "angular2-template-loader": "^0.6.2",
    "codelyzer": "^6.0.0",
    "concurrently": "^5.3.0",
    "cypress": "^6.9.1",
    "cypress-multi-reporters": "^1.4.0",
    "cypress-social-logins": "^1.6.0",
    "electron": "^8.5.2",
    "gulp": "^4.0.2",
    "gulp-concat": "2.6.1",
    "gulp-minify-css": "1.2.4",
    "gulp-rename": "1.3.0",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "3.0.0",
    "istanbul-instrumenter-loader": "^3.0.1",
    "istanbul-lib-coverage": "^3.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "2.0.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-teamcity-reporter": "^1.1.0",
    "mocha-junit-reporter": "^2.0.0",
    "ng-mocks": "^14.1.3",
    "ngx-build-plus": "^11.0.0",
    "node-fetch": "^2.6.1",
    "npm-run-all": "^4.1.5",
    "nyc": "^15.1.0",
    "prettier": "2.0.5",
    "protractor": "~7.0.0",
    "puppeteer": "^5.5.0",
    "regexp-replace-loader": "^1.0.1",
    "source-map-support": "^0.5.19",
    "start-server-and-test": "^1.11.5",
    "ts-loader": "8.0.14",
    "ts-node": "^7.0.1",
    "tslint": "~6.1.0",
    "typescript": "4.6.4",
    "wallaby-webpack": "3.9.9",
    "webpack-cli": "^3.3.12"
  }
}

angular.json


{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "appname-frontend": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.png",
              {
                "glob": "**/*",
                "input": "../node_modules/ngx-monaco-editor/assets/monaco",
                "output": "./assets/monaco/min"
              }
            ],
            "styles": [
              "node_modules/font-awesome/css/font-awesome.min.css",
              "src/assets/theme/primeng-omega-theme.css",
              "src/assets/theme/primeng.min.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/fullcalendar/dist/fullcalendar.min.css",
              "node_modules/quill/dist/quill.snow.css",
              "node_modules/nanoscroller/bin/css/nanoscroller.css",
              {
                "input": "src/custom-theme.scss",
                "inject": true
              },
              "src/styles2.scss",
              "node_modules/ngx-toastr/toastr.css",
              "src/styles.css",
              "src/app.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/nanoscroller/bin/javascripts/jquery.nanoscroller.js",
              "node_modules/moment/moment.js",
              "node_modules/chart.js/dist/Chart.js",
              "node_modules/fullcalendar/dist/fullcalendar.js",
              "node_modules/quill/dist/quill.js",
              "../../libs/react-component/main.min.js"
            ],
            "aot": false,
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "test": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.e2e.ts"
                }
              ]
            },
            "coverage": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.e2e.ts"
                }
              ]
            },
            "production": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          },
          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "appname-frontend:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "appname-frontend:build:production"
            },
            "test": {
              "browserTarget": "appname-frontend:build:test"
            }
          }
        },
        "serve-coverage": {
          "builder": "ngx-build-plus:dev-server",
          "options": {
            "browserTarget": "appname-frontend:build:coverage",
            "extraWebpackConfig": "./cypress/coverage.webpack.js"
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "server.ts",
            "tsConfig": "src/tsconfig.server.json",
            "sourceMap": true,
            "optimization": false
          },
          "configurations": {
            "dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.ts"
                }
              ],
              "optimization": true
            },
            "test": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.e2e.ts"
                }
              ],
              "optimization": true
            },
            "production": {
              "optimization": true,
              "outputHashing": "none",
              "namedChunks": false,
              "extractLicenses": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          },
          "defaultConfiguration": ""
        },
        "build-dev": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.png",
              {
                "glob": "**/*",
                "input": "../node_modules/ngx-monaco-editor/assets/monaco",
                "output": "./assets/monaco/min/"
              }
            ],
            "styles": [
              "node_modules/font-awesome/css/font-awesome.min.css",
              "src/assets/theme/primeng-omega-theme.css",
              "src/assets/theme/primeng.min.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/fullcalendar/dist/fullcalendar.min.css",
              "node_modules/quill/dist/quill.snow.css",
              "node_modules/nanoscroller/bin/css/nanoscroller.css",
              {
                "input": "src/custom-theme.scss",
                "inject": true
              },
              "src/styles2.scss",
              "node_modules/ngx-toastr/toastr.css",
              "src/styles.css",
              "src/app.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/nanoscroller/bin/javascripts/jquery.nanoscroller.js",
              "node_modules/moment/moment.js",
              "node_modules/chart.js/dist/Chart.js",
              "node_modules/fullcalendar/dist/fullcalendar.js",
              "node_modules/quill/dist/quill.js",
              "../../libs/react-component/main.min.js"
            ],
            "aot": false,
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "test": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.e2e.ts"
                }
              ],
              "optimization": true
            },
            "coverage": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.e2e.ts"
                }
              ],
              "optimization": true
            },
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          },
          "defaultConfiguration": ""
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "appname-frontend:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "codeCoverage": true,
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/nanoscroller/bin/javascripts/jquery.nanoscroller.js",
              "node_modules/moment/moment.js",
              "node_modules/chart.js/dist/Chart.js",
              "node_modules/fullcalendar/dist/fullcalendar.js",
              "node_modules/quill/dist/quill.js",
              "../../libs/react-component/main.min.js"
            ],
            "styles": [
              "node_modules/font-awesome/css/font-awesome.min.css",
              "src/assets/theme/primeng-omega-theme.css",
              "src/assets/theme/primeng.min.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/fullcalendar/dist/fullcalendar.min.css",
              "node_modules/quill/dist/quill.snow.css",
              "node_modules/nanoscroller/bin/css/nanoscroller.css",
              {
                "input": "src/custom-theme.scss",
                "inject": true
              },
              "src/styles2.scss",
              "node_modules/ngx-toastr/toastr.css",
              "src/styles.css",
              "src/app.scss"
            ],
            "assets": [
              "src/assets",
              "src/favicon.png",
              {
                "glob": "**/*",
                "input": "../node_modules/ngx-monaco-editor/assets/monaco",
                "output": "./assets/monaco/min/"
              }
            ]
          }
        },
        "serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "options": {
            "browserTarget": "appname-frontend:build",
            "serverTarget": "appname-frontend:server"
          },
          "configurations": {
            "production": {
              "browserTarget": "appname-frontend:build:production",
              "serverTarget": "appname-frontend:server:production"
            }
          }
        },
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "browserTarget": "appname-frontend:build:production",
            "serverTarget": "appname-frontend:server:production",
            "routes": [
              "/"
            ]
          },
          "configurations": {
            "production": {},
            "test": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.e2e.ts"
                }
              ],
              "optimization": true
            }
          }
        },
        "cypress-run": {
          "builder": "@briebug/cypress-schematic:cypress",
          "options": {
            "devServerTarget": "appname-frontend:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "appname-frontend:serve:production"
            }
          }
        },
        "cypress-open": {
          "builder": "@briebug/cypress-schematic:cypress",
          "options": {
            "devServerTarget": "appname-frontend:serve",
            "watch": true,
            "headless": false
          },
          "configurations": {
            "production": {
              "devServerTarget": "appname-frontend:serve:production"
            }
          }
        }
      }
    },
    "appname-frontend-e2e": {
      "root": "",
      "sourceRoot": "",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@briebug/cypress-schematic:cypress",
          "options": {
            "devServerTarget": "appname-frontend:serve-coverage",
            "watch": true,
            "headless": false
          },
          "configurations": {
            "production": {
              "devServerTarget": "appname-frontend:serve-coverage:production"
            }
          }
        },
        "e2e-ci": {
          "builder": "@briebug/cypress-schematic:cypress",
          "options": {
            "browser": "chrome",
            "devServerTarget": "appname-frontend:serve-coverage",
            "headless": true,
            "watch": false
          },
          "configurations": {
            "production": {
              "devServerTarget": "appname-frontend:serve-coverage:production"
            }
          }
        },
        "cypress-run": {
          "builder": "@briebug/cypress-schematic:cypress",
          "options": {
            "devServerTarget": "appname-frontend-e2e:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "appname-frontend-e2e:serve:production"
            }
          }
        },
        "cypress-open": {
          "builder": "@briebug/cypress-schematic:cypress",
          "options": {
            "devServerTarget": "appname-frontend-e2e:serve",
            "watch": true,
            "headless": false
          },
          "configurations": {
            "production": {
              "devServerTarget": "appname-frontend-e2e:serve:production"
            }
          }
        }
      }
    }
  },
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "",
      "style": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": ""
    }
  }
}

app.server.module.ts


import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import {FlexLayoutServerModule} from '@angular/flex-layout/server';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    FlexLayoutServerModule,
],
  providers: [
    // Add universal-only providers here
  ],
  bootstrap: [ AppComponent ],
})
export class AppServerModule {}

🔥 Exception or Error




./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/app.scss:22:0 - Error: Module parse failed: Unexpected character '@' (22:0)
File was processed with these loaders:
 * ./node_modules/resolve-url-loader/index.js
 * ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|   Animation
| *****/
> @keyframes slideRight {
|   from {
|     margin-left: 100%;

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! appname-frontend@0.0.0 build:ssr: `node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --configuration production --base-href / && npm run post-build && node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng run appname-frontend:server:production`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the appname-frontend@0.0.0 build:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jacobjohn/.npm/_logs/2022-08-26T20_13_00_889Z-debug.log

🌍 Your Environment





     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 14.1.3
Node: 14.20.0
Package Manager: npm 6.14.17
OS: darwin x64

Angular: 14.1.3
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, material
... platform-browser, platform-browser-dynamic, platform-server
... router, upgrade

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.900.7
@angular-devkit/build-angular   14.1.3
@angular-devkit/core            14.1.3
@angular-devkit/schematics      14.1.3
@angular/flex-layout            14.0.0-beta.40
@nguniversal/builders           14.1.0
@nguniversal/express-engine     14.1.0
@schematics/angular             14.1.3
rxjs                            6.6.7
typescript                      4.6.4

jacobjohn-transitiv commented 2 years ago

when I remove the keyframe styling, this is the new error, which I can't even find in my app.scss file...

./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/app.scss:61:47 - Error: Module parse failed: Unexpected token (61:47)
File was processed with these loaders:
 * ./node_modules/resolve-url-loader/index.js
 * ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|   scroll bars
| *********/
> button, input[type=button], input[type=submit] {
|   color: hsl(0deg, 0%, 0%);
|   background-color: transparent;

edit: Found the styling. It is actually from another scss file that was being imported in app.scss. It appears that any styling will cause this build issue. I'm not quite sure how to fix it.

peturh commented 2 years ago

Not sure what it can be, but I ran into a similar issue going to version 12. Angular is now using a very picky CSS optimizer and simply bypassing it, helped me solve our issue.

Try changing the optimization param on both server and client configurations:

 "optimization": {
              "styles": {
                "inlineCritical": false
              }
            },

I can see as well you haven't bumped the version of @angular-devkit/architect as it's still running 0.900.7 You should probably be running 0.1402.1
If that doesn't work, try deleting node_modules/ folder. Build dependencies from scratch.
If that that doesn't work, remove you npm- or yarn-lockfile and node_modules/ and install dependencies from scratch.

It's always hard (imo) to bump several major versions. A friendly advice that I think works and saves time is making sure you're 1 major version behind Angular. Our project is currently running v13. And I will update to v14 the week before v15 hits. It works relatively smoothly for me. Angular Universal has been particularly cumbersome (imo) to update, as it's not always as straight forward as https://update.angular.io make it look.

jacobjohn-transitiv commented 2 years ago

Not sure what it can be, but I ran into a similar issue going to version 12. Angular is now using a very picky CSS optimizer and simply bypassing it, helped me solve our issue.

Try changing the optimization param on both server and client configurations:
 "optimization": {
              "styles": {
                "inlineCritical": false
              }
            },
I can see as well you haven't bumped the version of @angular-devkit/architect as it's still running 0.900.7 You should probably be running 0.1402.1

If that doesn't work, try deleting node_modules/ folder. Build dependencies from scratch.

If that that doesn't work, remove you npm- or yarn-lockfile and node_modules/ and install dependencies from scratch.

It's always hard (imo) to bump several major versions. A friendly advice that I think works and saves time is making sure you're 1 major version behind Angular. Our project is currently running v13. And I will update to v14 the week before v15 hits. It works relatively smoothly for me. Angular Universal has been particularly cumbersome (imo) to update, as it's not always as straight forward as https://update.angular.io make it look.

Thank you for your response! I completely agree with making sure the application is updated. I was baffled when I saw that our application was version 9, which is why we decided to update it. I finally figured it out for the one's have have this problem!

The error message was not very helpful so I decided to build a new angular 14 app with ng new and added universal. I compared the new app with my current app and noticed, as you did @peturh, that some of my packages were still outdated. When I updated these packages, including the angular builder and angular-devkit, the error remained but I saw a new error for a loader located in app.ts. I removed the loader since it wasn't required (it appeared to have loaded app.scss on init - don't ask why, the code was there before I joined this project). After removing this line, and the loader, the app finally completed the build.

angular-automatic-lock-bot[bot] commented 2 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

angular / universal

Upgraded From Angular 9 to 14 - build:ssr leads to Module parse failed error #2794

🐞 Bug report

What modules are related to this issue?

Is this a regression?

🔥 Exception or Error

🌍 Your Environment