Data path ".builders['app-shell']" should have required property 'class'. 2020 Update - node.js

Have tried every single option in StackOverflow forums and others, no luck.
Tried and Didn't work
npm uninstall #angular-devkit/build-angular
npm cache clean -f
npm install #angular-devkit/build-angular
Deleted the node_modules folder and ran npm install, did not work
Have tried to uninstall and install #angular-cli
Most answers are from last year or with a much older version of angular that I am using. Please advise
While trying to deploy using build --prod these are the errors I am getting
Schema validation failed with the following errors:
2020-10-13 05:17:31 pm 0 ms output Data path ".builders['app-shell']" should have required property 'class'.
2020-10-13 05:17:31 pm 2 ms output Error: Schema validation failed with the following errors:
2020-10-13 05:17:31 pm 0 ms output Data path ".builders['app-shell']" should have required property 'class'.
2020-10-13 05:17:31 pm 1 ms output at MergeMapSubscriber._registry.compile.pipe.operators_1.concatMap.validatorResult [as project] (/usr/local/lib/node_modules/#angular/cli/node_modules/#angular-devkit/core/src/workspace/workspace.js:215:42)
2020-10-13 05:17:31 pm 0 ms output at MergeMapSubscriber._tryNext (/usr/local/lib/node_modules/#angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:69:27)
2020-10-13 05:17:31 pm 0 ms output at MergeMapSubscriber._next (/usr/local/lib/node_modules/#angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:59:18)
2020-10-13 05:17:31 pm 1 ms output at MergeMapSubscriber.Subscriber.next (/usr/local/lib/node_modules/#angular/cli/node_modules/rxjs/internal/Subscriber.js:67:18)
2020-10-13 05:17:31 pm 0 ms output at MergeMapSubscriber.notifyNext (/usr/local/lib/node_modules/#angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:92:26)
2020-10-13 05:17:31 pm 0 ms output at InnerSubscriber._next (/usr/local/lib/node_modules/#angular/cli/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
2020-10-13 05:17:31 pm 1 ms output at InnerSubscriber.Subscriber.next (/usr/local/lib/node_modules/#angular/cli/node_modules/rxjs/internal/Subscriber.js:67:18)
2020-10-13 05:17:31 pm 0 ms output at MapSubscriber._next (/usr/local/lib/node_modules/#angular/cli/node_modules/rxjs/internal/operators/map.js:55:26)
2020-10-13 05:17:31 pm 0 ms output at MapSubscriber.Subscriber.next (/usr/local/lib/node_modules/#angular/cli/node_modules/rxjs/internal/Subscriber.js:67:18)
2020-10-13 05:17:31 pm 1 ms output at SwitchMapSubscriber.notifyNext (/usr/local/lib/node_modules/#angular/cli/node_modules/rxjs/internal/operators/switchMap.js:86:26)
2020-10-13 05:17:31 pm 0 ms output at Inner Subscriber. Next (/usr/local/lib/node_modules/#angular/cli/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
2020-10-13 05:17:31 pm 0 ms output at InnerSubscriber.Subscriber.next (/usr/local/lib/node_modules/#angular/cli/node_modules/rxjs/internal/Subscriber.js:67:18)
2020-10-13 05:17:31 pm 1 ms output at /usr/local/lib/node_modules/#angular/cli/node_modules/rxjs/internal/util/subscribeTo.js:17:28
2020-10-13 05:17:31 pm 0 ms output at Object.subscribeToResult (/usr/local/lib/node_modules/#angular/cli/node_modules/rxjs/internal/util/subscribeToResult.js:10:45)
2020-10-13 05:17:31 pm 1 ms output at SwitchMapSubscriber. Inner Sub (/usr/local/lib/node_modules/#angular/cli/node_modules/rxjs/internal/operators/switchMap.js:65:54)
2020-10-13 05:17:31 pm 0 ms output at SwitchMapSubscriber. Next (/usr/local/lib/node_modules/#angular/cli/node_modules/rxjs/internal/operators/switchMap.js:55:14)
2020-10-13 05:17:31 pm 1 ms output Post-launch commands failed, but the current application symlink was updated.
2020-10-13 05:17:31 pm 0 ms output logout
2020-10-13 05:17:31 pm 1 ms failure Last exit code: 1
Deployment has failed.
Here is my package file
{
"name": "sts-skin-angular",
"version": "0.0.0",
"scripts": {
"ng-high-memory-serve": "node --max_old_space_size=8000 ./node_modules/#angular/cli/bin/ng serve --port",
"ng-high-memory-build": "node --max_old_space_size=8000 ./node_modules/#angular/cli/bin/ng build",
"ng-high-memory-build-prod": "node --max_old_space_size=8000 ./node_modules/#angular/cli/bin/ng build --prod",
"ng": "ng",
"start": "npm run ng-high-memory-serve",
"build": "npm run ng-high-memory-build --extract-css",
"build:prod": "npm run ng-high-memory-build-prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"dev:ssr": "ng run sts-skin-angular:serve-ssr",
"serve:ssr": "node dist/sts-skin-angular/server/main.js",
"build:ssr": "ng build --prod && ng run sts-skin-angular:server:production",
"prerender": "ng run sts-skin-angular:prerender"
},
"private": true,
"dependencies": {
"#agm/core": "^3.0.0-beta.0",
"#angular-devkit/build-angular": "^0.1001.6",
"#angular/animations": "~10.0.4",
"#angular/cli": "^10.0.5",
"#angular/common": "~10.0.4",
"#angular/compiler": "~10.0.4",
"#angular/compiler-cli": "~10.0.4",
"#angular/core": "~10.0.4",
"#angular/forms": "~10.0.4",
"#angular/platform-browser": "~10.0.4",
"#angular/platform-browser-dynamic": "~10.0.4",
"#angular/platform-server": "~10.0.4",
"#angular/router": "~10.0.4",
"#nguniversal/builders": "^10.1.0",
"#nguniversal/express-engine": "^10.0.1",
"#ngx-translate/core": "^13.0.0",
"#ngx-translate/http-loader": "^6.0.0",
"#trademe/ng-defer-load": "^8.2.1",
"#types/googlemaps": "^3.39.11",
"buttercms": "^1.2.3",
"express": "^4.15.2",
"ng-image-slider": "^2.6.4",
"ng6-toastr-notifications": "^1.0.4",
"ngx-bootstrap": "^5.6.1",
"ngx-cookie-service": "^10.0.1",
"ngx-order-pipe": "^2.0.4",
"ngx-pagination": "^5.0.0",
"rxjs": "~6.6.3",
"sweetalert": "^2.1.2",
"tslib": "^2.0.0",
"typescript": "~3.9.5",
"zone.js": "~0.10.3"
},
"devDependencies": {
"#types/express": "^4.17.0",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0"
}
}
UPDATE
<code>
Angular CLI: 10.0.5
Node: 13.7.0
OS: win32 x64
Angular: 10.0.7
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Ivy Workspace: <error>
Package Version
-----------------------------------------------------------
#angular-devkit/architect 0.1001.6
#angular-devkit/build-angular 0.1001.6
#angular-devkit/build-optimizer 0.1001.6
#angular-devkit/build-webpack 0.1001.6
#angular-devkit/core 10.1.6
#angular-devkit/schematics 10.0.5
#angular/cli 10.0.5
#ngtools/webpack 10.1.6
#nguniversal/builders 10.1.0
#nguniversal/common 10.0.1
#nguniversal/express-engine 10.0.1
#schematics/angular 10.0.5
#schematics/update 0.1000.5
rxjs 6.6.3
typescript 3.9.7
webpack 4.44.1
</code>
UPDATE AFTER SUGGESTED FIX
NEW VERSION AND PACKAGE FILE
<code>
Angular CLI: 10.0.4
Node: 13.7.0
OS: win32 x64
Angular: 10.0.7
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Ivy Workspace: <error>
Package Version
-----------------------------------------------------------
#angular-devkit/architect 0.1000.4
#angular-devkit/build-angular 0.1000.4
#angular-devkit/build-optimizer 0.1000.4
#angular-devkit/build-webpack 0.1000.4
#angular-devkit/core 10.0.4
#angular-devkit/schematics 10.0.4
#angular/cli 10.0.4
#ngtools/webpack 10.0.4
#nguniversal/builders 10.1.0
#nguniversal/common 10.1.0
#nguniversal/express-engine 10.1.0
#schematics/angular 10.0.4
#schematics/update 0.1000.4
rxjs 6.6.3
typescript 3.9.7
webpack 4.43.0
</code>
<code>
{
"name": "sts-skin-angular",
"version": "0.0.0",
"scripts": {
"ng-high-memory-serve": "node --max_old_space_size=8000 ./node_modules/#angular/cli/bin/ng serve --port",
"ng-high-memory-build": "node --max_old_space_size=8000 ./node_modules/#angular/cli/bin/ng build",
"ng-high-memory-build-prod": "node --max_old_space_size=8000 ./node_modules/#angular/cli/bin/ng build --prod",
"ng": "ng",
"start": "npm run ng-high-memory-serve",
"build": "npm run ng-high-memory-build --extract-css",
"build:prod": "npm run ng-high-memory-build-prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"dev:ssr": "ng run sts-skin-angular:serve-ssr",
"serve:ssr": "node dist/sts-skin-angular/server/main.js",
"build:ssr": "ng build --prod && ng run sts-skin-angular:server:production",
"prerender": "ng run sts-skin-angular:prerender"
},
"private": true,
"dependencies": {
"#agm/core": "^3.0.0-beta.0",
"#angular-devkit/architect": "^0.1000.4",
"#angular-devkit/build-angular": "~0.1000.4",
"#angular-devkit/core": "^10.0.4",
"#angular/animations": "~10.0.4",
"#angular/cli": "~10.0.4",
"#angular/common": "~10.0.4",
"#angular/compiler": "~10.0.4",
"#angular/compiler-cli": "~10.0.4",
"#angular/core": "~10.0.4",
"#angular/forms": "~10.0.4",
"#angular/platform-browser": "~10.0.4",
"#angular/platform-browser-dynamic": "~10.0.4",
"#angular/platform-server": "~10.0.4",
"#angular/router": "~10.0.4",
"#nguniversal/builders": "^10.1.0",
"#nguniversal/express-engine": "^10.0.4",
"#ngx-translate/core": "^13.0.0",
"#ngx-translate/http-loader": "^6.0.0",
"#trademe/ng-defer-load": "^8.2.1",
"#types/googlemaps": "^3.39.11",
"buttercms": "^1.2.3",
"express": "^4.15.2",
"ng-image-slider": "^2.6.4",
"ng6-toastr-notifications": "^1.0.4",
"ngx-bootstrap": "^5.6.1",
"ngx-cookie-service": "^10.0.1",
"ngx-order-pipe": "^2.0.4",
"ngx-pagination": "^5.0.0",
"rxjs": "~6.6.3",
"sweetalert": "^2.1.2",
"tslib": "^2.0.0",
"typescript": "~3.9.5",
"zone.js": "~0.10.3"
},
"devDependencies": {
"#types/express": "^4.17.0",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0"
}
}
</code>

Your #angular/cli and #angular-devkit/build-angular versions don't align.
Make sure they align. It's generally safe if they reflect the version of the rest of your #angular packages (10.0.4). So update them to:
"#angular-devkit/build-angular": "~0.1000.4",
"#angular/cli": "~10.0.4",
Then delete your node_modules folder and rename your lock file.
npm: package-lock.json -> package-lock.json.old
yarn: yarn.lock -> yarn.lock.old
Run npm install or yarn install and build your app.
If everything is ok you can remove the old lock file package-lock.json.old or yarn.lock.old.
You should generally update Angular only with ng update as this might run important migrations.

Related

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.

Can't resolve rxjs/*** on angular 5 project

I can't run my angular app on amazon ec2. When I execute ng serve or ng serve -c stage with environment.stage.ts configuration, i'm getting errors as shown on the screenshot below. The error does not appear when run locally on my pc and project is compiled without errors.
The version of rxjs is 5.5.5.
Angular, angular-cli and node version also below.
ERROR in ./node_modules/#angular/router/esm5/router.js
Module not found: Error: Can't resolve 'rxjs/BehaviorSubject' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#angular/router/esm5'
ERROR in ./node_modules/#agm/core/services/google-maps-api-wrapper.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#agm/core/services'
ERROR in ./node_modules/#agm/core/services/managers/data-layer-manager.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#agm/core/services/managers'
ERROR in ./node_modules/#agm/core/services/managers/marker-manager.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#agm/core/services/managers'
ERROR in ./node_modules/#agm/core/services/managers/info-window-manager.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#agm/core/services/managers'
ERROR in ./node_modules/#agm/core/services/managers/polyline-manager.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#agm/core/services/managers'
ERROR in ./node_modules/#agm/core/services/managers/circle-manager.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#agm/core/services/managers'
ERROR in ./node_modules/#agm/core/services/managers/kml-layer-manager.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#agm/core/services/managers'
ERROR in ./node_modules/#agm/core/services/managers/polygon-manager.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#agm/core/services/managers'
ERROR in ./node_modules/#angular/core/esm5/core.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#angular/core/esm5'
ERROR in ./node_modules/#angular/http/esm5/http.js
Module not found: Error: Can't resolve 'rxjs/Observable' in '/home/ubuntu/b2s_dev/b2s_v2_web/node_modules/#angular/http/esm5'
ℹ 「wdm」: Failed to compile.
BR,
try to import rxjs only without observables
{
"scripts": {
"ng": "ng",
"start": "ng serve",
"start-stage": "ng serve --env=stage",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:universal:prod": "ng build --prod && ng build --prod --app 1 --output-hashing=false && cpy ./server.js ./dist",
"serve:universal:prod": "npm run build:universal:prod && cd dist && node server",
"compile_#agm_core": "babel node_modules/#agm/core -d node_modules/#agm/core --presets es2015",
"postinstall": "npm run compile_#agm_core"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.2",
"#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/platform-server": "^5.2.7",
"#angular/router": "^5.0.0",
"#nguniversal/express-engine": "^5.0.0-beta.6",
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"core-js": "^2.4.1",
"moment": "^2.20.1",
"ng2-nouislider": "^1.7.7",
"ngx-disqus": "^2.3.7",
"nouislider": "^10.1.0",
"rxjs": "^5.5.5",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.7.3",
"#angular/cli": "^6.1.3",
"#angular/compiler-cli": "^5.0.0",
"#angular/language-service": "^5.0.0",
"#types/googlemaps": "^3.30.4",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"cpy-cli": "^1.0.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.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
}
}
Use this command to install rxjs compact that will install the latest version of rxjs that is compatible with the Angular version that you are using.
npm install --save rxjs-compat

error TS2305: Module "/node_modules/rxjs/Rx" has no exported member 'Subscribable'

I have a project that is built in angular 5. here is the package.json
{
"name": "ff-client",
"version": "0.2.0",
"license": "",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint --type-check",
"e2e": "ng e2e",
"xprecommit": "ng lint --type-check && ng test --single-run --code-coverage",
"xprepush": "ng build --prod",
"i18n": "ng xi18n --i18n-format xlf --output-path src/locale --locale en --progress",
"i18n-merge": "xliffmerge --profile xliffmerge.json",
"browserstack": "ng e2e --no-serve --config protractor.browserstack.conf.js",
"upgrade": "yarn upgrade-interactive --latest",
"build-en": "ng build --prod --e deploy --output-path=dist/en --i18nFile=src/locale/messages.en.xlf --i18nFormat=xlf --locale=en --base-href /en/",
"build-da": "ng build --prod --e deploy --output-path=dist/da --i18nFile=src/locale/messages.da.xlf --i18nFormat=xlf --locale=da --base-href /da/",
"build-fo": "ng build --prod --e deploy --output-path=dist/fo --i18nFile=src/locale/messages.fo.xlf --i18nFormat=xlf --locale=fo --base-href /fo/",
"build-root": "copy dist\\en\\web.config dist\\ && del dist\\en\\web.config && del dist\\da\\web.config && del dist\\fo\\web.config",
"build-prod": "npm run build-en && npm run build-da && npm run build-fo && npm run build-root"
},
"private": true,
"dependencies": {
"#angular/animations": "5.2.9",
"#angular/cdk": "^5.2.4",
"#angular/common": "5.2.9",
"#angular/compiler": "5.2.9",
"#angular/core": "5.2.9",
"#angular/flex-layout": "^5.0.0-beta.14",
"#angular/forms": "5.2.9",
"#angular/http": "5.2.9",
"#angular/material": "^5.2.4",
"#angular/platform-browser": "5.2.9",
"#angular/platform-browser-dynamic": "5.2.9",
"#angular/router": "5.2.9",
"#angular/service-worker": "5.2.9",
"#aspnet/signalr": "^1.0.0-rc1-update1",
"#auth0/angular-jwt": "^1.0.0-beta.9",
"#ngrx/effects": "^5.1.0",
"#ngrx/router-store": "^5.0.1",
"#ngrx/store": "^5.1.0",
"#ngrx/store-devtools": "^5.1.0",
"angular-in-memory-web-api": "^0.5.2",
"applicationinsights-js": "^1.0.15",
"core-js": "^2.5.3",
"hammerjs": "^2.0.8",
"moment": "^2.20.1",
"ng-recaptcha": "^3.0.3",
"ng2-file-upload": "^1.3.0",
"ngrx-store-logger": "^0.2.0",
"ngx-perfect-scrollbar": "^5.3.5",
"redux-beacon": "^1.2.1",
"rxjs": "^5.5.8",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "1.7.4",
"#angular/compiler-cli": "5.2.9",
"#angular/language-service": "5.2.9",
"#types/jasmine": "~2.8.6",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~9.4.6",
"chai": "^4.1.2",
"codelyzer": "~4.1.0",
"cucumber": "^4.0.0",
"husky": "^0.14.3",
"jasmine-core": "~2.99.1",
"jasmine-marbles": "^0.2.0",
"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.4.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-teamcity-reporter": "^1.0.1",
"ngx-i18nsupport": "^0.12.0",
"protractor": "^5.3.0",
"protractor-cucumber-framework": "^4.2.0",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "2.6.2"
}
}
I have download npm and angular-cli.
after installing these, I did npm install to get the required modules. but when I do "ng serve" it shows an error.
ERROR in
node_modules/#angular/flex-layout/core/typings/observable-media/observa
ble-media.d.ts(1,22): error TS2305: Module
'"D:/Projects/FlexFunding/app-dk/Clie
nt/node_modules/rxjs/Rx"' has no exported member 'Subscribable'.
I know now it is angular 6 and rxjs has updated in this version. but how can I solve this issue without migrating this project from angular version 5 to 6. I just need to build and run the project.
i have tried replace rxjs folder under node modules from a running a project. but no luck.
Edit: I have uninstall current version and downgraded to version angular cli version 1.7.4 but the error is same.
ERROR in
node_modules/#angular/flex-layout/core/typings/observable-media/observa
ble-media.d.ts(1,22): error TS2305: Module
'"D:/Projects/FlexFunding/app-dk/Clie nt/node_modules/rxjs/Rx"' has no
exported member 'Subscribable'.
in package.json one of the dependency is
"#angular/flex-layout": "^5.0.0-beta.14"
for ^ of "^5.0.0-beta.14", npm installs the latest version of flex-layout and in the latest version felx-layout uses RxJS 6. But as the project is an Angular 5 project, it uses previous version of RxJs. So, flex-layout failed to import the required libraries because RxJs 6 is not there.
so, the solution that worked for me is to change package.json
"#angular/flex-layout": "5.0.0-beta.14"
then npm install
Try reinstall your application
npm i
If this doesn't work, try delete node_modules folder and reinstall.

npm production build issue (npm version build -Pprod)

Versions
c:\dev\sam>npm -v
5.5.1
c:\dev\sam>node -v
v8.9.2
c:\dev\sam>
Issue
c:\dev\sam> mvnw -Pprod -DskipTests package
[INFO] Scanning for projects...
[INFO]
[INFO] ------------------------------------------------------------------------
[INFO] Building SAM 0.0.1-SNAPSHOT
[INFO] ------------------------------------------------------------------------
...
[INFO] --- frontend-maven-plugin:1.4:install-node-and-npm (install node and npm) # sam ---
[INFO] Node v6.11.0 is already installed.
[INFO] NPM 5.0.3 is already installed.
...
INFO] ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./src/main/webapp/content/scss/global.scss
[INFO] Module build failed: Error: Missing binding c:\dev\sam\node_modules\node-sass\vendor\win32-x64-48\binding.node
[INFO] Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 6.x
[INFO]
[INFO] Found bindings for the following environments:
[INFO] - Windows 64-bit with Node.js 8.x
[INFO]
[INFO] This usually happens because your environment has changed since running `npm install`.
[INFO] Run `npm rebuild node-sass` to download the binding for your current environment.
...
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 20.684 s
[INFO] Finished at: 2018-07-12T06:56:14+01:00
[INFO] Final Memory: 35M/501M
[INFO] ------------------------------------------------------------------------
package.json
c:\dev\sam>more package.json
{
"name": "sam",
"version": "0.0.0",
"description": "Description for SAM",
"private": true,
"cacheDirectories": [
"node_modules"
],
"dependencies": {
"#angular/animations": "5.2.10",
"#angular/cdk": "5.2.5",
"#angular/common": "5.2.0",
"#angular/compiler": "5.2.0",
"#angular/core": "5.2.0",
"#angular/forms": "5.2.0",
"#angular/http": "5.2.0",
"#angular/material": "5.2.5",
"#angular/platform-browser": "5.2.0",
"#angular/platform-browser-dynamic": "5.2.0",
"#angular/router": "5.2.0",
"#ng-bootstrap/ng-bootstrap": "1.0.0",
"angular-calendar": "^0.25.1",
"angular-highcharts": "6.0.0",
"bootstrap": "4.0.0",
"core-js": "2.4.1",
"font-awesome": "4.7.0",
"highcharts": "6.1.0",
"jquery": "3.2.1",
"lodash": "4.17.5",
"ng-jhipster": "0.4.0",
"ng2-nouislider": "1.7.7",
"ng2-pdf-viewer": "4.1.2",
"ngx-cookie": "2.0.1",
"ngx-infinite-scroll": "0.5.1",
"ngx-stripe": "0.8.2",
"ngx-webstorage": "2.0.1",
"nouislider": "11.1.0",
"reflect-metadata": "0.1.10",
"rxjs": "5.5.6",
"sockjs-client": "1.1.4",
"swagger-ui": "2.2.10",
"tether": "1.4.0",
"webstomp-client": "1.0.6",
"zone.js": "0.8.19",
"popper.js": "^1.12.9"
},
"devDependencies": {
"#angular/cli": "1.6.6",
"#angular/compiler-cli": "5.2.0",
"#ngtools/webpack": "1.8.5",
"#types/highcharts": "5.0.22",
"#types/jasmine": "2.5.53",
"#types/lodash": "4.14.107",
"#types/node": "8.0.18",
"angular2-template-loader": "0.6.2",
"awesome-typescript-loader": "3.2.2",
"browser-sync": "2.18.13",
"browser-sync-webpack-plugin": "1.2.0",
"codelyzer": "4.0.1",
"copy-webpack-plugin": "4.2.3",
"css-loader": "0.28.4",
"exports-loader": "0.6.4",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"generator-jhipster": "4.14.3",
"html-loader": "0.5.0",
"html-webpack-plugin": "2.30.1",
"jasmine-core": "2.7.0",
"karma": "1.7.1",
"karma-chrome-launcher": "2.2.0",
"karma-coverage": "1.1.1",
"karma-intl-shim": "1.0.3",
"karma-jasmine": "1.1.0",
"karma-junit-reporter": "1.2.0",
"karma-notify-reporter": "1.0.1",
"karma-phantomjs-launcher": "1.0.4",
"karma-remap-istanbul": "0.6.0",
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "2.0.4",
"node-sass": "^4.9.2",
"phantomjs-prebuilt": "2.1.16",
"postcss-loader": "2.0.9",
"proxy-middleware": "0.15.0",
"rimraf": "2.6.1",
"sass-loader": "6.0.6",
"source-map": "0.6.1",
"sourcemap-istanbul-instrumenter-loader": "0.2.0",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"tslint": "5.5.0",
"tslint-loader": "3.5.3",
"typescript": "2.6.2",
"uglifyjs-webpack-plugin": "1.1.5",
"web-app-manifest-loader": "0.1.1",
"webpack": "3.10.0",
"webpack-dev-server": "2.9.5",
"webpack-merge": "4.1.1",
"webpack-notifier": "1.5.1",
"webpack-visualizer-plugin": "0.1.11",
"workbox-webpack-plugin": "3.0.0-beta.1",
"write-file-webpack-plugin": "4.1.0",
"xml2js": "0.4.17"
},
"engines": {
"node": ">=6.9.0"
},
"resolutions": {
"source-map": "0.6.1"
},
"scripts": {
"lint": "tslint --project tsconfig.json -e 'node_modules/**'",
"lint:fix": "npm run lint -- --fix",
"ngc": "ngc -p tsconfig-aot.json",
"cleanup": "rimraf target/{aot,www}",
"clean-www": "rimraf target//www/app/{src,target/}",
"start": "npm run webpack:dev",
"serve": "npm run start",
"build": "npm run webpack:prod",
"test": "npm run lint && karma start src/test/javascript/karma.conf.js",
"test:watch": "npm test -- --watch",
"webpack:dev": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --progress --inline --hot --profile --port=9060 --watch-content-base",
"webpack:build:main": "npm run webpack -- --config webpack/webpack.dev.js --progress --profile",
"webpack:build": "npm run cleanup && npm run webpack:build:main",
"webpack:prod:main": "npm run webpack -- --config webpack/webpack.prod.js --profile",
"webpack:prod": "npm run cleanup && npm run webpack:prod:main && npm run clean-www",
"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",
"postinstall": "node node_modules/phantomjs-prebuilt/install.js"
}
}
Question
I'm not sure why this is failing.
The dev build is working perfectly.
The prod build fails (it never worked).
For some reason npm is looking for a different version of nodejs (6) rather than the version I have installed (8), perhaps ?
I do have a binding file but not the one that the build is looking for.
I have cleaned down my node_modules and installed again but that hasn't solved the issue.
I have tried the npm rebuild node-sass but perhaps this is downloading the version that is there (8) rather than (6) ?
Should I "downgrade" to 6 ?
Or how do I upgrade the build ?
Any advise on how to resolve this and what the reason for the above is ?
And what the correct configuration should be ?
Note: this is a jhipster generated project (if that makes any difference).
Thanks a million for taking the time to explain this.
Kind regards,
Fergal.
Prod build does not use the version of node you installed on your PC, it installs one locally under node sub folder as specified in the pom.xml. So you could try to edit your pom.xml and use same version of node and npm as your PC.

NPM install results in 404 when installing angular deps

I have the latest node.js 8.x and npm 5.6.0 installed. When trying to do a npm install, I constantly get the following error:
npm ERR! code E404
npm ERR! 404 Not Found: #angular/router#5.2.0
The module that fails is different every time I retry the installation, but most typically it's #angular/forms#5.2.0, #angular/animations#5.2.0 and #angular/platform-browser#5.2.0
I do have a working internet connection
I have run npm config set registry https://registry.npmjs.org/.
I deleted the node_modules folder
I have deleted the cache: npm cache clean --force
An npm search does find the module:
C:\windows\system32>npm search #angular/router
NAME | DESCRIPTION | AUTHOR | DATE | VERSION | KEYWORDS
#angular/router | Angular -
the… | =angular | 2018-04-16 | 5.2.10 | angular router
What else can be wrong?
Here is the package.json for completeness:
{
"name": "App",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --env=scapp",
"build-local": "ng build --env=dev",
"build-nonevis": "ng build --env=nonevis",
"test": "ng test",
"lint": "ng lint",
"lint-fix": "ng lint --fix",
"e2e": "ng e2e"
},
"dependencies": {
"#angular/animations": "5.2.0",
"#angular/common": "^5.2.0",
"#angular/compiler": "^5.2.0",
"#angular/core": "^5.2.0",
"#angular/forms": "5.2.0",
"#angular/http": "5.2.0",
"#angular/platform-browser": "5.2.0",
"#angular/platform-browser-dynamic": "5.2.0",
"#angular/router": "5.2.0",
"#ngx-translate/core": "9.1.1",
"#ngx-translate/http-loader": "2.0.1",
"#types/arcgis-js-api": "^4.4.0",
"#types/node": "9.4.0",
"angular2-esri-loader": "^1.0.0",
"cerialize": "^0.1.18",
"chart.js": "2.7.1",
"core-js": "^2.5.1",
"esri-loader": "^1.1.0",
"fullcalendar": "3.7.0",
"intl": "^1.2.5",
"jquery": "3.2.1",
"moment": "2.18.1",
"nanoscroller": "0.8.7",
"ngx-perfect-scrollbar": "5.3.4",
"primeng": "5.2.0",
"quill": "1.1.8",
"rxjs": "5.5.2",
"web-animations-js": "2.3.1",
"zone.js": "0.8.18"
},
"devDependencies": {
"#angular/cli": "^1.6.5",
"#angular/compiler-cli": "^5.2.0",
"#types/jasmine": "2.5.53",
"#types/jasminewd2": "2.0.2",
"#types/node": "6.0.60",
"codelyzer": "4.0.1",
"jasmine-core": "2.6.4",
"jasmine-spec-reporter": "4.1.1",
"karma": "1.7.1",
"karma-chrome-launcher": "2.1.1",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"karma-coverage-istanbul-reporter": "1.3.0",
"protractor": "5.1.2",
"ts-node": "3.2.0",
"tslint": "5.7.0",
"typescript": "2.4.2"
}
}
The problem was caused by a local file .npmrc which contained the line always-auth = true. Removing this line resolved the issue. I have no idea how a 404 error is related to authentication, but noticed that after I switched to a mirror registry, it suddenly reported E401 instead of E404 like the official registry.
In my case, such issue was resolved by adding #latest to the command.
npm install -g #angular/cli#latest

Resources