Cannot find module “#angular/animations for Ionic 3 - angularjs

I’m added this calendar (https://market.ionic.io/themes/ionic-calendar-week )for my Application ,But I had some error
How to fix it ,
this is my
im try to installed but not work npm install #angular/animations#latest --save
package.jason
{
"name": "MyApp",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "4.4.3",
"#angular/compiler": "4.4.3",
"#angular/compiler-cli": "4.4.3",
"#angular/core": "4.4.3",
"#angular/forms": "4.4.3",
"#angular/http": "4.4.3",
"#angular/platform-browser": "4.4.3",
"#angular/platform-browser-dynamic": "4.4.3",
"#ionic-native/core": "4.3.2",
"#ionic-native/splash-screen": "4.3.2",
"#ionic-native/status-bar": "4.3.2",
"#ionic/storage": "2.0.1",
"angular-percent-circle-directive": "^1.1.1",
"angular-svg-round-progressbar": "^1.1.1",
"cordova-android": "6.3.0",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-ionic-webview": "^1.1.16",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-whitelist": "^1.3.1",
"ion2-calendar": "^2.1.1",
"ionic-angular": "3.7.1",
"ionic-plugin-keyboard": "^2.2.1",
"ionic3-calendar": "^1.1.6",
"ionicons": "3.0.0",
"moment": "^2.19.1",
"rxjs": "5.4.3",
"sw-toolbox": "3.6.0",
"uuid": "^3.1.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"#ionic/app-scripts": "3.0.1",
"typescript": "2.3.4"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"ionic-plugin-keyboard": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {}
},
"platforms": [
"android"
]
}
}
error
Runtime Error Cannot find module "#angular/animations" Stack Error:
Cannot find module "#angular/animations"
at Object. (http://localhost:8100/build/vendor.js:132377:7)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.356 (http://localhost:8100/build/main.js:1179:95)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.337 (http://localhost:8100/build/main.js:1159:70)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at webpackJsonpCallback (http://localhost:8100/build/vendor.js:26:23)
at http://localhost:8100/build/main.js:1:1

now its work Im reinstalled npm install ionic AND AFTER INSTALLED AGAIN npm install #angular/animations#latest --save

Related

npm run build error: Linting and checking validity of types ...Error: Cannot find module 'escope'

Upgraded my project's package.json & did some audit fixes. But now not able to run the build. Tried all the solutions from stackoverflow and other forums, none of them worked.
Here is my package.json
{
"name": "my-admin-frontend",
"version": "0.0.1",
"author": "",
"license": "ISC",
"scripts": {
"dev": "node server.js",
"build": "next build ./src",
"preinstall": "npx npm-force-resolutions",
"start": "npm run build && node server.js",
"coverage": "jest",
"lint": "npm run lint:js && npm run lint:styles",
"lint:js": "eslint \"./src/pages/*.js\" \"./src/components/**/*.js\" \"./src/adapters/**/*.js\" --fix",
"lint:styles": "stylelint \"./src/pages/*.js\" \"./src/components/**/*.styles.js\" \"./src/components/**/*.css\"",
"check-audit": "npm audit",
"check-quality": "npm run lint",
"eslint-report": "eslint --ext .jsx,.js -c .eslintrc.yml -o report.json ./src/components -f json",
"test": "npm run coverage -- --coverage --watchAll=false"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.18.6",
"#date-io/date-fns": "^2.16.0",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.11.3",
"#material-ui/lab": "^4.0.0-alpha.60",
"#material-ui/pickers": "^3.2.10",
"#microsoft/applicationinsights-web": "^2.8.9",
"#microsoft/microsoft-graph-client": "^3.0.4",
"applicationinsights": "^2.3.6",
"axios": "^1.2.1",
"body-parser": "^1.20.1",
"cookie": "^0.5.0",
"cookie-parser": "^1.4.6",
"date-fns": "^2.29.3",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.7",
"eslint-config-next": "^13.0.6",
"express": "^4.18.2",
"express-session": "^1.17.3",
"grapesjs": "^0.20.1",
"grapesjs-preset-webpage": "^1.0.2",
"helmet": "^6.0.1",
"hpp": "^0.2.3",
"identity-obj-proxy": "^3.0.0",
"jquery": "^3.6.1",
"js-cookie": "^3.0.1",
"jwt-decode": "^3.1.2",
"mobx": "^6.7.0",
"mobx-react": "^7.6.0",
"mobx-react-lite": "^3.4.0",
"next": "^13.0.6",
"next-images": "^1.8.4",
"node-fetch": "^3.3.0",
"passport": "^0.6.0",
"passport-azure-ad": "^4.3.4",
"postcss": "^8.4.19",
"prop-types": "^15.8.1",
"qrcode.react": "^3.1.0",
"react": "^18.2.0",
"react-device-detect": "^2.2.2",
"react-dom": "^18.2.0",
"react-idle-timer": "^5.4.2",
"react-player": "^2.11.0",
"react-responsive-carousel": "^3.2.23",
"react-screen-orientation": "0.0.4",
"react-test-renderer": "^18.2.0",
"styled-components": "^5.3.6"
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.20.5",
"#babel/plugin-proposal-optional-chaining": "^7.18.9",
"#jest/fake-timers": "29.3.1",
"#wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
"autoprefixer": "^10.4.13",
"babel-eslint": "^7.2.3",
"babel-plugin-styled-components": "^2.0.7",
"contentful-management": "^10.22.0",
"dotenv": "^16.0.3",
"eslint": "^8.29.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.31.11",
"eslint-plugin-react-hooks": "^4.6.0",
"husky": "^8.0.2",
"jest": "^29.3.1",
"jest-enzyme": "^4.2.0",
"jest-puppeteer": "^6.1.1",
"junit-report-builder": "^3.0.1",
"pa11y-ci": "^3.0.1",
"puppeteer": "^19.4.0",
"stylelint": "^14.16.0",
"stylelint-config-recommended": "9.0.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.10.0",
"tailwindcss": "^3.2.4"
},
"resolutions": {
"node-fetch": "2.6.7",
"object-path": "0.11.5",
"glob-parent": "5.1.2",
"set-value": "4.0.1",
"underscore": "1.13.2",
"ws": "7.4.6",
"jest-environment-jsdom": "27.4.6"
},
"husky": {
"hooks": {
"pre-push": "npm run check-quality"
}
},
"robots": {
"prod": {
"userAgent": [
"*"
],
"allow": [
"/"
]
},
"dev": {
"userAgent": [
"*"
],
"disallow": [
"*"
],
"noindex": [
"*"
]
}
}
}
My .eslintrc.yml
env:
browser: true
node: true
commonjs: true
es6: true
jest: true
extends:
- eslint:recommended
- plugin:react/recommended
- plugin:jsx-a11y/recommended
- next/core-web-vitals
parser: babel-eslint
parserOptions:
ecmaFeatures:
jsx: true
ecmaVersion: 2018
sourceType: module
plugins:
- react
- jsx-a11y
- react-hooks
rules:
react-hooks/rules-of-hooks:
- error
react-hooks/exhaustive-deps:
- warn
indent:
- error
- 4
semi:
- error
- never
no-console:
- error
- allow:
- error
- warn
- info
object-curly-spacing:
- error
- always
array-bracket-spacing:
- error
- never
jsx-quotes:
- error
- prefer-single
lines-between-class-members:
- error
- always
no-multiple-empty-lines:
- error
- max: 1
react/display-name:
- off
settings:
react:
version: detect
My .eslintignore
out/*
.next/*
Error I am getting is :
Linting and checking validity of types ...Error: Cannot find module 'escope'
Require stack:
C:\project test\MT-MyProject\node_modules\eslint\lib\api.js
I tried multiple changes in package.json but none worked.
I tried cleaning cache and installing all again but no luck.
have You tried to uninstall eslint library and then to try with npm i and then build

tiny-warning : "Uncaught Error: Module build failed: Error: ENOENT: no such file or directory"

I just started a new project using React with Webpack. I keep getting the same error when serving the app.
Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open 'C:\workwork\apol2\apol2\node_modules\webpack\buildin\global.js'
at Object. (tiny-warning.esm.js:20)
at webpack_require (bootstrap 73c6a5b3e608efed68ac:19)
at Object. (scheduler.development.js:699)
at webpack_require (bootstrap 73c6a5b3e608efed68ac:19)
at Object. (index.js:6)
at Object. (index.js:7)
at webpack_require (bootstrap 73c6a5b3e608efed68ac:19)
at react-dom.development.js:21
at Object. (react-dom.development.js:21277)
at Object. (react-dom.development.js:21278)
This is not a package I installed and I don't know where to begin to debug this.. Could it be one of the package I use?
{
"name": "demo",
"version": "1.0.0",
"description": "",
"scripts": {
"build": "babel ./app -d build",
"build:watch": "babel ./app -d build --watch",
"build:client": "webpack --config ./webpack.config.js/",
"build:watch:client": "webpack --config ./webpack.config.js/ --watch",
"build:prod": "npm run build && npm run build:client",
"start": "npm run build:prod && NODE_ENV=production node ./build/server/index.js",
"start:dev": "parallelshell \"npm run build:watch\" \"npm run build:watch:client\" \"nodemon ./build/server/index.js\"",
"test": "jest --watch --coverage"
},
"author": "",
"license": "ISC",
"jest": {
"testMatch": [
"**/?(*.)+(spec|test).[jt]s?(x)"
],
"testPathIgnorePatterns": [
"/build/"
],
"modulePathIgnorePatterns": [
"/build/"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"coverageThreshold": {
"global": {
"branches": 90,
"functions": 90,
"lines": 90,
"statements": 90
}
},
"setupFilesAfterEnv": [
"<rootDir>setupTests.js"
]
},
"dependencies": {
"#babel/cli": "^7.5.5",
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#babel/preset-react": "^7.0.0",
"assert": "^2.0.0",
"axios": "^0.19.0",
"babel-loader": "^8.0.6",
"cors": "^2.8.4",
"express": "^4.15.3",
"fs": "0.0.2",
"html-webpack-plugin": "^3.2.0",
"https": "^1.0.0",
"mongodb": "^3.3.0-beta2",
"parallelshell": "^3.0.1",
"react": "^16.8.6",
"react-dom": "^16.10.2",
"react-router-dom": "^5.0.1",
"scheduler": "^0.16.2",
"webpack": "^4.41.1"
},
"devDependencies": {
"babel-jest": "^24.8.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"enzyme-to-json": "^3.3.5",
"eslint": "^6.1.0",
"eslint-config-airbnb": "^17.1.1",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"jest": "^24.8.0",
"nodemon": "^1.11.0",
"react-test-renderer": "^16.8.6",
"supertest": "^4.0.2"
}
}
After deleting my folder node_modules several times between my tests, the error disapeared...
Webpack is not installed, make sure install webpack or do npm install

