heroku/node deployment - cannot find module 'app/dist/server/app.js' - node.js

I've recently upgraded my angular2 app to angular 5 and I am having trouble deploying it to heroku where it used to work beforehand.
The issue here is that I have a Procfile that has this: 'web: node dist/server/app.js' - where the launch file is stored but heroku is trying to find it add this path - 'app/dist/server/app.js' I'm not sure where this /app is getting appended but it is causing the issue.
Cheers
error description
{
"name": "",
"version": "4.2.4",
"license": "",
"author": "",
"description": "",
"angular-cli": {},
"engines": {
"node": "8.9.4",
"npm": "5.6.0"
},
"scripts": {
"ng": "ng",
"build": "ng build --prod",
"start": "node dist/server/app.js",
"predev": "tsc -p server",
"dev": "node ./node_modules/mongodb-migrate -runmm -dbn dbSettings up && concurrently \"mongod\" \"ng serve -pc proxy.conf.json --open\" \"tsc -w -p server\" \"nodemon dist/server/app.js\"",
"prod": "concurrently \"mongod\" \"ng build -aot -prod && tsc -p server && node dist/server/app.js\"",
"test": "ng test",
"testbe": "tsc -p server && mocha dist/server/test --exit",
"lint": "ng lint",
"lintbe": "tslint server/**/**.ts{,x}",
"e2e": "ng e2e",
"migrations": "node ./node_modules/mongodb-migrate -runmm -dbn dbSettings up",
"create-migration": "node ./node_modules/mongodb-migrate -runmm create"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.2.0",
"#angular/cdk": "2.0.0-beta.12",
"#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": "2.0.0-beta.12",
"#angular/platform-browser": "^5.2.0",
"#angular/platform-browser-dynamic": "^5.2.0",
"#angular/router": "^5.2.0",
"#sendgrid/mail": "^6.2.1",
"angular-bootstrap-md": "^5.1.2",
"angular2-jwt": "^0.2.3",
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.2",
"bootstrap": "4.0.0-alpha.5",
"cheerio": "^1.0.0-rc.2",
"core-js": "^2.4.1",
"cron": "^1.3.0",
"dotenv": "^4.0.0",
"express": "^4.16.3",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"jsonwebtoken": "^8.2.1",
"migrate-mongo": "^2.2.1",
"moment": "^2.20.1",
"mongodb-migrate": "^2.0.2",
"mongoose": "^5.0.13",
"morgan": "^1.9.0",
"popper.js": "^1.14.3",
"npm-check": "^5.6.0",
"redis": "^2.8.0",
"request": "^2.85.0",
"rxjs": "^5.5.6",
"tether": "1.4.0",
"zone.js": "^0.8.19"
},
"devDependencies": {
"#angular/cli": "~1.7.3",
"#angular/compiler-cli": "^5.2.0",
"#angular/language-service": "^5.2.0",
"#types/jasmine": "^2.8.6",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"chai": "^4.1.2",
"chai-http": "^4.0.0",
"codelyzer": "~4.0.1",
"concurrently": "^3.5.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",
"mocha": "^5.0.5",
"nodemon": "^1.17.3",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}

I once came across with a similar issue with a nodejs typescript application that I had connected with git. The .gitingnore file omits js files. So when heroku takes a pull from git it only obtains typescript script(no js files). Where as the npm start script refers to js files.
Another thing to note it that heroku runs only two commands
npm install
and
npm start
Solution
Add ng build into the start script so that production files are available for heroku.
package.json
"ng": "ng",
"build": "ng build --prod",
"start": "ng build --prod && node dist/server/app.js",

Related

Ng serve is working but ionic serve is failing

I'm building an app using Ionic 6.19.0 and it suddenly started to face building issues.
I get Error: spawn UNKNOWN each time I execute ionic serve.
This is my package.json file
{
"name": "stile",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular-devkit/schematics": "^13.3.3",
"#angular/common": "~13.0.0",
"#angular/core": "~13.0.0",
"#angular/forms": "~13.0.0",
"#angular/platform-browser": "~13.0.0",
"#angular/platform-browser-dynamic": "~13.0.0",
"#angular/router": "~13.0.0",
"#auth0/angular-jwt": "^5.0.2",
"#capacitor/android": "3.4.3",
"#capacitor/app": "1.1.0",
"#capacitor/camera": "^1.3.1",
"#capacitor/core": "3.4.0",
"#capacitor/haptics": "1.1.4",
"#capacitor/keyboard": "1.2.1",
"#capacitor/status-bar": "1.0.7",
"#ionic/angular": "^6.0.0",
"#npmcli/node-gyp": "^2.0.0",
"bootstrap": "^5.1.3",
"install": "^0.13.0",
"jquery": "^3.6.0",
"json-server": "^0.17.0",
"node-sass": "^7.0.1",
"npm": "^8.6.0",
"rxjs": "~6.6.0",
"tslib": "^2.3.1",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^13.3.3",
"#angular-eslint/builder": "^12.2.1",
"#angular-eslint/eslint-plugin": "~13.0.1",
"#angular-eslint/eslint-plugin-template": "~13.0.1",
"#angular-eslint/template-parser": "~13.0.1",
"#angular/cli": "~13.0.1",
"#angular/compiler": "~13.0.0",
"#angular/compiler-cli": "~13.0.0",
"#angular/language-service": "~13.0.0",
"#capacitor/cli": "3.4.0",
"#ionic/angular-toolkit": "^6.1.0",
"#popperjs/core": "^2.11.5",
"#types/jasmine": "~3.6.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"#typescript-eslint/eslint-plugin": "5.3.0",
"#typescript-eslint/parser": "5.3.0",
"acorn": "^8.7.0",
"ajv": "^6.12.6",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.4.4"
},
"description": "An Ionic project"
}
Here are few solutions that might help:
Ensure you're in the root folder of your project.
Try fixing the existing node_modules folder with npm rebuild + reassign
permissions to your node_modules folder: chmod 755 -R
/path/to/node_modules
Remove node_modules and reinstall with npm install

