Node module missing from dist build using Angular2 cli - node.js

I'm using the Angular 2 cli to scaffold and build my Angular 2 website, I'm now trying to add authentication to it and added the angular2-jwt node module using
npm install angular2-jwt --save
it has added the module to the package.json but is not being placed in the dist folder when I run
ng build
What else do I need to do to get it in the dist folder or diagnose what's going wrong.
Here's the package,json:
{
"name": "depots",
"version": "0.0.0",
"license": "Apache-2.0",
"angular-cli": {},
"scripts": {
"start": "ng server",
"postinstall": "typings install --ambient",
"lint": "tslint src/**/*.ts",
"format": "clang-format -i -style=file --glob=src/**/*.ts",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"angular2": "2.0.0-beta.9",
"angular2-jwt": "^0.1.8",
"clang-format": "^1.0.35",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"ng2-table": "^1.0.0-beta.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"systemjs": "0.19.20",
"zone.js": "0.5.15"
},
"devDependencies": {
"angular-cli": "0.0.*",
"angular-cli-github-pages": "^0.2.0",
"ember-cli-inject-live-reload": "^1.3.0",
"glob": "^6.0.4",
"jasmine-core": "^2.3.4",
"jasmine-spec-reporter": "^2.4.0",
"karma": "^0.13.15",
"karma-chrome-launcher": "^0.2.1",
"karma-jasmine": "^0.3.6",
"protractor": "^3.0.0",
"silent-error": "^1.0.0",
"tslint": "^3.3.0",
"typescript": "^1.8.7",
"typings": "^0.6.6",
"ts-node": "^0.5.5"
}
}
Here's the contents of ember-cli-build.js
/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
var app = new Angular2App(defaults, {
vendorNpmFiles: []
});
return app.toTree();
}

Related

NestJS Project on Google App Engine shows error “Could not write file”