Kendo Angular Grid Issue while installing using npm

I'm willing to use kendo-angular-grid for my Angular 5.2 application. According to the changelogs of Kendo, the latest version of it is 2.0.0. But when I'm installing the package using the command npm install --save #progress/kendo-angular-grid, an older version of 1.2.1 is getting installed.
I have tried to install the package by specifying the version as well -
npm install --save #progress/kendo-angular-grid#2.0.0
But it's showing the following error
No matching version found for #progress/kendo-angular-grid#2.0.0
My package.json is as follows -
{
"name": "demo",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular-devkit/core": "0.0.29",
"#angular/animations": "^5.0.0",
"#angular/common": "^5.0.0",
"#angular/compiler": "^5.0.0",
"#angular/core": "^5.0.0",
"#angular/forms": "^5.0.0",
"#angular/http": "^5.0.0",
"#angular/platform-browser": "^5.0.0",
"#angular/platform-browser-dynamic": "^5.0.0",
"#angular/router": "^5.0.0",
"#progress/kendo-angular-grid": "^1.2.1",
"core-js": "^2.4.1",
"npm": "^5.6.0",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "1.6.6",
"#angular/compiler-cli": "^5.0.0",
"#angular/language-service": "^5.0.0",
"#types/jasmine": "~2.8.6",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~9.4.0",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.9.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "2.6.2"
}
}
Additionally, I have npm version 5.6
I have updated the node version to the latest and reinstalled npm. It started working properly. Don't know what may have caused the issue.

