Angular - error TS2307: Cannot find module 'ngx-bootstrap/modal' - ngx-bootstrap

I have installed ngx-bootstrap using the command npm install ngx-bootstrap --save but still when i am trying to build the solution it says
ERROR in src/app/app.module.ts(37,45): error TS2307: Cannot find module 'ngx-bootstrap/modal'.
I have checked in the node_modules folder ngx-bootstrap/modal is present there.
here is my package
{
"name": "test-app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.1.0",
"#angular/common": "^5.1.0",
"#angular/compiler": "^5.1.0",
"#angular/core": "^5.1.0",
"#angular/forms": "^5.1.0",
"#angular/http": "^5.1.0",
"#angular/platform-browser": "^5.1.0",
"#angular/platform-browser-dynamic": "^5.1.0",
"#angular/router": "^5.1.0",
"#ng-select/ng-select": "^1.6.3",
"#ngx-translate/core": "^9.1.1",
"#ngx-translate/http-loader": "^2.0.1",
"angular2-jwt": "^0.2.3",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"intl": "^1.2.5",
"jquery": "^3.3.1",
"moment": "^2.22.2",
"ng2-select2": "^1.0.0-beta.16",
"ngx-bootstrap": "^3.1.2",
"ngx-drag-and-drop-lists": "1.1.3",
"ngx-logger": "^3.1.0",
"ngx-moment": "^3.1.0",
"ngx-mydatepicker": "^2.4.9",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"#angular/cli": "^1.5.6",
"#angular/compiler-cli": "^5.1.0",
"#angular/language-service": "^5.1.0",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage": "^1.1.2",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-junit-reporter": "^1.2.0",
"karma-phantomjs-launcher": "^1.0.4",
"node-sass": "^4.9.0",
"phantomjs": "^2.1.7",
"protractor": "^5.3.2",
"ts-node": "~3.2.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
can anyone please help

Try using this npm install ngx-bootstrap#2.0.5 --save it might work!

I spent almost one day to solve this issue. please go with this solution.
Run "npm install ngx-bootstrap --save" and then Run "npm install"
It will automatically solve this problem and your application will run.

Related

ERROR in node_modules/export-from-json/dist/types/index.d.ts(2,13): error TS1005: '=' expected

I'm using angular version 6. After cloning the repo I did npm i. After that I did npm run start and facing this issue as shown below
Here is my package.json file
{
"name": "somaf",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.config.json --port=4300 --disable-host-check",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^6.1.0",
"#angular/cdk": "^6.2.0",
"#angular/common": "^6.1.0",
"#angular/compiler": "^6.1.0",
"#angular/core": "^6.1.0",
"#angular/forms": "^6.1.0",
"#angular/http": "^6.1.0",
"#angular/material": "^6.4.7",
"#angular/platform-browser": "^6.1.0",
"#angular/platform-browser-dynamic": "^6.1.0",
"#angular/router": "^6.1.0",
"ang-jsoneditor": "^1.10.4",
"angular-user-idle": "^2.2.7",
"angular2-promise-buttons": "^3.0.0",
"core-js": "^2.5.4",
"export-from-json": "^1.4.1",
"json-formatter-js": "^2.3.4",
"jsoneditor": "^9.7.4",
"rxjs": "6.2.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.8.0",
"#angular/cli": "~6.2.9",
"#angular/compiler-cli": "^6.1.0",
"#angular/language-service": "^6.1.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.3.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^6.3.19",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.14.1",
"protractor": "^7.0.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "^2.9.2",
"webpack": "^4.16.4"
}
}
I have tried updating the typescript version by removing '~' and adding '^' also updated the rxjs version by removing the '~' but did not work for me.

Keeps getting cannot Error: Cannot find module from #hookforms/resolver

