10

I have upgraded my angular to angular 13. when I run to build SSR it gives me following error.

ERROR in ./node_modules/@angular/common/fesm2015/http.mjs 12:0-56
Module not found: Error: Can't resolve 'rxjs/operators' in '/Users/nr/aws/jobsaf-website-staging/application/node_modules/@angular/common/fesm2015'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'rxjs/operators' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/app/app.server.module.ts 6:0-57 16:25-42
 @ ./src/main.server.ts 3:0-58 3:0-58
 @ ./server.ts 32:0-52 40:15-30 44:0-34 44:0-34

ERROR in ./node_modules/@angular/core/fesm2015/core.mjs 8:0-39
Module not found: Error: Can't resolve 'rxjs/operators' in '/Users/nr/aws/jobsaf-website-staging/application/node_modules/@angular/core/fesm2015'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'rxjs/operators' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./server.ts 30:0-47 35:0-14

ERROR in ./node_modules/@angular/forms/fesm2015/forms.mjs 11:0-37
Module not found: Error: Can't resolve 'rxjs/operators' in '/Users/nr/aws/jobsaf-website-staging/application/node_modules/@angular/forms/fesm2015'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'rxjs/operators' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/app/app.module.ts 12:0-45 78:12-23
 @ ./src/app/app.server.module.ts 3:0-41 12:18-27
 @ ./src/main.server.ts 3:0-58 3:0-58
 @ ./server.ts 32:0-52 40:15-30 44:0-34 44:0-34

ERROR in ./node_modules/@angular/platform-server/fesm2015/platform-server.mjs 21:0-39
Module not found: Error: Can't resolve 'rxjs/operators' in '/Users/nr/aws/jobsaf-website-staging/application/node_modules/@angular/platform-server/fesm2015'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'rxjs/operators' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/main.server.ts 4:0-77 4:0-77 4:0-77
 @ ./server.ts 32:0-52 40:15-30 44:0-34 44:0-34

ERROR in ./node_modules/@angular/router/fesm2015/router.mjs 10:0-180
Module not found: Error: Can't resolve 'rxjs/operators' in '/Users/nr/aws/jobsaf-website-staging/application/node_modules/@angular/router/fesm2015'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'rxjs/operators' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/app/app.component.ts 2:0-48 35:31-44
 @ ./src/app/app.server.module.ts 2:0-47 13:20-32
 @ ./src/main.server.ts 3:0-58 3:0-58
 @ ./server.ts 32:0-52 40:15-30 44:0-34 44:0-34

my package.json file:

{
  "name": "admin-panel",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "DEBUG=jobsaf-website:* nodemon --inspect --trace-warnings --legacy-watch  --trace-warnings ./bin/www",
    "seed": "node ./seeds/static-tables.js",
    "test-jobsaf": "mocha --timeout 10000",
    "rm-web": "rm -rf ./public/web/*",
    "ng": "node ./node_modules/@angular/cli/bin/ng serve --host 0.0.0.0",
    "ng:build": "node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng  build --configuration production --aot",
    "build:server:prod": "node --max_old_space_size=4048 ./node_modules/@angular/cli/bin/ng run jobsaf-website:server:prod && webpack --config webpack.server.config.js",
    "build:browser:prod": "node --max_old_space_size=4048 ./node_modules/@angular/cli/bin/ng build --configuration production --aot --vendor-chunk --deleteOutputPath=true --buildOptimizer  --progress=true",
    "build:server:staging": "node --max_old_space_size=4048 ./node_modules/@angular/cli/bin/ng run jobsaf-website:server:staging && webpack --config webpack.server.config.js",
    "build:browser:staging": "node --max_old_space_size=4048 ./node_modules/@angular/cli/bin/ng build --configuration production --configuration=staging --aot --vendor-chunk --deleteOutputPath=true --buildOptimizer",
    "build:stats": "node --max_old_space_size=3192 node_modules/@angular/cli/bin/ng build --configuration production --aot --vendor-chunk --deleteOutputPath=true --buildOptimizer  --progress=true --configuration production --stats-json",
    "build:prod": "npm run rm-web && npm run build:server:prod && npm run build:browser:prod",
    "build:staging": "npm run rm-web && npm run build:server:staging && npm run build:browser:staging",
    "server": "node local.js",
    "file:migration": "APP_FILE_MIGRATION=true node ./migration/file-migration.js",
    "test_env": "set NODE_ENV=test",
    "jest": "jest --detectOpenHandles --watchAll --config ./jest.config.js",
    "coverage": "jest -i --coverage",
    "jest:ci": "jest --detectOpenHandles --forceExit --config ./jest.config.js",
    "test": "npm run test_env && npm run jest",
    "test:ci": "npm run test_env && npm run seed && npm run jest:ci",
    "dev:ssr": "ng run jobsaf-website:serve-ssr",
    "serve:ssr": "node public/web/server/main.js",
    "build:ssr": "ng build --configuration production && ng run jobsaf-website:server:prod",
    "prerender": "ng run jobsaf-website:prerender",
    "postinstall": "ngcc"
  },
  "private": true,
  "napa": {
    "jquery.flot.spline": "miloszfalinski/jquery.flot.spline",
    "ika.jvectormap": "kakirigi/ika.jvectormap"
  },
  "dependencies": {
    "@angular/animations": "^13.0.2",
    "@angular/common": "^13.0.2",
    "@angular/compiler": "^13.0.2",
    "@angular/compiler-cli": "^13.0.2",
    "@angular/core": "^13.0.2",
    "@angular/forms": "^13.0.2",
    "@angular/material": "^13.0.2",
    "@angular/platform-browser": "^13.0.2",
    "@angular/platform-browser-dynamic": "^13.0.2",
    "@angular/platform-server": "^13.0.2",
    "@angular/pwa": "^13.0.3",
    "@angular/router": "^13.0.2",
    "@angular/service-worker": "^13.0.2",
    "@fortawesome/angular-fontawesome": "^0.10.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fullcalendar/core": "^5.10.1",
    "@hapi/joi": "^15.1.0",
    "@ng-select/ng-select": "^8.1.1",
    "@nguniversal/common": "^13.0.1",
    "@nguniversal/express-engine": "^13.0.1",
    "@ngx-loading-bar/core": "^5.1.2",
    "@ngxs/store": "^3.7.3-dev.master-1e7127b",
    "@schematics/angular": "^13.0.3",
    "@sindresorhus/slugify": "^1.1.0",
    "@trademe/ng-defer-load": "^8.2.1",
    "@types/jquery": "^3.5.8",
    "angular-archwizard": "^7.0.0",
    "angular2-uuid": "^1.1.1",
    "apicache": "^1.6.3",
    "archiver": "^5.3.0",
    "aws-sdk": "^2.1031.0",
    "bluebird": "^3.7.2",
    "bootstrap": "5.1.3",
    "compression": "^1.7.4",
    "compromise": "^13.11.4",
    "cookie-parser": "^1.4.6",
    "core-js": "3.19.1",
    "cors": "~2.8.5",
    "debug": "^4.3.2",
    "dotenv": "^10.0.0",
    "easyimage": "^3.1.1",
    "ejs": "^3.1.6",
    "exceljs": "^4.3.0",
    "express": "^4.17.1",
    "express-jwt": "^6.1.0",
    "express-mongo-sanitize": "^2.1.0",
    "express-rate-limit": "^5.5.1",
    "express-useragent": "^1.0.15",
    "express-validator": "^6.13.0",
    "feed": "^4.2.2",
    "file-saver": "^2.0.5",
    "firebase-admin": "^10.0.0",
    "font-awesome": "^4.7.0",
    "generate-password": "^1.7.0",
    "google-auth-library": "^7.10.2",
    "hammerjs": "^2.0.8",
    "helmet": "^4.6.0",
    "html-pdf": "^3.0.1",
    "http-status": "^1.5.0",
    "intl-tel-input": "^17.0.13",
    "izitoast": "1.4.0",
    "joi-objectid": "^4.0.2",
    "jquery": "^3.6.0",
    "jsonwebtoken": "^8.5.1",
    "jwt-decode": "^3.1.2",
    "keyword-extractor": "0.0.20",
    "kickbox": "^2.0.4",
    "libphonenumber-js": "^1.9.43",
    "localstorage-polyfill": "^1.0.1",
    "lodash": "^4.17.21",
    "lodash.uniq": "^4.5.0",
    "md5": "^2.3.0",
    "moment": "^2.29.1",
    "mongoose": "5.8.11",
    "mongoose-history": "^0.8.0",
    "mongoose-unique-validator": "^2.0.3",
    "mongoose-url-slugs": "^1.0.2",
    "multer": "^1.4.3",
    "multer-s3": "^2.10.0",
    "multer-s3-transform": "^2.10.3",
    "mysql": "^2.18.1",
    "ng-recaptcha": "^9.0.0",
    "ng2-file-upload": "^1.4.0",
    "ngx-auth": "^5.4.0",
    "ngx-bootstrap": "^6.1.0",
    "ngx-facebook": "^3.0.0-0",
    "ngx-img-cropper": "^11.0.0",
    "ngx-infinite-scroll": "^10.0.1",
    "ngx-moment": "^5.0.0",
    "ngx-pagination": "^5.1.1",
    "ngx-quill-editor": "^2.2.2",
    "ngx-toastr": "^14.2.0",
    "node-schedule": "^2.0.0",
    "nodemailer": "^6.7.1",
    "passport": "^0.5.0",
    "passport-facebook-token": "^4.0.0",
    "passport-google-id-token": "^0.4.7",
    "passport-google-token": "^0.1.2",
    "passport-linkedin-token": "^0.1.1",
    "passport-local": "^1.0.0",
    "pdf-to-text": "0.0.7",
    "phantomjs-prebuilt": "^2.1.16",
    "phone": "^3.1.10",
    "phpass": "^0.1.1",
    "rand-token": "^1.0.1",
    "request": "^2.88.2",
    "request-ip": "^2.1.3",
    "rxjs": "^6.5.5",
    "sharp": "^0.29.3",
    "showdown": "^1.9.1",
    "simple-line-icons": "^2.5.5",
    "socket.io": "^4.3.2",
    "socket.io-client": "^4.3.2",
    "socket.io-redis": "^5.4.0",
    "socketio-auth": "^0.1.1",
    "textract": "^2.5.0",
    "ts-loader": "9.2.6",
    "underscore": "^1.13.1",
    "unique-random-array": "^2.0.0",
    "url": "^0.11.0",
    "util": "^0.12.4",
    "uuid": "^8.3.2",
    "winston": "^3.3.3",
    "xlsx": "^0.17.4",
    "xss-clean": "^0.1.1",
    "zone.js": "~0.11.4",
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.3",
    "@angular/cli": "^13.0.3",
    "@types/express": "^4.17.13",
    "@types/hammerjs": "^2.0.40",
    "@types/mocha": "^9.0.0",
    "@types/node": "^16.11.7",
    "@types/underscore": "^1.11.3",
    "husky": "^7.0.0",
    "jasmine-core": "~3.10.1",
    "jasmine-spec-reporter": "~7.0.0",
    "jest": "^27.3.1",
    "karma": "^6.3.9",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^3.0.3",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
    "lint-staged": "^12.0.2",
    "mocha": "^9.1.3",
    "ng-diff-match-patch": "^3.0.1",
    "nodemon": "^2.0.15",
    "protractor": "^7.0.0",
    "supertest": "^6.1.6",
    "tslib": "^2.3.1",
    "tslint": "^6.1.3",
    "typescript": "4.4.3",
    "webpack": "^5.64.1",
    "webpack-cli": "^4.9.1"
  }
}

Any Idea

5
  • Why would you have jQuery in an Angular app? o_o they play extremely poorly together Jan 5, 2022 at 8:44
  • a package is used, and that package is dependency in jQuery Jan 5, 2022 at 8:50
  • 1
    But why would you have anything jQuery related, or depending on jQuery, in an Angular application? Jan 5, 2022 at 8:51
  • 3
    I'm suspicious that you're using wrong RxJS version. Angular 13 should be used with RxJS 7.3 stackblitz.com/edit/angular-ivy-wpzw1z
    – martin
    Jan 5, 2022 at 9:30
  • I will look at it :) Jan 5, 2022 at 9:59

2 Answers 2

8

I just solve this issue by correcting the RxJS version to 7.4.0. I hope this can solve others issue as well.

1
  • @shuklendu, getting same with with "rxjs": "~7.5.5". Do you have any clue?
    – Alam
    May 5, 2022 at 9:12
4

My issues was resolved by adding it in the package.json

 "overrides": {
    "rxjs": "7.4.0"
  },

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.