Reference error: WebpackJsonp not defined

Converted my existing Angular 2 project into electron base cross platform than I installed electron-forge start development tools for development to simple easy way to package.
A command to launch app : electron-forge start
Unlikely returned an reference error "WebpackJsonp not defined" in error popup.
I found one of Stackoverflow answered to put your vendor.js before main.js but unfortunately it's not work in my case.
Package.json
{
"name": "myApp",
"version": "0.0.0",
"license": "MIT",
"main": "dist/main.bundle.js",
"scripts": {
"ng": "ng",
"start": "electron-forge start",
"build": "ng build --base-href $npm_package_config_baseurl",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"package": "electron-forge package",
"make": "electron-forge make"
},
"private": true,
"dependencies": {
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.0.0",
"#angular/core": "^4.0.0",
"#angular/forms": "^4.0.0",
"#angular/http": "^4.0.0",
"#angular/platform-browser": "^4.0.0",
"#angular/platform-browser-dynamic": "^4.0.0",
"#angular/router": "^4.0.0",
"#types/lodash": "^4.14.62",
"angular2-uuid": "^1.1.1",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"dotenv": "^4.0.0",
"electron-compile": "^6.4.0",
"lodash": "^4.17.4",
"rxjs": "^5.1.0",
"socket.io": "^1.7.3",
"socket.io-client": "^1.7.3",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "1.0.0",
"#angular/compiler-cli": "^4.0.0",
"#types/jasmine": "2.5.38",
"#types/node": "~6.0.60",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-preset-env": "^1.4.0",
"babel-preset-react": "^6.24.1",
"codelyzer": "~2.0.0",
"electron-prebuilt-compile": "1.6.5",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
},
"config": {
"forge": {
"make_targets": {
"win32": [
"squirrel"
],
"darwin": [
"zip"
],
"linux": [
"deb",
"rpm"
]
},
"electronPackagerConfig": {},
"electronWinstallerConfig": {
"name": ""
},
"electronInstallerDebian": {},
"electronInstallerRedhat": {},
"github_repository": {
"owner": "",
"name": ""
},
"windowsStoreConfig": {
"packageName": ""
}
}
}
}
Anyone face this issue before ? What would be a possible case of this error ?
Your help would highly appreciate . Thanks in advance.