I am working on a next js project and while refreshing the page i am getting this error. But when i start from beginning that is signing in and then visiting other pages then this error wont appear. But if there is any error in fetching data from api then it appears.
Here's the complete log:
Uncaught Error: Cannot find module 'C:\Users\abhit\Desktop\Minimal_JavaScript_v3.0.0\Minimal_JavaScript_v3.0.0\modified\node_modules\#hookform\resolvers\yup\dist\yup'
at createEsmNotFoundErr (node:internal/modules/cjs/loader:960:15)
at finalizeEsmResolution (node:internal/modules/cjs/loader:953:15)
at resolveExports (node:internal/modules/cjs/loader:483:14)
at Module._findPath (node:internal/modules/cjs/loader:523:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:925:27)
at mod._resolveFilename (file://C:\Users\abhit\Desktop\Minimal_JavaScript_v3.0.0\Minimal_JavaScript_v3.0.0\modified\node_modules\next\dist\build\webpack\require-hook.js:27:32)
at mod._resolveFilename (file://C:\Users\abhit\Desktop\Minimal_JavaScript_v3.0.0\Minimal_JavaScript_v3.0.0\modified\node_modules\next\dist\build\webpack\require-hook.js:27:32)
at mod._resolveFilename (file://C:\Users\abhit\Desktop\Minimal_JavaScript_v3.0.0\Minimal_JavaScript_v3.0.0\modified\node_modules\next\dist\build\webpack\require-hook.js:27:32)
at Module._load (node:internal/modules/cjs/loader:780:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
getServerError # client.js?4d30:7
eval # index.js?46cb:709
setTimeout (async)
Here is my package.json:
{
"name": "apsit-community",
"author": "apsit",
"version": "1.0.0",
"description": "Platform build by students for the students.",
"private": true,
"scripts": {
"lint": "next lint",
"lint:es": "eslint --ext .js,.jsx .",
"lint:fix": "eslint --fix --ext .js,.jsx .",
"dev": "next dev -p 3031",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#auth0/auth0-spa-js": "^1.19.3",
"#emotion/cache": "^11.7.1",
"#emotion/react": "^11.7.1",
"#emotion/server": "^11.4.0",
"#emotion/styled": "^11.6.0",
"#fullcalendar/common": "^5.10.1",
"#fullcalendar/daygrid": "^5.10.1",
"#fullcalendar/interaction": "^5.10.1",
"#fullcalendar/list": "^5.10.1",
"#fullcalendar/react": "^5.10.1",
"#fullcalendar/timegrid": "^5.10.1",
"#fullcalendar/timeline": "^5.10.1",
"#hookform/resolvers": "^2.9.7",
"#iconify/react": "^3.1.0",
"#mui/lab": "^5.0.0-alpha.60",
"#mui/material": "^5.2.4",
"#mui/x-data-grid": "^5.2.1",
"#react-pdf/renderer": "^2.0.21",
"#reduxjs/toolkit": "^1.7.1",
"#turf/bbox": "^6.5.0",
"amazon-cognito-identity-js": "^5.2.3",
"apexcharts": "^3.32.0",
"autosuggest-highlight": "^3.2.0",
"axios": "^0.24.0",
"change-case": "^4.1.2",
"cookie": "^0.4.1",
"d3-array": "^3.1.1",
"d3-scale": "^4.0.2",
"date-fns": "^2.27.0",
"deck.gl": "^8.6.5",
"emoji-mart": "^3.0.0",
"firebase": "^9.6.1",
"framer-motion": "^5.5.5",
"geojson": "^0.5.0",
"highlight.js": "^11.3.1",
"i18next": "^21.6.3",
"i18next-browser-languagedetector": "^6.1.2",
"immutable": "^4.0.0",
"js-cookie": "^3.0.1",
"jsonwebtoken": "^8.5.1",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.19",
"mapbox-gl": "^2.6.1",
"next": "^12.0.7",
"next-transpile-modules": "^9.0.0",
"notistack": "^2.0.3",
"nprogress": "^0.2.0",
"numeral": "^2.0.6",
"prop-types": "^15.8.1",
"react": "^17.0.1",
"react-apexcharts": "^1.3.9",
"react-beautiful-dnd": "^13.1.0",
"react-copy-to-clipboard": "^5.0.4",
"react-dom": "^17.0.2",
"react-dropzone": "^11.4.2",
"react-hook-form": "^7.22.2",
"react-i18next": "^11.15.1",
"react-image-lightbox": "^5.1.4",
"react-lazy-load-image-component": "^1.5.1",
"react-map-gl": "^6.1.18",
"react-markdown": "^7.1.1",
"react-quill": "^2.0.0",
"react-redux": "^7.2.6",
"react-slick": "^0.28.0",
"redux": "^4.1.2",
"redux-persist": "^6.0.0",
"rehype-raw": "^6.1.0",
"simplebar": "^5.3.6",
"simplebar-react": "^2.3.6",
"slick-carousel": "^1.8.1",
"stylis": "^4.0.13",
"stylis-plugin-rtl": "^2.1.1",
"worker-loader": "^3.0.8",
"yup": "^0.32.11"
},
"devDependencies": {
"#next/eslint-plugin-next": "^12.0.7",
"eslint": "^7.32.0",
"eslint-config-next": "^12.0.7",
"eslint-config-prettier": "^8.3.0",
"prettier": "2.5.1",
"typescript": "^4.4.4"
}
}
It's because, you don't have "react-hook-form" So, Try the following:
npm install react-hook-form #hookform/resolvers yup

ng serve has no ouput

I recently cloned a repo onto a new machine and now I have run into some issues in getting my development server up and running. When I run ng serve, there is no output in the terminal as seen below.
This is strange to me because when I created a fresh angular project and ran the same command, the server builds successfully. I'm not sure what I'm missing here to allow my server to build and run.
I have taken the following steps so far:
uninstalled #angular/cli globally and locally, and reconciled their versions to be the same as suggested at https://stackoverflow.com/a/39774999/12936248
installed angular-devkit/build-angular#0.80 to match the local version within my repo
Matched angular.json in the original and the fresh project, as the fields for development within the serve object did not exist in the original project.
But none of these can bring output to this command. Could someone please point me in the right direction so I may be able to get through this issue? This is my package.json below, and you may view my project at https://github.com/andrervincent/nbd
"name": "frontend",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular-devkit/architect": "^0.1300.4",
"#angular-devkit/core": "^13.0.4",
"#angular/animations": "~8.2.14",
"#angular/cli": "^13.0.4",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"cors": "^2.8.5",
"jwt-decode": "^3.1.2",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.25",
"#angular/compiler-cli": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}```

How to use HAML inside a .vue file in vue 3-rc.3

I am trying to use HAML inside the .vuefile in the vue version 3 but it is not working.
What I did.
Intall vue cli version 3.0.0-rc.3
Created a new project with:
My package is:
{
"name": "project 3",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"haml": "^0.4.3",
"haml-haml-loader": "^1.0.1",
"hamljs": "^0.6.2",
"register-service-worker": "^1.0.0",
"vue": "^2.5.16",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.0-beta.15",
"#vue/cli-plugin-eslint": "^3.0.0-beta.15",
"#vue/cli-plugin-pwa": "^3.0.0-beta.15",
"#vue/cli-plugin-unit-mocha": "^3.0.0-beta.15",
"#vue/cli-service": "^3.0.0-beta.15",
"#vue/test-utils": "^1.0.0-beta.16",
"chai": "^4.1.2",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"vue-template-compiler": "^2.5.16"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
In the old vue cli version 2 with pwa template it worked fine, my package.json for the one that works:
{
"name": "project",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "Ruan Carlos <ruanltbg#gmail.com>",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
"dependencies": {
"haml": "^0.4.3",
"haml-haml-loader": "^1.0.1",
"hamljs": "^0.6.2",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.5",
"babel-core": "^6.26.0",
"sw-precache-webpack-plugin": "^0.11.4",
"babel-eslint": "^8.0.1",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chalk": "^2.1.0",
"connect-history-api-fallback": "^1.4.0",
"copy-webpack-plugin": "^4.1.1",
"css-loader": "^0.28.7",
"cssnano": "^3.10.0",
"eslint": "^4.9.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-config-airbnb-base": "^11.1.3",
"eslint-import-resolver-webpack": "^0.8.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.2",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.5",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.4",
"webpack-bundle-analyzer": "^2.9.0",
"cross-env": "^5.0.5",
"karma": "^1.7.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-phantomjs-shim": "^1.5.0",
"karma-sinon-chai": "^1.3.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.5",
"mocha": "^4.0.1",
"chai": "^4.1.2",
"sinon": "^4.0.1",
"sinon-chai": "^2.14.0",
"inject-loader": "^3.0.1",
"babel-plugin-istanbul": "^4.1.5",
"phantomjs-prebuilt": "^2.1.15",
"chromedriver": "^2.33.1",
"cross-spawn": "^5.1.0",
"nightwatch": "^0.9.16",
"selenium-server": "^3.6.0",
"semver": "^5.4.1",
"shelljs": "^0.7.8",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.3.0",
"rimraf": "^2.6.2",
"url-loader": "^0.6.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.7.1",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.19.1",
"webpack-merge": "^4.1.0",
"uglify-es": "^3.1.3"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Does anybody has any clue?

Npm not running a custom script

When I run ng build && node server.js from the same directory, everything is ok.
When I run npm build this is my result:
C:\Users\Admin\Desktop\mean-darts-app>npm build
C:\Users\Admin\Desktop\mean-darts-app>
{
"name": "dart-app",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"build": "ng build && node server.js",
"ng": "ng",
"start": "ng serve",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "^2.3.1",
"#angular/compiler": "^2.3.1",
"#angular/core": "^2.3.1",
"#angular/forms": "^2.3.1",
"#angular/http": "^2.3.1",
"#angular/platform-browser": "^2.3.1",
"#angular/platform-browser-dynamic": "^2.3.1",
"#angular/router": "^3.3.1",
"axios": "^0.16.2",
"body-parser": "^1.17.2",
"core-js": "^2.4.1",
"express": "^4.15.3",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"#angular/compiler-cli": "^2.3.1",
"#types/jasmine": "2.5.38",
"#types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.28.3",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "~2.0.3"
}
}
For custom scripts you need to use:
npm run script_name
or
npm run-script script_name
Look into your server.js file, do you have a server.listen statement on it? No output only means "I've finished executing this program with no errors".