How do I get environmment process.NODE_ENV=development in server.ts in angular 6 universal - variables

app.listen(PORT, () => {
console.log("process.env.NODE_ENV", process.env.NODE_ENV);
console.log(`Node server listening on http://localhost:${PORT}`);
});
i am getting process.env.NODE_ENV 'none' in console
command for build
npm run build:alpha:ssr NODE_ENV=alpha
my package.json file
{
"name": "mobilesite-ecommerce",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve -c local",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:ssr": "node dist/server",
"build:client-and-server-bundles": "ng build --prod --deploy-url=##scripturl## && ng run mobilesite-ecommerce:server:production",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors",
"build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender",
"generate:prerender": "cd dist && node prerender",
"serve:prerender": "cd dist/browser && http-server",
"build:local:ssr": "npm run build:local:client-and-server-bundles && npm run webpack:local:server",
"serve:local:ssr": "node dist/server",
"build:local:client-and-server-bundles": "ng build -c local && ng run mobilesite-ecommerce:server:local",
"webpack:local:server": "webpack --config webpack.server.config.js --progress --colors",
"build:development:ssr": "npm run build:development:client-and-server-bundles && npm run webpack:development:server",
"serve:development:ssr": "node dist/server",
"build:development:client-and-server-bundles": "ng build -c development && ng run mobilesite-ecommerce:server:development",
"webpack:development:server": "webpack --config webpack.server.config.js --progress --colors",
"build:alpha:ssr": "npm run build:alpha:client-and-server-bundles && npm run webpack:alpha:server",
"serve:alpha:ssr": "node dist/server",
"build:alpha:client-and-server-bundles": "ng build --prod -c alpha --deploy-url=##scripturl## && ng run mobilesite-ecommerce:server:alpha",
"webpack:alpha:server": "webpack --config webpack.server.config.js --progress --colors"
},
"private": true,
"dependencies": {
"#angular/animations": "^6.0.6",
"#angular/common": "6.0.6",
"#angular/compiler": "6.0.6",
"#angular/core": "6.0.6",
"#angular/forms": "6.0.6",
"#angular/http": "6.0.6",
"#angular/platform-browser": "6.0.6",
"#angular/platform-browser-dynamic": "6.0.6",
"#angular/platform-server": "^6.0.6",
"#angular/router": "6.0.6",
"#angular/service-worker": "6.0.6",
"#fortawesome/fontawesome-svg-core": "^1.2.0-11",
"#fortawesome/free-brands-svg-icons": "^5.1.0-11",
"#fortawesome/free-solid-svg-icons": "^5.1.0-11",
"#ng-bootstrap/ng-bootstrap": "^2.1.1",
"#nguniversal/common": "^6.0.0",
"#nguniversal/express-engine": "^6.0.0",
"#nguniversal/module-map-ngfactory-loader": "^6.0.0",
"#ngx-share/core": "^6.0.1",
"angular-6-social-login": "^1.1.1",
"bootstrap": "^4.1.1",
"compression": "^1.7.3",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"hiredis": "^0.5.0",
"localstorage-polyfill": "^1.0.1",
"mock-browser": "^0.92.14",
"ng-lazyload-image": "^4.0.0",
"ngx-swiper-wrapper": "^6.3.0",
"node-sass": "^4.7.2",
"redis": "^2.8.0",
"redis-server": "^1.2.2",
"rxjs": "^6.2.1",
"sourcebuster": "^1.1.0",
"ts-loader": "^4.4.1",
"webpack-cli": "^3.0.8",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.6.8",
"#angular/cli": "^6.0.8",
"#angular/compiler-cli": "6.0.6",
"#angular/language-service": "6.0.6",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"#types/youtube": "0.0.31",
"codelyzer": "^4.0.1",
"express": "^4.16.3",
"http-server": "^0.11.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.7.2"
}
}

There is a plugin for webpack that allows you to define environment variables.
I added this into my plugins in webpack.server.config.ts and it fixed the issue for me:
module.exports = {
...
plugins: [
new webpack.EnvironmentPlugin(['NODE_ENV'])
],
...
};
Documentation Reference:
https://webpack.js.org/plugins/environment-plugin/

webpack = require("webpack");
env = process.env.NODE_ENV || 'none';
module.exports = { plugins: [ new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify(env) }) ] };
NODE_ENV=alpha npm run build:alpha:ssr

