Module '"../../../../#types/parse5"' has no exported member 'DefaultTreeElement' - node.js

When attempting to build an angular app, this error comes up:
node_modules/#angular/cdk/schematics/utils/html-manipulation.d.ts:9:10 - error TS2305: Module '"../../../../#types/parse5"' has no exported member 'DefaultTreeElement'.
Angular 11.2.14
Angular CLI: 11.2.13
Node: 14.17.0
I'm working with 4 more people using the same app and nobody is having this problem.
I've tried the following solutions that didn't work:
Delete the entire app and clone it back in from git.
Clear the node_modules and install it all over again.
Updated Node.js (to the current one)
Updated npm (to the current one)
Updated Angular CLI (to the current one)
Installed #types/parse5 (using npm install #types/parse5)
In between every of these I did a npm cache clean -f
This is how the package.json is right now:
{
"name": "rferp",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ngcc"
},
"private": true,
"dependencies": {
"#angular-devkit/build-angular": "^0.1102.5",
"#angular-devkit/core": "^11.2.5",
"#angular/animations": "^11.2.6",
"#angular/cdk": "^11.2.13",
"#angular/common": "^11.2.14",
"#angular/compiler": "^11.2.14",
"#angular/core": "^11.2.14",
"#angular/flex-layout": "^11.0.0-beta.33",
"#angular/forms": "^11.2.14",
"#angular/platform-browser": "^11.2.14",
"#angular/platform-browser-dynamic": "^11.2.14",
"#angular/router": "^11.2.14",
"#fullcalendar/core": "^5.4.0",
"#fullcalendar/daygrid": "^5.4.0",
"#fullcalendar/interaction": "^5.4.0",
"#fullcalendar/rrule": "^5.4.0",
"#fullcalendar/timegrid": "^5.4.0",
"#ngrx/component-store": "^11.0.1",
"#ngrx/effects": "^11.0.1",
"#ngrx/entity": "^11.0.1",
"#ngrx/router-store": "^11.0.1",
"#ngrx/store": "^11.0.1",
"#ngrx/store-devtools": "^11.0.1",
"#types/bingmaps": "0.0.0",
"#types/node": "^13.13.33",
"#types/parse5": "^6.0.0",
"azure-maps-control": "^2.0.32",
"azure-maps-drawing-tools": "^0.1.6",
"chart.js": "^2.9.4",
"clone": "^2.1.2",
"core-js": "^3.8.0",
"exceljs": "^4.2.0",
"file-saver": "^2.0.5",
"font-awesome": "^4.7.0",
"moment": "^2.29.1",
"ng-azure-maps": "^4.0.0",
"parse5": "^6.0.1",
"prettier": "^2.2.0",
"primeicons": "^4.1.0",
"primeng": "^11.4.2",
"quill": "^1.3.7",
"rrule": "^2.6.6",
"rxjs": "~6.6.6",
"ts-node": "^8.10.2",
"tslib": "^2.0.0",
"zone.js": "^0.10.3"
},
"devDependencies": {
"#angular/cli": "^11.2.5",
"#angular/compiler-cli": "^11.2.6",
"#angular/language-service": "^11.2.6",
"#fortawesome/fontawesome-pro": "^5.15.1",
"#types/jasmine": "^3.6.2",
"#types/jasminewd2": "^2.0.6",
"#typescript-eslint/eslint-plugin": "^2.34.0",
"#typescript-eslint/parser": "^2.34.0",
"eslint": "^6.7.2",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.1.3",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.2.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"ng-packagr": "^11.0.3",
"protractor": "~7.0.0",
"resize-observer-polyfill": "^1.5.1",
"typescript": "4.0.2"
}
}

I had the same problem, suddenly a few days ago.
Also using Angular 11.
Somehow the parse5 package was updated to version 6.0.1, I think, because reverting back to 5.0.0 fixed it.

Related

Some problem with build my application on angular 13

