search

MurhafSousli / ngx-scrollbar

Custom overlay-scrollbars with native scrolling mechanism
https://ngx-scrollbar.netlify.app/
MIT License
618 stars 99 forks source link

Importing the NgScrollbarModule throw an error on client (client is crushed) #408

Closed nlitterat closed 3 years ago

nlitterat commented 3 years ago

What are you trying to do?

Start using the library

What troubleshooting steps have you tried?

add NgScrollbarModule to the @NgModule imports

Reproduction

It might be my application specifics I included the package json so you can see the libraries I am using But the only thing I did was to include the library

Environment

nlitterat commented 3 years ago 
 "dependencies": {
    "@angular/animations": "^12.2.1",
    "@angular/cdk": "^10.2.7",
    "@angular/common": "12.2.1",
    "@angular/compiler": "12.2.1",
    "@angular/core": "12.2.1",
    "@angular/forms": "12.2.1",
    "@angular/localize": "^12.2.1",
    "@angular/platform-browser": "12.2.1",
    "@angular/platform-browser-dynamic": "12.2.1",
    "@angular/router": "12.2.1",
    "@fortawesome/angular-fontawesome": "^0.8.2",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@ng-bootstrap/ng-bootstrap": "6.1.0",
    "@ngx-translate/core": "12.1.2",
    "@ngx-translate/http-loader": "4.0.0",
    "@popperjs/core": "^2.4.0",
    "@types/googlemaps": "^3.39.11",
    "@types/sass": "^1.16.0",
    "@types/xregexp": "^4.3.0",
    "angular-cropperjs": "^1.0.2",
    "bootstrap": "4.3.1",
    "core-js": "3.6.5",
    "cropperjs": "^1.5.7",
    "hammerjs": "^2.0.8",
    "masonry-layout": "^4.2.2",
    "mixpanel-browser": "^2.41.0",
    "moment": "2.24.0",
    "ng-recaptcha": "^7.0.1",
    "ngx-cookie": "4.0.2",
    "ngx-dropzone": "^2.2.2",
    "ngx-infinite-scroll": "7.2.0",
    "ngx-logger": "^4.1.2",
    "ngx-masonry": "^10.0.5",
    "ngx-quill": "^12.0.1",
    "ngx-scrollbar": "^8.0.0",
    "ngx-sharebuttons": "^8.0.1",
    "ngx-webstorage": "5.0.0",
    "quill": "^1.3.7",
    "quill-delta": "^4.2.2",
    "quill-emoji": "^0.1.8",
    "quill-magic-url": "^2.1.5",
    "quill-mention": "^3.0.0",
    "regenerator-runtime": "^0.13.7",
    "rollbar": "^2.21.1",
    "rxjs": "6.5.5",
    "tslib": "^2.0.0",
    "xregexp": "4.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "10.0.1",
    "@angular-devkit/build-angular": "^12.2.1",
    "@angular/cli": "12.2.1",
    "@angular/compiler-cli": "12.2.1",
    "@ngtools/webpack": "10.2.0",
    "@types/chai": "4.1.7",
    "@types/chai-string": "1.4.1",
    "@types/jest": "24.0.14",
    "@types/mocha": "5.2.7",
    "@types/node": "10.12.27",
    "@types/selenium-webdriver": "4.0.0",
    "@types/webpack": "^4.41.25",
    "@types/webpack-merge": "^4.1.5",
    "angular-router-loader": "0.8.5",
    "angular2-template-loader": "0.6.2",
    "autoprefixer": "9.6.0",
    "base-href-webpack-plugin": "^2.0.0",
    "browser-sync": "2.26.7",
    "browser-sync-webpack-plugin": "2.2.2",
    "cache-loader": "4.0.0",
    "chai": "4.2.0",
    "chai-as-promised": "7.1.1",
    "chai-string": "1.5.0",
    "codelyzer": "^6.0.0",
    "copy-webpack-plugin": "5.0.3",
    "cross-env": "^7.0.3",
    "css-loader": "3.0.0",
    "file-loader": "4.0.0",
    "fork-ts-checker-webpack-plugin": "1.3.6",
    "friendly-errors-webpack-plugin": "1.7.0",
    "generator-jhipster": "6.1.2",
    "html-loader": "0.5.5",
    "html-webpack-plugin": "3.2.0",
    "husky": "2.4.1",
    "jasmine-spec-reporter": "~5.0.0",
    "jest": "24.8.0",
    "jest-junit": "6.4.0",
    "jest-preset-angular": "7.1.1",
    "jest-sonar-reporter": "2.0.0",
    "lint-staged": "8.2.0",
    "merge-jsons-webpack-plugin": "1.0.19",
    "mini-css-extract-plugin": "1.3.2",
    "mocha": "6.1.4",
    "moment-locales-webpack-plugin": "1.2.0",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "postcss-loader": "4.1.0",
    "prettier": "1.18.2",
    "protractor": "~7.0.0",
    "reflect-metadata": "0.1.13",
    "rimraf": "2.6.3",
    "sass": "1.26.0",
    "sass-loader": "7.1.0",
    "simple-progress-webpack-plugin": "1.1.2",
    "style-loader": "0.23.1",
    "terser-webpack-plugin": "1.3.0",
    "thread-loader": "2.1.2",
    "to-string-loader": "1.1.5",
    "ts-loader": "6.0.2",
    "ts-node": "8.2.0",
    "tslint": "~6.1.0",
    "tslint-config-prettier": "1.18.0",
    "tslint-loader": "3.5.4",
    "typescript": "4.3.5",
    "webdriver-manager": "12.1.5",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "3.7.1",
    "webpack-merge": "4.2.1",
    "webpack-notifier": "1.7.0",
    "webpack-visualizer-plugin": "0.1.11",
    "workbox-webpack-plugin": "4.3.1",
    "write-file-webpack-plugin": "4.5.0",
    "xml2js": "0.4.19"
  },
  "engines": {
    "node": ">=8.9.0"
  },
  "lint-staged": {
    "{,src/**/}*.{md,json,ts,css,scss,yml}": [
      "prettier --write",
      "git add"
    ]
  },
  "scripts": {
    "prettier:format": "prettier --write \"{,src/**/}*.{md,json,ts,css,scss,yml}\"",
    "lint": "tslint --project tsconfig.json -e 'node_modules/**'",
    "lint:fix": "npm run lint -- --fix",
    "ngc": "ngc -p tsconfig-aot.json",
    "cleanup": "rimraf dist/ dist/aot dist/out-tsc",
    "e2e": "protractor src/e2e/protractor.conf.js",
    "postinstall": "ngcc",
    "start": "npm run predev && npm run webpack:dev",
    "start-tls": "npm run webpack:dev -- --env.tls",
    "serve": "npm run start",
    "build": "npm i && ngcc &&  npm run prebuild && npm run ng:build:prod",
    "test": "npm run lint ",
    "test:watch": "npm run test -- --watch",
    "webpack:dev": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --env.stats=minimal --disable-host-check",
    "webpack:dev-verbose": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --profile --progress --env.stats=normal",
    "webpack:build:main": "npm run webpack -- --config webpack/webpack.dev.js --env.stats=minimal",
    "webpack:build": "npm run cleanup && npm run webpack:build:main",
    "webpack:prod:main": "npm run webpack -- --config webpack/webpack.prod.js",
    "webpack:prod": "npm run cleanup && npm run webpack:prod:main",
    "webpack:test": "npm run test",
    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js ",
    "build:sourcemaps": "npm run build --output-path=localSourceMaps",
    "prebuild": "npm --no-git-tag-version version minor",
    "predev": "npm --no-git-tag-version version patch",
    "ng:build:prod": "ng build --configuration production",
    "publish-please": "publish-please",
    "prepublishOnly": "publish-please guard"
  }