I try to deploy my nestJS application in app engine with standard env instance. But I received this error:
0mCould not write file '/workspace/dist/my/ts/file': EROFS: read-only file system, open '/workspace/dist/my/ts/file'.
I understand that nodejs will only be able to perform writing in the /tmp directory.
My question is: how can I put the workspace folder (created by cloud build) into tmp folder
here is my app.yaml:
runtime: nodejs12
env: standard
here my package.json:
{
"name": "elengui-api",
"version": "2.0.0",
"description": "",
"author": "",
"private": true,
"license": "UNLICENSED",
"scripts": {
"prebuild": "rimraf dist",
"build": "npx #nestjs/cli build",
"format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
"start": "npx #nestjs/cli start",
"start:dev": "npx #nestjs/cli start --watch",
"start:debug": "npx #nestjs/cli start --debug --watch",
"start:prod": "node dist/main",
"lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
"test": "jest",
"test:watch": "jest --watch",
"test:cov": "jest --coverage",
"test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
"test:e2e": "jest --config ./test/jest-e2e.json",
"gcp-build": "npm run build",
"deploy": "gcloud app deploy"
},
"dependencies": {
"#hapi/joi": "^17.1.1",
"#nestjs/common": "^7.5.1",
"#nestjs/config": "^0.6.3",
"#nestjs/core": "^7.5.1",
"#nestjs/jwt": "^7.2.0",
"#nestjs/mapped-types": "^0.3.0",
"#nestjs/passport": "^7.1.5",
"#nestjs/platform-express": "^7.5.1",
"#nestjs/schedule": "^0.4.3",
"#nestjs/swagger": "^4.7.13",
"#nestjs/throttler": "^1.1.3",
"#nestjs/typeorm": "^7.1.5",
"#types/bcrypt": "^3.0.0",
"#types/cookie-parser": "^1.4.2",
"#types/hapi__joi": "^17.1.6",
"#types/nodemailer": "^6.4.0",
"#types/passport": "^1.0.6",
"#types/passport-jwt": "^3.0.4",
"#types/passport-local": "^1.0.33",
"bcrypt": "^5.0.0",
"class-transformer": "^0.4.0",
"class-validator": "^0.13.1",
"cookie-parser": "^1.4.5",
"crypto-random-string": "^3.3.1",
"csurf": "^1.11.0",
"express": "^4.17.1",
"hbs": "^4.1.1",
"helmet": "^4.4.1",
"mysql2": "^2.2.5",
"nodemailer": "^6.5.0",
"passport": "^0.4.1",
"passport-jwt": "^4.0.0",
"passport-local": "^1.0.0",
"path": "^0.12.7",
"reflect-metadata": "^0.1.13",
"rimraf": "^3.0.2",
"rxjs": "^6.6.3",
"swagger-ui-express": "^4.1.6",
"typeorm": "^0.2.31"
},
"devDependencies": {
"#nestjs/cli": "^7.5.4",
"#nestjs/schematics": "^7.1.3",
"#nestjs/testing": "^7.5.1",
"#types/cron": "^1.7.2",
"#types/express": "^4.17.11",
"#types/jest": "^26.0.15",
"#types/node": "^14.14.6",
"#types/supertest": "^2.0.10",
"#typescript-eslint/eslint-plugin": "^4.6.1",
"#typescript-eslint/parser": "^4.6.1",
"eslint": "^7.12.1",
"eslint-config-prettier": "7.2.0",
"eslint-plugin-prettier": "^3.1.4",
"jest": "^26.6.3",
"prettier": "^2.1.2",
"supertest": "^6.0.0",
"ts-jest": "^26.4.3",
"ts-loader": "^8.0.8",
"ts-node": "^9.0.0",
"tsconfig-paths": "^3.9.0",
"typescript": "^4.0.5"
},
"jest": {
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"rootDir": "src",
"testRegex": ".*\\.spec\\.ts$",
"transform": {
"^.+\\.(t|j)s$": "ts-jest"
},
"collectCoverageFrom": [
"**/*.(t|j)s"
],
"coverageDirectory": "../coverage",
"testEnvironment": "node"
}
}
This error is explained with trying to write to directory diffent than /tmp.
Official documentation contain following:
While Cloud Storage is the recommended solution for reading and
writing files in App Engine, if your app only needs to write temporary
files, you can use standard Node.js methods to write files to a
directory named /tmp.
So this is the error, it seems your code is trying to use directory mentioned in the error massage. I do not have playgroud at hand for it, but I suppose this is related with start script using npx. You should use node <your-app.js> instead. I found different question where this was confirmed by question poster.

How to create tree-shakable react module? package.json "exports" not working

I'm trying to build a react components library (e.g Buttons, Modals, etc.)
But until now I still cannot figure how to do nested imports
the objective that i want to have is to be able to do this
import Something from '#company/moduleName/Something'
here is my package.json
{
"name": "#company/moduleName",
"version": "1.0.0",
"description": "company's react design system",
"author": "",
"license": "",
"repository": "",
"main": "dist/index.js",
"module": "dist/index.modern.js",
"source": "src/index.js",
"engines": {
"node": ">=13",
"npm": ">=7"
},
"type": "module",
"exports": {
".": "./dist/index.modern.js",
"./Button": "./dist/Button.modern.js",
"./Container": "./dist/Container.modern.js",
"./Input": "./dist/Input.modern.js",
"./Modal": "./dist/Modal.modern.js",
"./Select": "./dist/Select.modern.js",
"./Separator": "./dist/Separator.modern.js",
"./Sidebar": "./dist/Sidebar.modern.js",
"./Tab": "./dist/Tab.modern.js",
"./TextArea": "./dist/TextArea.modern.js",
"./theme": "./dist/theme.modern.js",
"./Typography": "./dist/Typography.modern.js"
},
"scripts": {
"build": "microbundle src/*.js --no-compress --no-sourcemap -f modern,cjs",
"start": "microbundle src/*.js --no-compress --no-sourcemap -f modern,cjs watch",
"rename": "cd dist && ren *.modern.js *.js",
"prepare": "run-s build",
"test": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build"
},
"peerDependencies": {
"react": "^17.0.1",
"lodash.merge": "^4.6.2",
"react-icons": "^4.2.0",
"react-modal": "^3.12.1",
"react-select": "^4.1.0",
"styled-components": "^5.2.1"
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"env-cmd": "^10.1.0",
"eslint": "^7.21.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"microbundle": "latest",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "^4.0.3",
"lodash.merge": "^4.6.2",
"react-icons": "^4.2.0",
"react-modal": "^3.12.1",
"react-select": "^4.1.0",
"styled-components": "^5.2.1"
},
"files": [
"dist"
],
}
currently i'm using microbundle to build everything in the src/ folder. I've added the exports field but it still says this in the example project inside the module
Module not found: Can't resolve '#company/moduleName/Button' in 'E:\Projects\Software\company\moduleName\example\src'
edit
To be clear, the dist folder shows up the correct desired result
-dist
index.modern.js
Modal.modern.js
...
I've also been able to do this, but this is not the desired output
#company/moduleName/dist/Something.modern
Any help would be greatly appreciated!