I try to found solutions, on this problem...
Because, is not on my code...
Its is after update to latest npm and fs-extra...
Build at: 2022-03-16T13:33:13.718Z - Hash: aeac85e5815ce0c4 - Time: 7748ms
Error: node_modules/#angular-devkit/build-angular/node_modules/#angular-devkit/build-webpack/src/webpack-dev-server/index.d.ts:26:121 - error TS2307: Cannot find module '../../.
./core/src' or its corresponding type declarations.
26 declare const _default: import("#angular-devkit/architect/src/internal").Builder<WebpackDevServerBuilderSchema & import("../../../core/src").JsonObject>;
~~~~~~~~~~~~~~~~~~~
Error: node_modules/#angular-devkit/build-angular/node_modules/#angular-devkit/build-webpack/src/webpack/index.d.ts:30:116 - error TS2307: Cannot find module '../../../core/src'
or its corresponding type declarations.
30 declare const _default: import("#angular-devkit/architect/src/internal").Builder<RealWebpackBuilderSchema & import("../../../core/src").JsonObject>;
~~~~~~~~~~~~~~~~~~~
Error: node_modules/#angular-devkit/build-angular/node_modules/webpack-dev-middleware/types/index.d.ts:204:27 - error TS2694: Namespace '"fs"' has no exported member 'StatSyncFn
'.
204 statSync?: import("fs").StatSyncFn;
Somebody having like solutions on this ?...
I have try to re-install webpack-server, all indicated...
Nothing to do...I don't understound why that's not working...
How to proceed...?
Thanks to us for your help...
Here to package.json
"name": "bonrefil",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#angular/animations": "~13.0.0",
"#angular/cdk": "^13.2.6",
"#angular/common": "~13.0.0",
"#angular/compiler": "~13.0.0",
"#angular/core": "~13.0.0",
"#angular/forms": "~13.0.0",
"#angular/material": "^13.2.6",
"#angular/platform-browser": "~13.0.0",
"#angular/platform-browser-dynamic": "~13.0.0",
"#angular/router": "~13.0.0",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.7.2",
"fs-extra": "^10.0.1",
"image-to-base64": "^2.2.0",
"jquery": "^3.6.0",
"popper.js": "^1.16.1",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"uuid": "^8.3.2",
"xdata": "^2.1.17",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^13.2.6",
"#angular-devkit/core": "^13.2.6",
"#angular/cli": "~13.0.3",
"#angular/compiler-cli": "~13.0.0",
"#nguniversal/builders": "^13.0.2",
"#types/jasmine": "~3.10.0",
"#types/jquery": "^3.5.9",
"#types/node": "^12.20.46",
"#types/uuid": "^8.3.4",
"#types/webpack-dev-server": "^4.7.2",
"bootstrapvalidator": "^0.5.4",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.4.3",
"webpack": "^5.70.0",
"webpack-dev-middleware": "^5.3.1",
"webpack-dev-server": "^4.7.4"
}
}
You need to update your #types/node version. If you update to at least 15.12.2 it should now work: See https://app.renovatebot.com/package-diff?name=#types%2Fnode&from=13.13.5&to=15.12.2

Run Out of Memory Using Node Build 'ng build' - Angular App

I am trying to build my angular application using 'ng build'. It is failing because it is running out of memory to build as I surmise from my research. I have tried several of the solutions out there with no luck. After typing 'ng build' either from VSC terminal or on DOS line, it runs for about 3 minutes during this step:
Generating ES5 bundles for differential loading...
then it fails with this error written to my angular-errors.log file:
[error] Error: Call retries were exceeded
at ChildProcessWorker.initialize (c:\development\gems\Frontend_Serenity_A9_SLIM\Frontend_Serenity_A9\node_modules\jest-worker\build\workers\ChildProcessWorker.js:193:21)
at ChildProcessWorker.onExit (c:\development\gems\Frontend_Serenity_A9_SLIM\Frontend_Serenity_A9\node_modules\jest-worker\build\workers\ChildProcessWorker.js:263:12)
at ChildProcess.emit (events.js:203:13)
at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
I have tried increasing my memory as some articles/stack overflows have indicated. I tried this:
npm install -g increase-memory-limit
and then ran this command at the root of my angular project:
increase-memory-limit
to no avail. Using es5 rather than es2015 is not a solution for our app. Any help or ideas you can offer are GREATLY appreciated. I have been trying everything for a week now and am still stuck. Thanks!
package.json contents:
{
"name": "serenity",
"version": "9.0.0",
"license": "PrimeNG Commercial",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "9.0.4",
"#angular/cdk": "9.1.0",
"#angular/common": "9.0.4",
"#angular/compiler": "9.0.4",
"#angular/core": "9.0.4",
"#angular/forms": "9.0.4",
"#angular/material": "^9.1.0",
"#angular/platform-browser": "9.0.4",
"#angular/platform-browser-dynamic": "9.0.4",
"#angular/router": "9.0.4",
"#aspnet/signalr": "^1.1.4",
"#fullcalendar/core": "4.0.2",
"#fullcalendar/daygrid": "4.0.1",
"#fullcalendar/interaction": "4.0.2",
"#fullcalendar/timegrid": "4.0.1",
"#handsontable/angular": "^5.1.1",
"#mdi/svg": "^5.3.45",
"#types/leaflet-draw": "^1.0.2",
"#types/plotly.js": "^1.50.12",
"chart.js": "2.7.3",
"d3": "^5.16.0",
"font-awesome": "4.7.0",
"handsontable": "^7.4.2",
"intl": "1.2.5",
"leaflet": "^1.6.0",
"leaflet-draw": "^1.0.4",
"leaflet-sidebar-v2": "^3.2.2",
"leaflet.control.layers.tree": "^1.0.0",
"leaflet.glify": "^3.0.0",
"material-design-icons": "^3.0.1",
"plotly.js-dist": "^1.54.1",
"primeflex": "1.0.0",
"primeng": "9.0.1",
"prismjs": "1.15.0",
"quill": "1.1.8",
"rxjs": "6.5.4",
"three": "^0.117.1",
"web-animations-js": "github:angular/web-animations-js#release_pr208",
"xlsx": "^0.16.2",
"zone.js": "0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "0.900.4",
"#angular/cli": "9.0.4",
"#angular/compiler-cli": "9.0.4",
"#angular/language-service": "9.0.4",
"#types/jasmine": "3.5.7",
"#types/jasminewd2": "2.0.8",
"#types/leaflet": "^1.5.17",
"#types/node": "12.12.29",
"codelyzer": "5.2.1",
"jasmine-core": "3.5.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "4.3.0",
"karma-chrome-launcher": "3.1.0",
"karma-coverage-istanbul-reporter": "2.1.1",
"karma-jasmine": "2.0.1",
"karma-jasmine-html-reporter": "1.5.2",
"protractor": "5.4.3",
"ts-node": "8.3.0",
"tslint": "5.18.0",
"typescript": "3.7.5"
}
}
Note sure if this will help in your case, but have you tried increasing the maximumError in the budgets section under configurations in the angular.json file?
Yes, it was a memory issue and I was having a hard time getting node to change the memory limit before it built my project. I was able to get it to allocate 3 gigs and then it worked fine.