f4irline commented 3 years ago

I had the same issue when running tests with jest so I decided to revert back to version 7.6.1. Thinking back now, I feel like this could be a configuration issue in tsconfig.

MurhafSousli commented 3 years ago

@nlitterat it looks like you've upgraded an older project to v12, maybe it wasn't upgraded properly. check your tsconfig and the compilation mode https://angular.io/guide/angular-compiler-options#compilationmode.

You also have some Angular packages that weren't updated to v12, especially Angular CDK, @angular-builders/custom-webpack and @ngtools/webpack

I recommend that you create a new Angular 12 project with the CLI and then copy the tsconfig settings from there.

nlitterat commented 3 years ago

Hi thanks for the answer I did as you suggested the only big change I saw was the target and the use of strict = true I also upgraded the packages that you pointed out. status is the same I am pasting here my tsconfig.json

{
  "compileOnSave": true,

  "compilerOptions": {
    "baseUrl": "./src",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": ["es2018", "dom"],
    "typeRoots": ["node_modules/@types"],

    //Specific properties
    "emitDecoratorMetadata": true,
    "removeComments": false,
    "noImplicitAny": false,
    "skipLibCheck": true,
    "suppressImplicitAnyIndexErrors": true,
    "paths": {
      "@app/*": ["./src/app/*"]
    },
    "allowJs": true,
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "compilationMode" : "full"
  },
  "exclude": [
    "node_modules",
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}
DaveGold commented 3 years ago

I encounter the same issue when upgrading to 8.0.0

MurhafSousli commented 3 years ago

To sum up, the only change in v8.0.0 is to compile the library with partial mode described here https://angular.io/guide/angular-compiler-options#compilationmode.

So those issues are not caused by this library, but it is related with your outdated Angular version you use in your project, even if you upgraded to v12 using the CLI, it might not been upgraded properly!

I've noticed when upgrading to NG12 using the CLI that some config are not the same as if you create a new angular 12 project using CLI, so don't take the CLI for guarantee!

I retried again to install ngx-scrollbar@8.0.0 in a brand new project by Angular CLI 12, and I confirm that it works like a charm.

If you can't get ngx-scrollbar@8.0.0 inside your app, then I highly recommend you to create a new project and move all your code there.

NOTE: online code editors also have the same problem with the packages compiled using the partial mode, as mentioned here https://github.com/stackblitz/core/issues/624

Closing this as not caused by the library...