vue-cli project source map not working/how to get working

I created a new project using vue-cli(#vue/cli 4.3.1). When there is an error in one of my component files(.vue file), in chrome console i do not see the actual file/line number. Instead i see a file reference called vue.runtime.esm.js?2b0e:619. Did some googling on how to enable source map. I added a vue.config.js file on my project root and added below lines:
module.exports = {
configureWebpack: (config) => {
config.devtool = 'eval-source-map'
},
productionSourceMap: true
};
Did npm run server. But still i do not see the actual file reference.
How do i enable source map in a vue-cli-project??
\\File: packages.json
{
"name": "real-world-vue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --mode development",
"lint": "vue-cli-service lint",
"build-watch": "vue-cli-service build-watch --mode development"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.4",
"json-server": "^0.16.1",
"vue": "^2.6.11",
"vue-router": "^3.1.6",
"vuejs-datepicker": "^1.6.2",
"vuex": "^3.1.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-plugin-router": "~4.3.0",
"#vue/cli-plugin-vuex": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.14.0",
"prettier": "^1.19.1",
"sass-loader": "^8.0.2",
"vue-cli-plugin-build-watch": "~1.0.0",
"vue-template-compiler": "^2.6.11"
}
}
Please help.
In my case I got it to work using devtool right under configureWebpack, so no config field there.
I also had to use 'cheap-module-source-map' instead of 'eval-source-map'. In the end it would look like this:
module.exports = {
configureWebpack: {
devtool: "cheap-module-source-map",
},
productionSourceMap: true
};

heroku app crashes because of missing module, but works on localhost

I have an app that I successfully deployed to heroku, but when I try to access it, I get this screen...
The log says the following...
The error I believe is causing the issue is Error: Cannot find module 'mongoose'.
Here is my package.json for reference...
{
"name": "ovo",
"version": "1.0.0",
"description": "see and sort OVO in real time!",
"main": "server.js",
"scripts": {
"build": "webpack --config webpack.prod.config.js",
"dev": "concurrently -k \"npm run frontend\" \"npm run backend\"",
"frontend": "webpack -d --watch",
"backend": "nodemon server.js",
"start": "npm run build && NODE_ENV=production node server.js",
"test": "mocha --compilers js:babel-core/register ./test/**/*.js --require ignore-styles"
},
"engines": {
"node": "6.11.0",
"npm": "5.0.3"
},
"repository": {
"type": "git",
"url": "git+https://github.com/leojacoby/ovo.git"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.17.1",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.0",
"enzyme": "^2.8.1",
"expect": "^1.20.2",
"express": "^4.15.2",
"immutability-helper": "^2.6.5",
"mocha": "^3.2.0",
"mongoose": "^5.4.0",
"node-sass": "^4.5.2",
"prop-types": "^15.6.0",
"rc-slider": "^8.6.0",
"rc-tooltip": "^3.7.0",
"react": "^15.5.4",
"react-addons-update": "^15.6.2",
"react-bootstrap-table": "^4.3.1",
"react-bootstrap-table-next": "^0.1.3",
"react-dom": "^15.5.4",
"react-rangeslider": "^2.2.0",
"react-redux": "^5.0.5",
"redux": "^3.7.2",
"redux-devtools": "^3.4.0",
"redux-devtools-dock-monitor": "^1.1.2",
"redux-devtools-log-monitor": "^1.3.0",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
"webpack": "^2.3.3"
},
"devDependencies": {
"babel-eslint": "^7.2.2",
"concurrently": "^3.5.0",
"eslint": "^3.19.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",
"eslint-watch": "^3.1.0",
"ignore-styles": "^5.0.1",
"nodemon": "^1.11.0",
"react-addons-test-utils": "^15.5.1",
"react-test-renderer": "^15.5.4",
"webpack-dev-middleware": "^1.10.1",
"webpack-dev-server": "^2.4.2",
"webpack-hot-middleware": "^2.18.0"
},
"bugs": {
"url": "https://github.com/leojacoby/ovo/issues"
},
"homepage": "https://github.com/leojacoby/ovo#readme",
"directories": {
"test": "test"
},
"keywords": []
}
The 'mongoose' npm package is in my package.json, and everything works just fine when I run it on my localhost. Please let me know if you want any more information and thank you for reading!
Turns out I hadn't connected my github to my heroku. I was pushing to github but it was not updating heroku so I kept experiencing the same errors. This is what I had to enable in heroku and then my edits actually manifested in the heroku.
An alternative is to just type in git push heroku master into the terminal everytime.
The last thing I had to do was type in heroku config:set MONGODB_URI='mongodb://<name>:<password>#ds123050.mlab.com:23050/ovodb' into the terminal for heroku to access my environmental variable.
Are you pushing node_modules in your code? If yes try to delete that folder and let Heroku install all modules all over again.

