Cannot find name 'process' angular 5 - node.js

After seeing all the answers, nothing helped me...
baseUrl.interceptor.ts
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
let baseurl = process.env.baseurl || 'http://test.com/users';
console.log(baseurl);
return next.handle(req);
}
tsconfig.json
"typeRoots": [
"node_modules/#types"
]
package.json
"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",
},
"devDependencies": {
"#angular/cli": "1.6.4",
"#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",
...
"ts-node": "~3.2.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
And an error below:
Please, help me somebody...

process is a variable that gives you access to your server.
In no case you are supposed to use it in your Angular application : it's made to be used on your Node server.
If you do that, this means that anyone who is running your application can see your environment variables. That includes, for instance, your API keys.

I'm setting up my environment within Angular with a dotenv file, I don't know if this is the same situation you have. That's where I'm requesting my env vars.
I set up the environment files dinamically with a node script before compilation time with fs.writeFile. There I can get the process.env and thanks to the 'dotenv' npm package also.

Related

npm start stop with exit status 3 : Failed to exec start script [Angular]

I'm new on Angular and I have to work on a project in this technology.I set up the project but when I run the npm start command, the process npm start stop suddenly : the ng serve fails. I tried to investigate but I found nothing that can fix my problem.
You can see the errors here : errors
npm version : 6.14.11
node version : v14.15.5
Dependencies in the package.json file :
"dependencies": {
"#angular/animations": "^11.0.3",
"#angular/cdk": "^11.0.1",
"#angular/common": "~11.0.3",
"#angular/compiler": "~11.0.3",
"#angular/core": "~11.0.3",
"#angular/flex-layout": "^11.0.0-beta.33",
"#angular/forms": "~11.0.3",
"#angular/material": "^11.0.1",
"#angular/platform-browser": "~11.0.3",
"#angular/platform-browser-dynamic": "~11.0.3",
"#angular/platform-server": "~11.0.3",
"#angular/router": "~11.0.3",
"#angular/service-worker": "^11.0.3",
"#ngx-prism/core": "^2.0.1",
"#syncfusion/ej2-angular-richtexteditor": "^18.3.52",
"#types/prismjs": "^1.16.2",
"#types/socket.io-client": "^1.4.34",
"angular-http-server": "^1.9.0",
"app-root-path": "^3.0.0",
"chart.js": "^2.9.4",
"compodoc": "0.0.41",
"core-js": "^3.8.0",
"dotenv": "^8.2.0",
"http-server": "^0.12.3",
"http-status": "^1.5.0",
"jquery": "^3.5.1",
"ngx-captcha": "^8.0.1",
"ngx-countdown": "^11.0.0",
"ngx-countdown-timer": "^0.2.0",
"ngx-drag-drop": "^2.0.0",
"ngx-json-viewer": "^2.4.0",
"ngx-mat-select-search": "^3.1.4",
"ngx-pipes": "^2.7.5",
"ngx-socket-io": "^3.2.0",
"prismjs": "^1.22.0",
"rxjs": "^6.6.3",
"rxjs-compat": "^6.6.3",
"socket.io-client": "^3.0.3",
"xls": "^0.5.1",
"xlsx": "^0.16.9",
"zone.js": "^0.11.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.1100.3",
"#angular/compiler-cli": "^11.0.3",
"#compodoc/compodoc": "^1.1.11",
"#types/chart.js": "^2.9.28",
"#types/jasmine": "3.6.2",
"#types/node": "^14.14.10",
"#types/source-map": "^0.5.7",
"#types/webpack": "^4.41.25",
"typescript": "~4.0.0"
}
Do you have an idea ?
I tried to run :
npm cache clean --force
npm install
npm start
But that don't help me.

Error when building Angular project Error: EINVAL: invalid argument, mkdir

When trying to build my (old) Angular project, I meeting this error message
Error: EINVAL: invalid argument, mkdir 'C:\Users\me\Documents\project\dist\C:\Users\me\Documents\project\node_modules\md2\select'
The command line I am using is the following one
ng build --prod --output-path=dist --env=env --sourcemap
My npm version is 8.5.4 and node is 12.18.4
I am on Windows 10
This is my dependencies (Old angular project)
"dependencies": {
"#angular/animations": "^4.3.6",
"#angular/cdk": "2.0.0-beta.11",
"#angular/common": "^5.0.0",
"#angular/compiler": "5.2.11",
"#angular/core": "^5.0.0",
"#angular/forms": "^5.0.0",
"#angular/http": "^5.0.0",
"#angular/material": "2.0.0-beta.11",
"#angular/platform-browser": "^5.0.0",
"#angular/platform-browser-dynamic": "^5.0.0",
"#angular/router": "^5.0.0",
"#ngrx/store": "^4.0.3",
"#swimlane/ngx-datatable": "11.1.5",
"angulartics2": "3.3.0",
"chart.js": "^2.9.3",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"cyrillic-to-latin": "^2.0.0",
"electron": "^1.8.8",
"file-saver": "^1.3.3",
"hammerjs": "^2.0.8",
"jquery": "^3.4.1",
"lodash": "^4.17.21",
"md2": "0.0.29",
"moment": "^2.24.0",
"ng-spin-kit": "^5.1.1",
"ng2-charts": "^1.6.0",
"ng2-img-cropper": "^0.9.0",
"outdated-browser-rework": "^2.1.3",
"rxjs": "^5.4.2",
"tinymce": "^4.6.7",
"xlsx": "^0.17.1",
"zone.js": "^0.8.14"},
Am I missing something ? I have tried to play with npmrc file, but no success.
Use WIN+R to open a small window of operation, and then enter '.' (dot) And click OK, so that you enter the system user directory of your C drive;
After entering the system user directory, you can find the file .npmrc This file, after opening this file, you can see the
now change whatever the prefix=xxxx value is. with the given image. And now try again.
This solved my problem. or lookup this link: https://www.programmersought.com/article/91716179653/

Angular 10 Warning: Entry point 'devextreme-angular..' contains deep import into module

I'm trying to build my angular app but I'm receiving this kind of warnings:
Warning: Entry point 'devextreme-angular/ui/data-grid' contains deep imports into '{path to node modules}/node_modules/devextreme/ui/data_grid', '{path to node modules}/node_modules/devextreme/bundles/dx.all', '{path to node modules}/node_modules/devextreme/ui/filter_builder', '{path to node modules}/node_modules/devextreme/ui/form', '{path to node modules}/node_modules/devextreme/ui/popup'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Then I have this error:
Generating ES5 bundles for differential loading...
An unhandled exception occurred: Call retries were exceeded
These are my node and angular versions:
Angular CLI: 10.2.1
Node: 12.18.3
OS: win32 x64
Angular: 10.2.4
In the produced log file I have:
[error] Error: Call retries were exceeded
at ChildProcessWorker.initialize ({path to node modules}\node_modules\jest-worker\build\workers\ChildProcessWorker.js:193:21)
at ChildProcessWorker._onExit ({path to node modules}\node_modules\jest-worker\build\workers\ChildProcessWorker.js:274:12)
at ChildProcess.emit (events.js:315:20)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
This is the package.json file:
"dependencies": {
"#angular/animations": "^10.2.3",
"#angular/cdk": "^10.2.7",
"#angular/common": "^10.2.3",
"#angular/compiler": "^10.2.3",
"#angular/core": "^10.2.3",
"#angular/forms": "^10.2.3",
"#angular/material": "^10.2.7",
"#angular/material-moment-adapter": "^10.2.7",
"#angular/platform-browser": "^10.2.3",
"#angular/platform-browser-dynamic": "^10.2.3",
"#angular/platform-server": "^10.2.3",
"#angular/pwa": "^0.7.1",
"#angular/router": "^10.2.3",
"#angular/service-worker": "^10.2.3",
"#ngx-translate/core": "^11.0.1",
"#ngx-translate/http-loader": "^4.0.0",
"#syncfusion/ej2-angular-richtexteditor": "^18.3.52",
"#tinymce/tinymce-angular": "^4.1.0",
"ajv": "^6.9.1",
"angular-oauth2-oidc": "^10.0.0",
"cdk-table-exporter": "^9.0.2",
"chalk": "^3.0.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.4",
"devexpress-diagram": "^1.0.17",
"devexpress-gantt": "^1.0.10",
"devextreme": "^20.2.3",
"devextreme-angular": "20.2.3",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"mat-table-exporter": "^9.0.2",
"moment": "^2.24.0",
"node": "^12.18.3",
"node-sass": "^4.9.2",
"popper.js": "^1.14.7",
"rxjs": "^6.5.5",
"rxjs-compat": "^6.0.0",
"tslib": "^1.10.0",
"web-animations-js": "^2.3.1",
"zone.js": "^0.10.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.1002.0",
"#angular-devkit/core": "^10.2.0",
"#angular-devkit/schematics": "^10.2.0",
"#angular/cli": "^10.2.0",
"#angular/compiler-cli": "^10.2.3",
"#angular/language-service": "^10.2.3",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~6.0.1",
"devextreme-cli": "1.2.4",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"json-server": "^0.12.1",
"karma": "~3.1.1",
"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",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "^3.9.6"
}
The build works fine on another machine with the same file. I can only think of something wrong in my node and angular/cli versions. I've already deleted node_modules folder and npm cache clean -f

Auto-downgrading all dependencies in Node

Bit of a noobish question here, I'm currently working on a project in angular. But I was wondering if it were possible to downgrade all the dependencies in that project so they're all compatible with each other. I'm currently using Angular Core 5.2.0 but it would appear that there is no version of 'ngx-signalr-hubservice' that is compatible with that angular version, it needs angular core 4.3.2... Here's what's in my packages.json:
"dependencies": {
"#angular/animations": "^5.2.0",
"#angular/cdk": "^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/material": "^5.2.0",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"angular-confirm": "^2.0.0-alpha.2",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"ng-drag-drop": "^4.0.1",
"ng2-signalr": "^5.0.0",
"rxjs": "^5.5.6",
"signalr": "^2.2.3",
"zone.js": "^0.8.19"
},
"devDependencies": {
"#angular/cli": "~6.0.8",
"#angular/compiler-cli": "^5.2.0",
"#angular/language-service": "^5.2.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-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ngx-signalr-hubservice": "^2.0.7", <- This one is incompatible
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3",
"#angular-devkit/build-angular": "~0.6.8"
}
So... What's the best way to approach this? Also, this is my very first StackOverflow post, have mercy on me please ;)
There are lots of tools and helpful options for moving forward versions ... I don't know of any way to easily move backward.
You can do: npm install #angular/core#4.3.2
But you'd have to know exactly which version of each library you'd need.
You could try to install the older version of the Angular CLI and use it to generate a package.json file for you. Then you would know the right set of libraries you'd need to install.
I think that it was 'npm install -g #angular/cli#1.2.4` that was compatible with Angular 4.x.

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.

Resources