you need to set environnement variables before the command:
NODE_ENV=alpha npm run build:alpha:ssr

Related

Vue Laravel mix Error vue.common.prod.js:11 TypeError: s is not a function

So I get the following Error whenever I compile for production:
But this only happens when compiling for prod, if I run: npm run dev. My app just runs like normal. The project is a ver old and there are not many dependencies I can update. I don't even know where to start debugging,
Here's the package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development NODE_OPTIONS=--max-old-space-size=8096 node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js ",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"ajv": "^6.0.0",
"axios": "^0.21.4",
"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.21.2",
"browser-sync": "^2.26.14",
"browser-sync-webpack-plugin": "^2.2.2",
"cross-env": "^5.2.1",
"imagemin": "^5.0.0",
"jquery": "^3.5.1",
"laravel-mix": "^2.0",
"lodash": "^4.17.21",
"popper.js": "^1.16.1",
"vanillatoasts": "^1.4.0",
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.12",
"vue2-transitions": "^0.3.0",
"vuex": "^3.6.2"
},
"dependencies": {
"#vue/composition-api": "^1.7.1",
"chart.js": "^2.9.4",
"chartjs-plugin-datalabels": "^1.0.0",
"clipboard-polyfill": "^3.0.1",
"modal-video": "^2.4.8",
"moment": "^2.27.0",
"natives": "^1.1.6",
"node-sass": "^5.0.0",
"randomcolor": "^0.6.2",
"signature_pad": "^3.0.0-beta.4",
"v-wave": "^1.2.8",
"vue-carousel": "^0.18.0",
"vue-chartjs": "^3.5.1",
"vue-disable-autocomplete": "0.0.4",
"vue-randomcolor": "^1.0.4",
"vue-recaptcha": "^2.0.3",
"vue-router": "^3.5.1",
"vue-search-select": "^2.9.5",
"vue-select": "^3.12.1",
"vue-slick-carousel": "^1.0.6",
"vuejs-datepicker": "^1.6.2"
}
}
Any help will be appreciated.

error Unexpected end of JSON input while parsing near '...","tarball":"https://'