Error in package.json deploying Angular2 project on Azure using bitbucket

I am facing a issue deploying angular2 app on azure. I get an error on following line
"engines":{"node":"6.2.1"},
I have given this version as WEBSITE_NODE_DEFAULT_VERSION has the value 6.2.1. Anyone having idea about this then please share.
Here is the error snapshot:
package.json looks as follows:
{
"name": "angular-quickstart",
"version": "1.0.0",
"engines":{"node":"6.2.1"},
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"docker-build": "docker build -t ng2-quickstart .",
"docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
"pree2e": "npm run webdriver:update",
"e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
"lint": "tslint ./app/*/.ts -t verbose",
"lite": "node_modules\.bin\lite-server",
"postinstall": "typings install",
"test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
"test-once": "tsc && karma start karma.conf.js --single-run",
"tsc": "node_modules\.bin\tsc",
"concurrently": "node_modules\.bin\concurrently",
"tsc:w": "node_modules\.bin\tsc -w",
"typings": "node_modules\.bin\typings",
"webdriver:update": "webdriver-manager update"
},
"keywords": [],
"author": "",
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"#angular/common": "~2.1.0",
"#angular/compiler": "~2.1.0",
"#angular/core": "~2.1.0",
"#angular/forms": "~2.1.0",
"#angular/http": "~2.1.0",
"#angular/platform-browser": "~2.1.0",
"#angular/platform-browser-dynamic": "~2.1.0",
"#angular/router": "~3.1.0",
"#angular/upgrade": "~2.1.0",
"angular-in-memory-web-api": "~0.1.5",
"bootstrap": "^3.3.7",
"systemjs": "0.19.39",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.25",
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3",
"typings": "^1.4.0"
},
"devDependencies": {
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3",
"typings": "^1.4.0",
"canonical-path": "0.0.2",
"http-server": "^0.9.0",
"tslint": "^3.15.1",
"lodash": "^4.16.2",
"jasmine-core": "~2.5.2",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-htmlfile-reporter": "^0.3.4",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^3.3.0",
"rimraf": "^2.5.4"
},
"repository": {}
}
Please suggest a solution.
When you deploy your app in a server or a cloud, you should run it on a port provided with process.env.PORT, here is an example:
app.listen(process.env.PORT || 3000, () => {
console.log('Example app is running!');
});
in your package.json file the start script is setting the app to run on port 3000 by default.
From Angular js2 Documentary:
If Node.js and npm aren't already on your machine, install them. Our examples require node v4.x.x or higher and npm 3.x.x or higher. To check which version you are using, run node -v and npm -v in a terminal window.
Could you please check your npm version?

Resources