Error: Project 'server.js' does not support the 'serve' target

I am a beginner to the MEAN stack framework. I am trying to run a node js server, using "nodemon server.js" command. But I get this error. I am trying to figure out why
Angular CLI: 9.1.3
Node: 12.4.0
Angular: 9.1.3
This is my package.json file
{
"name": "Angular-App",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"start:server": "nodemon server.js"
},
"private": true,
"dependencies": {
"#angular/animations": "^9.1.3",
"#angular/common": "^9.1.3",
"#angular/compiler": "^9.1.3",
"#angular/core": "^9.1.3",
"#angular/fire": "^6.0.0",
"#angular/forms": "^9.1.3",
"#angular/platform-browser": "^9.1.3",
"#angular/platform-browser-dynamic": "^9.1.3",
"#angular/router": "^9.1.3",
"bootstrap": "^4.4.1",
"core-js": "^3.6.5",
"express": "^4.17.1",
"firebase": "^7.14.2",
"jquery": "^3.5.0",
"ngx-bootstrap": "^5.6.1",
"rxjs": "~6.5.5",
"tslib": "^1.10.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.901.3",
"#angular/cli": "^9.1.3",
"#angular/compiler-cli": "^9.1.3",
"#angular/language-service": "^9.1.3",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"nodemon": "^2.0.3",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "^3.8.3"
}
}
These are my versions
Please help, I am stuck in my project here

npm packagr won't pack assets folder

OS: Windows 10
Using Angular-CLI
My end goal is to have a package set up that contains the following file structure within the dist folder after runing npm run packagr:
+--src
| +-- app
| +-- assets
I have done the following set in angular-cli.json according to the documentation:
"apps" : [
{
"root": "src",
"outDir": "dist",
"assets": [
{
"glob": "**/*",
"input": "../styles",
"output" : "./assets/styles"
}
], ...
}, ...
]
According to the documentation this should target the assets/styles folder inside of my src directory, grab everything in it, then send it to dist as a copy. It will not do that, and I have done many iterations of this. All I want is my styles folder inside the dist directory, so when I run npm pack it is in the package and ready for upload.
package.json
{
"name": "c2c-component-library",
"version": "0.0.3",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"packagr": "ng-packagr -p ng-package.json"
},
"private": false,
"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",
"bootstrap": "^4.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"#angular/cli": "1.6.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",
"ng-packagr": "^2.0.0",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}

Electron command failed: npm prune --production

Trying to build Windows package from Electron using the below command:
electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon
.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string
.ProductName=\"Electron Tutorial App\"
It is giving me the below error:
Command failed: npm prune --production
npm ERR! May not delete: C:\Users\jessica\AppData\Local\Temp\electron-packager\win32-ia32\Tutorial-win32-ia32\resources\app
\node_modules\.bin
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\jessica\AppData\Roaming\npm-cache\_logs\2017-08-11T06_51_09_755Z-debug.log
I am on Angular 2. NPM version is: 5.3.0.
My package.json is below:
{
"productName": "invoice",
"version": "0.1.0",
"main": "main.js",
"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/router": "^4.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "1.0.2",
"#angular/compiler-cli": "^4.0.0",
"#types/jasmine": "2.5.38",
"#types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"electron": "^1.7.5",
"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",
"electron-packager": "8.1.0",
"typescript": "~2.2.0"
}
}
As this user suggest here: https://github.com/electron-userland/electron-packager/issues/686
You should run
npm update -g npm
Then you can build your app again. It worked for me at least.
in my opinion the PATH is not correctly configured.
the easiest thing to do is to use the "cmd node" if you are on Windows

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