Critical dependency: the request of a dependency is an expression

Im trying to add gpio support to a project on my raspberry pi 3 model B but i keep encountering an error with bindings when i try to ng serve my app. This problem persists when I try to use any other gpio package.
WARNING in ./node_modules/rpi-gpio/node_modules/bindings/bindings.js
76:22-40 Critical dependency: the request of a dependency is an expression
...
...
...
# ./node_modules/rpi-gpio/node_modules/bindings/bindings.js
# ./node_modules/rpi-gpio/node_modules/epoll/epoll.js
# ./node_modules/rpi-gpio/rpi-gpio.js
# ./src/app/ui/...
# ./src/app/app.module.ts
# ./src/main.ts
# multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
WARNING in ./node_modules/rpi-gpio/node_modules/bindings/bindings.js
76:43-53 Critical dependency: the request of a dependency is an expression
...
...
...
# ./node_modules/rpi-gpio/node_modules/bindings/bindings.js
# ./node_modules/rpi-gpio/node_modules/epoll/epoll.js
# ./node_modules/rpi-gpio/rpi-gpio.js
# ./src/app/ui/...
# ./src/app/app.module.ts
# ./src/main.ts
# multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
I'm trying to use rpi-gpio (www.npmjs.com/package/rpi-gpio)(I installed all dependencies seperatly aswell).
Versions:
node: v9.3.0 (using nvm)
npm: 5.6.0
gcc: (Raspbian 6.3.0-18+rpi1) 6.3.0 20170516
Package.json:
{
"name": "pagode-shotterkas",
"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.2",
"#angular/cdk": "^5.0.2",
"#angular/common": "^5.1.2",
"#angular/compiler": "^5.1.2",
"#angular/core": "^5.1.2",
"#angular/forms": "^5.1.2",
"#angular/http": "^5.1.2",
"#angular/material": "^5.0.2",
"#angular/platform-browser": "^5.1.2",
"#angular/platform-browser-dynamic": "^5.1.2",
"#angular/router": "^5.1.2",
"angular4-drag-drop": "^1.1.2",
"bindings": "^1.3.0",
"cordova-plugin-eid": "^1.0.0",
"core-js": "^2.5.3",
"epoll": "^1.0.2",
"hammerjs": "^2.0.8",
"nan": "^2.8.0",
"promise-polyfill": "^6.1.0",
"rpi-gpio": "^0.9.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"#angular/cli": "^1.6.2",
"#angular/compiler-cli": "^5.1.2",
"#angular/language-service": "^5.1.2",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "^6.0.95",
"codelyzer": "~3.1.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.3.3",
"karma-jasmine": "^1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.3.2",
"typescript": "~2.5.0"
}
}

Angular 2 integrate with spring boot as single war