I am getting
error Unexpected end of JSON input while parsing near
'...","tarball":"https://'
when I run npm install
Below is my package.json file:
{
"name": "gateway",
"version": "0.0.0",
"description": "Description for gateway",
"private": true,
"license": "UNLICENSED",
"cacheDirectories": [
"node_modules"
],
"dependencies": {
"#angular/common": "7.2.4",
"#angular/compiler": "7.2.4",
"#angular/core": "7.2.4",
"#angular/forms": "7.2.4",
"#angular/platform-browser": "7.2.4",
"#angular/platform-browser-dynamic": "7.2.4",
"#angular/router": "7.2.4",
"#fortawesome/angular-fontawesome": "0.3.0",
"#fortawesome/fontawesome-svg-core": "1.2.14",
"#fortawesome/free-solid-svg-icons": "5.7.1",
"#ng-bootstrap/ng-bootstrap": "4.0.2",
"#ngx-translate/core": "11.0.1",
"#ngx-translate/http-loader": "4.0.0",
"bootstrap": "4.2.1",
"core-js": "2.6.4",
"moment": "2.24.0",
"ng-jhipster": "0.9.1",
"ngx-cookie": "2.0.1",
"ngx-infinite-scroll": "7.0.1",
"ngx-webstorage": "2.0.1",
"rxjs": "6.4.0",
"swagger-ui": "2.2.10",
"tslib": "1.9.3",
"zone.js": "0.8.29"
},
"devDependencies": {
"#angular/cli": "7.3.1",
"#angular/compiler-cli": "7.2.4",
"#ngtools/webpack": "7.3.1",
"#types/jest": "24.0.0",
"#types/node": "10.12.24",
"angular-router-loader": "0.8.5",
"angular2-template-loader": "0.6.2",
"autoprefixer": "9.4.7",
"browser-sync": "2.26.3",
"browser-sync-webpack-plugin": "2.2.2",
"cache-loader": "2.0.1",
"codelyzer": "4.5.0",
"copy-webpack-plugin": "4.6.0",
"css-loader": "2.1.0",
"file-loader": "3.0.1",
"fork-ts-checker-webpack-plugin": "0.5.2",
"friendly-errors-webpack-plugin": "1.7.0",
"generator-jhipster": "5.8.2",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"husky": "1.3.1",
"jest": "24.1.0",
"jest-junit": "6.2.1",
"jest-preset-angular": "6.0.2",
"jest-sonar-reporter": "2.0.0",
"lint-staged": "8.1.3",
"merge-jsons-webpack-plugin": "1.0.18",
"mini-css-extract-plugin": "0.5.0",
"moment-locales-webpack-plugin": "1.0.7",
"optimize-css-assets-webpack-plugin": "5.0.1",
"prettier": "1.16.4",
"reflect-metadata": "0.1.13",
"rimraf": "2.6.3",
"simple-progress-webpack-plugin": "1.1.2",
"style-loader": "0.23.1",
"terser-webpack-plugin": "1.2.2",
"thread-loader": "2.1.2",
"to-string-loader": "1.1.5",
"ts-loader": "5.3.3",
"tslint": "5.12.1",
"tslint-config-prettier": "1.18.0",
"tslint-loader": "3.6.0",
"typescript": "3.2.4",
"postcss-loader": "3.0.0",
"xml2js": "0.4.19",
"webpack": "4.29.3",
"webpack-cli": "3.2.3",
"webpack-dev-server": "3.1.14",
"webpack-merge": "4.2.1",
"webpack-notifier": "1.7.0",
"webpack-visualizer-plugin": "0.1.11",
"workbox-webpack-plugin": "3.6.3",
"write-file-webpack-plugin": "4.5.0"
},
"engines": {
"node": ">=8.9.0"
},
"lint-staged": {
"{,src/**/}*.{md,json,ts,css,scss}": [
"prettier --write",
"git add"
]
},
"scripts": {
"prettier:format": "prettier --write \"{,src/**/}*.{md,json,ts,css,scss}\"",
"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",
"start-tls": "npm run webpack:dev -- --env.tls",
"serve": "npm run start",
"build": "npm run webpack:prod",
"test": "npm run lint && jest --coverage --logHeapUsage -w=2 --config src/test/javascript/jest.conf.js",
"test:watch": "npm run test -- --watch",
"webpack:dev": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --env.stats=minimal",
"webpack:dev-verbose": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --profile --progress --env.stats=normal",
"webpack:build:main": "npm run webpack -- --config webpack/webpack.dev.js --env.stats=minimal",
"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"
},
"jestSonar": {
"reportPath": "target/test-results/jest",
"reportFile": "TESTS-results-sonar.xml"
}
}
I have searched for solution and found out that running the below commands:
npm cache clean --force
npm cache verify
should solve the issue, but the issue still exits after running these commands and clearing cache.
My npm version is 6.4.1
and
node version is v10.15.3
This issue was solved by going to C:\Users\USERNAME\AppData\Roaming\npm-cache and deleting its contents manually and then later running cmd as Administrator and running npm install
NOTE: Running cmd as Administrator was to solve another error that occurred after deleting cache manually and running. The new issue was npm WARN tarball tarball data for typescript#3.2.4 seems to be corrupted. which would freeze the installation at this point. On searching the internet, found out that it might be due to lack of permission, as it was since it was solved after running as Administrator.

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".

Karma tests process is not autoterminating despite of a 'single' argument