at-loader Checking finished with xx errors on SystemJS to Webpack migration

i fork this project:
https://github.com/preboot/angular-webpack.git
My project is on SystemJS and i want to migrate it to webpack. So i copied my components to the new structure, i copy my dependencies from my old project.
First i execute npm install and everything was fine when download the dep. Later, i do npm start and i recive this error:
$ npm start
> app#0.0.0 start C:\Node.js\project-oak\angular-webpack
> npm run server
> app#0.0.0 server C:\Node.js\project-oak\angular-webpack
> webpack-dev-server --inline --progress --port 8080
10% building modules 3/3 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from http://localhost:8080/
Content not from webpack is served from ./src/public
404s will fallback to /index.html
10% building modules 6/10 modules 4 active ...gular-webpack\node_modules\url\url.js
[at-loader] Using typescript#2.2.2 from typescript and "tsconfig.json" from C:\Node.js\project-oak\angular-webpack/tsconfig.json.
94% asset optimization
[at-loader] Checking started in a separate process...
[at-loader] Checking finished with 94 errors
After the last line doest'n show anything.
Can you help me?
Here is my files:
tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"noEmitHelpers": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"lib": ["es2015", "dom"]
},
"compileOnSave": false,
"buildOnSave": false,
"awesomeTypescriptLoaderOptions": {
"forkChecker": true,
"useWebpackText": true
}
}
package.json
{
"name": "app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"clean": "rimraf node_modules doc dist && npm cache clean",
"clean-install": "npm run clean && npm install",
"clean-start": "npm run clean-install && npm start",
"watch": "webpack --watch --progress --profile",
"build": "rimraf dist && webpack --progress --profile --bail",
"server": "webpack-dev-server --inline --progress --port 8080",
"webdriver-update": "webdriver-manager update",
"webdriver-start": "webdriver-manager start",
"lint": "tslint --force \"src/**/*.ts\"",
"e2e": "protractor",
"e2e-live": "protractor --elementExplorer",
"pretest": "npm run lint",
"test": "karma start",
"posttest": "remap-istanbul -i coverage/json/coverage-final.json -o coverage/html -t html",
"test-watch": "karma start --no-single-run --auto-watch",
"ci": "npm run e2e && npm run test",
"docs": "typedoc --options typedoc.json src/app/app.component.ts",
"start": "npm run server",
"start:hmr": "npm run server -- --hot",
"postinstall": "npm run webdriver-update"
},
"dependencies": {
"#angular/animations": "^4.0.1",
"#angular/common": "^4.0.1",
"#angular/compiler": "^4.0.1",
"#angular/compiler-cli": "^4.0.1",
"#angular/core": "^4.0.1",
"#angular/forms": "^4.0.1",
"#angular/http": "^4.0.1",
"#angular/platform-browser": "^4.0.1",
"#angular/platform-browser-dynamic": "^4.0.1",
"#angular/platform-server": "^4.0.1",
"#angular/router": "^4.0.1",
"#angular/upgrade": "~2.2.2",
"#types/core-js": "0.9.35",
"#types/node": "^6.0.45",
"angular-calendar": "^0.12.0",
"angular-in-memory-web-api": "~0.1.13",
"angular2-chartist": "~0.10.1",
"angular2-google-maps": "~0.16.0",
"angular2-jwt": "^0.1.28",
"chartist": "~0.9.8",
"compression": "^1.6.2",
"core-js": "2.4.1",
"jquery": "~3.1.1",
"ng2-bootstrap": "~1.1.16",
"ng2-toasty": "^2.5.0",
"reflect-metadata": "~0.1.8",
"rxjs": "5.0.0-rc.5",
"systemjs": "~0.19.41",
"systemjs-builder": "^0.15.17",
"typescript": "^2.2.2",
"yargs": "^4.7.1",
"zone.js": "0.7.2"
},
"devDependencies": {
"#angularclass/hmr": "^1.0.1",
"#angularclass/hmr-loader": "^3.0.2",
"#types/jasmine": "^2.5.41",
"#types/node": "^6.0.38",
"#types/selenium-webdriver": "2.53.39",
"angular2-template-loader": "^0.6.0",
"autoprefixer": "^6.3.2",
"awesome-typescript-loader": "^3.1.2",
"codelyzer": "2.0.0",
"copy-webpack-plugin": "^4.0.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"file-loader": "^0.10.0",
"html-loader": "^0.4.0",
"html-webpack-plugin": "^2.8.1",
"istanbul-instrumenter-loader": "^0.2.0",
"jasmine-core": "^2.3.4",
"jasmine-spec-reporter": "^3.2.0",
"json-loader": "^0.5.3",
"karma": "1.4.1",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.0.3",
"karma-remap-istanbul": "0.2.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "2.0.2",
"node-sass": "^4.5.0",
"null-loader": "0.1.1",
"postcss-loader": "^1.1.0",
"protractor": "^4.0.10",
"raw-loader": "0.5.1",
"remap-istanbul": "^0.6.4",
"rimraf": "^2.5.1",
"sass-loader": "^6.0.1",
"shelljs": "^0.7.0",
"style-loader": "^0.13.0",
"ts-helpers": "^1.1.1",
"tslint": "^4.3.1",
"tslint-loader": "^3.3.0",
"typedoc": "^0.5.1",
"typescript": "^2.2.1",
"url-loader": "^0.5.6",
"webpack": "2.2.1",
"webpack-dev-server": "2.3.0"
}
}

Resources