In my application working with angular js2 standalone. After integrating angular js2 build to spring boot web app files for deploy as single war. then getting error like this
I tried two senarioes
1) add npm intall and npm run build add as maven exucution goals.
2)Angularjs build manually by using commands that build out out copy to web app directry then build war.
These war put inito my local host then get these js missing problem.
I'm new in angular2
My working environment
Node : v8.1.2
npm -: v5.0.3
anular: 1.2
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.0",
"#angular/common": "^2.4.0",
"#angular/compiler": "^2.4.0",
"#angular/core": "^2.4.0",
"#angular/forms": "^2.4.0",
"#angular/http": "^2.4.0",
"#angular/platform-browser": "^2.4.0",
"#angular/platform-browser-dynamic": "^2.4.0",
"#angular/router": "^3.4.0",
"angular2-cookie": "^1.2.6",
"animate.css": "^3.5.2",
"arrive": "^2.3.1",
"bootstrap": "^3.3.5",
"bootstrap-notify": "^3.1.3",
"bootstrap-select": "^1.12.2",
"bootstrap-tagsinput": "^0.7.1",
"chartist": "^0.9.4",
"chartist-plugin-zoom": "^0.4.0",
"chartjs-plugin-zoom": "^0.5.0",
"core-js": "^2.4.1",
"datatables": "1.10.12",
"datatables.net-bs": "1.10.12",
"datatables.net-responsive": "^2.1.1",
"domready": "^1.0.8",
"eonasdan-bootstrap-datetimepicker": "4.17.47",
"fullcalendar": "^3.4.0",
"googleapis": "^19.0.0",
"jasny-bootstrap": "^3.1.3",
"jquery": "^1.12.4",
"lodash": "^4.17.4",
"ng2-cookies": "^1.0.12",
"ng2-datepicker": "^1.8.3",
"ng2-daterangepicker": "^2.0.7",
"nouislider": "^9.2.0",
"pretty-error": "^2.1.1",
"rxjs": "^5.1.0",
"twitter-bootstrap-wizard": "^1.2.0",
"validate": "^3.0.1",
"web-animations-js": "^2.2.2",
"zone.js": "^0.7.6"
},
"devDependencies": {
"#angular/cli": "1.1.3",
"#angular/compiler-cli": "^2.4.0",
"#types/bootstrap": "^3.3.32",
"#types/chartist": "^0.9.34",
"#types/jasmine": "2.5.38",
"#types/jquery": "^1.10.33",
"#types/node": "^6.0.73",
"codelyzer": "~2.0.0",
"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.0.0",
"webpack": "^3.0.0"
},
"description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.2.",
"bugs": {
"url": "https://github.com/creativetimofficial/material-dashboard-pro-angular/issues"
},
"homepage": "https://github.com/creativetimofficial/material-dashboard-pro-angular#readme",
"main": "karma.conf.js",
"keywords": [],
"author": ""
}
Make sure the angular build successfully with same target which application you wish to embed. Suppose your spring boot application will be running in
localhost:8080
the angular target should be same. Other wise it will be fail when you integrate with Spring.

npm install showing up to date instead of installing the packages

I am having some trouble with npm install.
npm install package-name is working perfectly, but when I add a new dependency in the package.json file manually (by pulling via git) and then try to npm install only, it returns
up to date in 4.2 sec
And doesn't install the package.
FYI: I am using git to pull the package.json file. So there is no any issue in the package name. It just doesn't work when i pull and try to install it with npm install only.
My package.json is:
{
"name": "ap",
"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/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/platform-server": "^4.1.3",
"#angular/router": "^4.0.0",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26",
"#ngx-translate/core": "^6.0.1",
"#ngx-translate/http-loader": "0.0.3",
"#types/underscore": "^1.8.0",
"angular-datatables": "^4.1.0",
"angular2-busy": "^2.0.4",
"angular2-jwt": "^0.2.3",
"angular2-toaster": "^4.0.0",
"chart.js": "^2.6.0",
"core-js": "^2.4.1",
"datatables.net": "^1.10.15",
"datatables.net-dt": "^1.10.15",
"jquery": "^3.2.1",
"ng2-charts": "^1.5.0",
"ng2-simple-timer": "^1.3.1",
"rxjs": "^5.1.0",
"underscore": "^1.8.3",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/animations": "^4.1.3",
"#angular/cli": "1.0.4",
"#angular/compiler-cli": "^4.0.0",
"#types/datatables.net": "^1.10.1",
"#types/jasmine": "2.5.38",
"#types/jquery": "^2.0.45",
"#types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.1.1",
"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"
}
}
As #j7an said, the problem must depend on the environment. I had the same problem and I didn't know how my NODE_ENV was set to production. Anyway, I did this: (as explained in this answer )
Remove package-lock.json
Remove node_modules
After that:
npm install
npm install --only=dev
This must solve the problem.
I experienced this issue when I ran export NODE_ENV=production based on the book "Modern JavaScript". After deleting node_modules, package.json, and also clearing npm cache didn't fix the issue, I found the answer from this stackoverflow entry: npm install won't install devDependencies
To fix the issue, I ran export NODE_ENV= which removed the production flag. Once I did that I was able to install dev dependencies again. Hope this helps.

Resources