I am creating a build definition on VSTS and I need the task to end in order to start next one.
When I execute
npm run test:single
the tests execute but then the process is not killed automatically and if I press ctrl + c I get an inquiry Terminate batch job (y/n) and even if I hit y then upon next ctrl + c I see
C:\GIT\data>[0] 12 06 2017 11:17:26.232:DEBUG [launcher]: Disconnecting all browsers
In pacakges.json test single is defined as:
"test:single": "npm run tsc && concurrently \"npm run karma-jasmine:autoclose\""
The version of Karma is:
"#types/jasmine": "2.5.47"
Question: How to make tests' process terminate when the karma finishes execution of my tests.
Part of package.json:
"scripts": {
"ci": "npm run lint && npm run format && npm run test:single && npm run test-node",
"format": "gulp format:enforce",
"karma-jasmine": "karma start karma-build-jasmine.conf.js",
"karma-jasmine:single": "karma start karma-build-jasmine.conf.js --single-run",
"karma-jasmine:autoclose": "npm run karma-jasmine:single",
"lint": "gulp lint",
"prepublish": "tsc && gulp build",
"tsc": "tsc",
"tsc:w": "tsc -w",
"test": "npm run tsc && concurrently \"npm run tsc:w\" \"npm run karma-jasmine\"",
"test:single": "npm run tsc && concurrently \"npm run karma-jasmine:autoclose\"",
"test-dist": "concurrently \"npm run tsc:w\" \"karma start karma-dist-jasmine.conf.js\"",
"test-node": "gulp test/node"
},
"repository": {
"type": "git",
"url": "git://github.com/xxx"
},
"bugs": {
"url": "https://github.com/xxx"
},
"dependencies": {},
"devDependencies": {
"#types/jasmine": "2.5.47",
"#types/node": "^7.0.18",
"#types/systemjs": "^0.20.2",
"clang-format": "1.0.51",
"concurrently": "^3.4.0",
"es6-promise": "^4.1.0",
"gulp": "^3.8.11",
"gulp-clang-format": "^1.0.23",
"gulp-rename": "^1.2.2",
"gulp-rollup": "^2.3.0",
"gulp-tsc": "^1.1.4",
"gulp-tslint": "^8.0.0",
"gulp-uglify": "^2.1.2",
"gulp-util": "^3.0.7",
"jasmine": "^2.4.1",
"jasmine-core": "^2.2.0",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.1.1",
"karma-firefox-launcher": "^1.0.1",
"karma-jasmine": "^1.1.0",
"karma-mocha": "^1.2.0",
"karma-safari-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.6",
"karma-spec-reporter-2": "^0.2.0",
"mocha": "^3.1.2",
"pump": "^1.0.1",
"rewire": "^2.5.2",
"systemjs": "^0.20.12",
"ts-loader": "^2.0.3",
"tslint": "^5.2.0",
"tslint-eslint-rules": "^4.0.0",
"typescript": "2.3.2",
"vrsource-tslint-rules": "^5.1.0",
"whatwg-fetch": "^2.0.1"
}
}
I needed to remove spec reporter as it didn't terminate itself after printing the output.

angular cli ng commands not working

Windows server 2012 R2
node v4.7.4
npm v4.3.0
I cannot do a "ng serve": "/c/Users//AppData/Roaming/npm/ng: No such file or directory"
I also cannot do "npm start": "Unexpected token {" then a huge call stack.
I have tried using various versions of node/npm/cli etc... I can't get anywhere.
my app's project.json file:
{
"name": "my-proj",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve --env=source",
"build": "ng build",
"build-replace": "ng build --env=replace",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/compiler-cli": "2.2.4",
"#angular/core": "2.0.0",
"#angular/flex-layout": "2.0.0-beta.3",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/material": "2.0.0-alpha.10",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"angular2-select": "1.0.0-alpha.12",
"core-js": "2.4.1",
"hammerjs": "2.0.8",
"jsrsasign": "6.1.1",
"jwt-decode": "2.1.0",
"lodash": "4.16.4",
"material-design-lite": "1.2.1",
"moment": "2.15.1",
"ng2-pagination": "0.5.1",
"ng2-translate": "4.0.0",
"normalize.css": "4.2.0",
"primeng": "1.0.0-rc.6",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "1.1.1",
"xmljson": "0.2.0",
"zone.js": "0.6.23"
},
"devDependencies": {
"#types/jasmine": "2.2.30",
"#types/lodash": "4.14.37",
"angular-cli": "1.0.0-beta.16",
"codelyzer": "0.0.26",
"jasmine-core": "2.4.1",
"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.9",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "2.0.2"
}
}
For what it's worth on my OSX machine, I am able to do npm start just fine:
Here are the version on my OSX:
ng -v gives me:
angular-cli: 1.0.0-beta.16
node: 6.9.4
os: darwin x64
npm -v gives me:
3.10.10
Try to upgrade your cli version there are lots of changes happened after beta16. You can do it like this;
npm uninstall -g angular-cli #angular/cli
npm cache clean
npm install -g #angular/cli#latest
Upgrade node and angular-cli
sudo npm install -g n
sudo n latest
sudo npm install -g #angular/cli
If you are on Mac, on the terminal; don't add the '--'. just type [ng version].
Solution:
update .npmrc file at C:\Users\{USERNAME}
with the below line
prefix=${APPDATA}\npm
This post helped me:
http://itechiesol.blogspot.co.za/2017/07/angular-cli-ng-command-is-not-working.html
Have you installed angular globally as Administrator? Then run ng commands as Administrator too.