Failed Heroku deploy. Been looking at other similar stack overflow posts and changing package.json file trying solutions that have worked for others with no luck. I am not sure if this is a port issue, or a package.json issue or something completely different. Any help, tips or advice is greatly appreciated!
Heroku logs:
2019-02-09T08:32:56.609533+00:00 heroku[web.1]: State changed from crashed to starting
2019-02-09T08:33:00.956199+00:00 heroku[web.1]: Starting process with command `npm start`
2019-02-09T08:33:03.430137+00:00 heroku[web.1]: State changed from starting to crashed
2019-02-09T08:33:03.257739+00:00 app[web.1]:
2019-02-09T08:33:03.257781+00:00 app[web.1]: > the-lottery-genie-mean#0.0.0 start /app
2019-02-09T08:33:03.257783+00:00 app[web.1]: > ng serve
2019-02-09T08:33:03.257784+00:00 app[web.1]:
2019-02-09T08:33:03.294426+00:00 app[web.1]: sh: 1: ng: not found
2019-02-09T08:33:03.304958+00:00 app[web.1]: npm ERR! file sh
2019-02-09T08:33:03.305986+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2019-02-09T08:33:03.306367+00:00 app[web.1]: npm ERR! errno ENOENT
2019-02-09T08:33:03.309015+00:00 app[web.1]: npm ERR! syscall spawn
2019-02-09T08:33:03.310700+00:00 app[web.1]: npm ERR! the-lottery-genie-mean#0.0.0 start: `ng serve`
2019-02-09T08:33:03.310912+00:00 app[web.1]: npm ERR! spawn ENOENT
2019-02-09T08:33:03.311266+00:00 app[web.1]: npm ERR!
2019-02-09T08:33:03.311514+00:00 app[web.1]: npm ERR! Failed at the the-lottery-genie-mean#0.0.0 start script.
2019-02-09T08:33:03.314421+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2019-02-09T08:33:03.324652+00:00 app[web.1]:
2019-02-09T08:33:03.324892+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2019-02-09T08:33:03.325013+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2019-02-09T08_33_03_316Z-debug.log
2019-02-09T08:33:03.411224+00:00 heroku[web.1]: Process exited with status 1
package.json:
{
"name": "the-lottery-genie-mean",
"version": "0.0.0",
"scripts": {
"preinstall": "npm link #angular/cli ",
"heroku-postbuild": "ng build --prod",
"postinstall": "",
"ng": "ng",
"start": "node server.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/cli": "^7.1.4",
"#angular/compiler-cli": "~7.0.0",
"#angular/animations": "~7.0.0",
"#angular/common": "~7.0.0",
"#angular/compiler": "~7.0.0",
"#angular/core": "~7.0.0",
"#angular/forms": "~7.0.0",
"#angular/http": "~7.0.0",
"#angular/platform-browser": "~7.0.0",
"#angular/platform-browser-dynamic": "~7.0.0",
"#angular/router": "~7.0.0",
"core-js": "^2.5.4",
"json": "^9.0.6",
"rxjs": "~6.3.3",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.13.1",
"#angular/language-service": "~7.0.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"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.1.1"
},
"engines": {
"node": "10.15.1",
"npm": "6.4.1"
}
}
server.js file
app.listen(PORT, '0.0.0.0', function () {
console.log("Node app is running at localhost:" + app.get('port'));
})
Did you check the debug log here /app/.npm/_logs/2019-02-09T08_33_03_316Z-debug.log ?
I suggest looking into the debug log first to get us more details to solve the problem.
UPDATE
Its an H10 error. "heroku[router]: at=error code=H10 desc="App crashed"
method=GET path="/favicon.ico" host=angular-lottery-genie.herokuapp.com
request_id=30e63a79-c395-4d2a-9987-938bcc350629 fwd="50.250.113.70" dyno=
connect= service= status=503 bytes= protocol=https"
Your app crashed. Here are some things you can do:
1.) Restart heroku. You should have heroku CLI installed. Here's the link: Heroku CLI Install . And run heroku restart on your terminal.
2.) Use port that Heroku dynamically sets which can be accessed usually at process.env.PORT, and set your desired port as backup:
app.listen(process.env.PORT || 3000, function(){
console.log("Node app is running at localhost:" + app.get('port'));
});
3.) Try to check your node and npm version by typing in your terminal:
node --version
npm --version
And update the node and npm versions indicated under your package.json file:
"engines": {
"node": "10.15.1",
"npm": "6.4.1"
}
Another UPDATE for your questions:
npm ERR! enoent ENOENT: no such file or directory
These errors are usually related to corruption or incompatibility of packages. What you can do:
1.) Make sure no other instances of node are running in the backgound and retry your npm command.
2.) Delete the node_modules directory and package-lock.json (if you have any). Reinstall packages running npm install (or any command you're using to install the packages) in your terminal inside your project directory.
3.) Upgrade node to the latest version, delete node_modules directory and package-lock.json, and reinstall the packages.
4.) If npm still does not work for you, try yarn package manager (Yarn).
5.) If packages installation still fail, check the error logs file for a detailed report of the error.
Hope this helps!
You might need to add the devkit/builder, make sure its in the right sequence. I added it in bold so make sure if you are gonna copy paste to remove the asterix from the beginning and end.
"#angular/cli": "^7.1.4",
"#angular/compiler-cli": "~7.0.0",
"#angular/animations": "~7.0.0",
"#angular/common": "~7.0.0",
"#angular/compiler": "~7.0.0",
"#angular/core": "~7.0.0",
"#angular/forms": "~7.0.0",
"#angular/http": "~7.0.0",
"#angular/platform-browser": "~7.0.0",
"#angular/platform-browser-dynamic": "~7.0.0",
"#angular/router": "~7.0.0",
**"#angular-devkit/build-angular": "^0.13.1",
"#angular/language-service": "~7.0.0",**
"core-js": "^2.5.4",
"json": "^9.0.6",
"rxjs": "~6.3.3",
"zone.js": "~0.8.26"
In my experience, the deployment of an app that works locally is not always straightforward in Heroku. There are several cases like this in StackOverflow without a definitive solution, specially related to "'library' not found". For someone with a similar problem (trying to deploy AngularJS in Heroku) I would recommend check first functional tutorials like these:
https://devcenter.heroku.com/articles/mean-apps-restful-api
Almost-Oficial documentation. It describes a more complex app but you can discard some things.
https://medium.com/better-programming/how-to-deploy-your-angular-9-app-to-heroku-in-minutes-51d171c2f0d This guy shows a working Angular tutorial deployed in Heroku.
move some devDependencies to dependencies (angular 9 example)
npm i #angular/cli #angular-devkit/build-angular #angular/compiler-cli typescript --save-prod
or set NPM_CONFIG_PRODUCTION to false
here is an answer to similar question
Related
I'm currently working on a project since i've been teaching myself Angular over the past couple weeks. I wrote up my code, created what I thought I needed for deploying on heroku and tried to deploy it. I received the following error
-----> Build
Detected both "build" and "heroku-postbuild" scripts
Running heroku-postbuild
> purposefularmament#0.0.0 heroku-postbuild /tmp/build_2c8456a0
> ng build --configuration production
npm ERR! code ELIFECYCLE
npm ERR! errno 3
npm ERR! purposefularmament#0.0.0 heroku-postbuild: `ng build --configuration
production`
npm ERR! Exit status 3
npm ERR!
npm ERR! Failed at the purposefularmament#0.0.0 heroku-postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging
output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.JjS0Q/_logs/2022-09-23T14_54_55_966Z-debug.log
-----> Build failed
after doing some research I only found that this error is caused by an issue with my npm install. I deleted my node_modules file and removed package-lock.json, cleared the npm cache and then reinstalled npm. I repushed the code and Im still getting this same error.
Any suggestions?
Here is my package.json and server.js files
{
"name": "purposefularmament",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "node server.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"heroku-postbuild": "ng build --configuration production"
},
"private": true,
"dependencies": {
"#angular/animations": "~11.1.2",
"#angular/cli": "^14.2.3",
"#angular/common": "~11.1.2",
"#angular/compiler": "~11.1.2",
"#angular/compiler-cli": "^11.2.14",
"#angular/core": "~11.1.2",
"#angular/forms": "~11.1.2",
"#angular/platform-browser": "~11.1.2",
"#angular/platform-browser-dynamic": "~11.1.2",
"#angular/router": "~11.1.2",
"bootstrap": "^5.2.1",
"bootstrap-icons": "^1.9.1",
"bulma": "^0.9.4",
"express": "^4.18.1",
"grunt-express": "^1.4.1",
"node": "^14.15.0",
"path": "^0.12.7",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"typescript": "~4.1.2",
"zone.js": "~0.11.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1101.4",
"#angular/cli": "^14.2.3",
"#angular/compiler-cli": "^11.2.14",
"#types/jasmine": "~3.6.0",
"#types/node": "^12.11.1",
"autoprefixer": "^10.4.8",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.2.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"postcss": "^8.4.16",
"protractor": "~7.0.0",
"tailwindcss": "^3.1.8",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.1.2"
},
"engines": {
"node": "14.15.0",
"npm": "6.14.13"
}
}
and server.js
//Install express server
const express = require('express');
const path = require('path');
const app = express();
// Serve only the static files form the dist directory
app.use(express.static(__dirname + '/dist/purposefularmament'));
app.get('/*', function(req,res) {
res.sendFile('index.html', {root: 'dist/purposefularmament/'});
});
// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);
Welp I spoke too soon, for those of you how care I fixed the issue by updating node.js to the newest latest version. I was lead to believe that both heroku and my local system should use the same node version. For whatever reason my version was behind. After adjusting for the new node version I repushed and everything worked.
So when trying to run the angular4 project today my first error was : npm install eperm operation not permitted so I thought to delete my node modules folder and retry. But running npm install I am running in to this error npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start". I've closed vscode to try and run the install to make sure nothing was locking it. I've tried npm cache clean but results in errors.
Todays latest struggles :
0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-
cli.js',
1 verbose cli 'install',
1 verbose cli '-g',
1 verbose cli '#angular/cli#latest' ]
2 info using npm#5.5.1
3 info using node#v8.9.3
4 verbose npm-session 2a0bb102467943cf
5 silly install loadCurrentTree
6 silly install readGlobalPackageData
7 error cb() never called!
Admin Results:
Any suggestions?
My package.json looks like this :
{
"name": "gamemanagement",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.0.1",
"#angular/cdk": "^5.0.0-rc0",
"#angular/common": "^5.0.1",
"#angular/compiler": "^5.0.1",
"#angular/compiler-cli": "^5.0.1",
"#angular/core": "^5.0.1",
"#angular/forms": "^5.0.1",
"#angular/http": "^5.0.1",
"#angular/material": "^5.0.0-rc0",
"#angular/platform-browser": "^5.0.1",
"#angular/platform-browser-dynamic": "^5.0.1",
"#angular/platform-server": "^5.0.1",
"#angular/router": "^5.0.1",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
"angular2-moment": "^1.7.0",
"angular2-text-mask": "^8.0.4",
"angularfire2": "5.0.0-rc.3",
"ap-angular2-fullcalendar": "^1.3.5",
"bootstrap": "4.0.0-beta",
"core-js": "^2.4.1",
"firebase": "4.6.2",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"moment": "^2.19.3",
"ng2-date-picker": "^2.6.2",
"popper.js": "^1.12.9",
"rxjs": "^5.4.2",
"sweetalert2": "^7.0.9",
"typescript": "^2.6.1",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "^1.5.3",
"#angular/compiler-cli": "^4.2.4",
"#angular/language-service": "^4.2.4",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"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.3.3"
}
}
I had the same issue. After cache clean and updating npm everything is ok. So try to run:
npm cache clean --force
npm install -g npm#latest
There are 2 solutions for this
you can run "npm cache clean"
you run the command prompt in admin mode.
macOS catalina ,
npm init
got error
operation not permitted, uv_cwd
step 1: go to parent folder
cd ../
step 2: go to your project folder again,
cd your-project-folder
That is it. it works.
Try below setps, hope this helps.
Update Node.js
npm cache clean command in Command prompt, try as admin
check node proxy settings if persist remove them with below
npm config delete http-proxy
npm config delete https-proxy
Install by yourself the module that is giving the error.
After spending many hours and trying all the possible suggestions, I found that installing the specific module mentioned by the error globally fixed the issue:
For Example:
npm ERR! { Error: EPERM: operation not permitted, unlink 'Path\Docume
nts\AngularProjects\my-sample-app333\node_modules.staging#angular\core-a3d1aa4
8\ bundles\core.umd.js
I run: npm install -global #angular/core
and it fixed it for me! Finally!!
Just try npm cache clean quick and simple :)
I tried everything above but it did not work for me.
I copied all content of package.json and deleted the file. Then, I created a new file and copied all there and I saved it as package.json
That fixed everything
100% sure
Firstly delete the project folder. eg: myapp1
Then run ->npm cache clean --force command
Retype the command that gives error previously.
I also faced the same issue but once I removed node_modules folder along with package-lock.json from the project and then I re-installed entire thing again with npm i it worked for me.
I am getting this error while I upload ng project. When I am localy it works fines. When I upload it to Heruku I get this error.
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NPM_CONFIG_PRODUCTION=true
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 8.1.4
engines.npm (package.json): unspecified (use default)
Resolving node version 8.1.4...
Downloading and installing node 8.1.4...
Detected package-lock.json: defaulting npm to version 5.x.x
Bootstrapping npm 5.x.x (replacing 5.0.3)...
npm 5.3.0 installed
-----> Restoring cache
Skipping cache restore (not-found)
-----> Building dependencies
Installing node modules (package.json + package-lock)
> orahi-dash-board#0.0.0 preinstall /tmp/build_69fc13367426455c989d318ff32b98f2
> npm install -g http-server
/tmp/build_69fc13367426455c989d318ff32b98f2/.heroku/node/bin/http-server -> /tmp/build_69fc13367426455c989d318ff32b98f2/.heroku/node/lib/node_modules/http-server/bin/http-server
/tmp/build_69fc13367426455c989d318ff32b98f2/.heroku/node/bin/hs -> /tmp/build_69fc13367426455c989d318ff32b98f2/.heroku/node/lib/node_modules/http-server/bin/http-server
+ http-server#0.10.0
added 23 packages in 2.902s
> orahi-dash-board#0.0.0 postinstall /tmp/build_69fc13367426455c989d318ff32b98f2
> ng build --aot -prod
sh: 1: ng: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! orahi-dash-board#0.0.0 postinstall: `ng build --aot -prod`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the orahi-dash-board#0.0.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /app/.npm/_logs/2017-08-02T03_59_17_505Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
What might be the issue?
Here is my package.json
{
"name": "",
"version": "0.0.0",
"license": "MIT",
"engines": {
"node": "8.1.4"
},
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "http-server",
"lint": "tslint \"src/**/ *.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor",
"preinstall": "npm install -g http-server",
"postinstall": "ng build --aot -prod",
"start-dev": "ng serve"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.3.2",
"#angular/common": "^4.3.2",
"#angular/compiler": "^4.3.2",
"#angular/compiler-cli": "^4.3.2",
"#angular/core": "^4.3.2",
"#angular/forms": "^4.3.2",
"#angular/http": "^4.3.2",
"#angular/material": "2.0.0-beta.2",
"#angular/platform-browser": "^4.3.2",
"#angular/platform-browser-dynamic": "^4.3.2",
"#angular/platform-server": "^4.3.2",
"#angular/router": "^4.3.2",
"#angular/tsc-wrapped": "^0.5.0",
"#ngrx/core": "^1.2.0",
"#ngrx/store": "^2.2.2",
"angular2-datatable": "0.6.0",
"angular2-google-maps": "0.17.0",
"core-js": "2.4.1",
"express": "^4.15.3",
"hammerjs": "^2.0.8",
"install": "^0.10.1",
"ng2-img-cropper": "0.8.0",
"npm": "^5.0.3",
"rxjs": "^5.4.2",
"typescript": "^2.4.2",
"zone.js": "0.7.6"
},
"devDependencies": {
"#angular/cli": "^1.2.6",
"#types/hammerjs": "^2.0.34",
"#types/jasmine": "2.5.38",
"#types/node": "6.0.60",
"codelyzer": "2.0.0-beta.4",
"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",
"ngrx-store-freeze": "^0.1.9",
"protractor": "5.1.0",
"ts-node": "2.0.0",
"tslint": "4.4.2"
}
}
Angular dependencies are added to your devDependencies by default. Heroku doesn't install dev dependencies when deploying, so those dependencies need to be moved into the regular dependencies section of your package.json. See 'Move the #angular/cli Dependency' on this guide: https://medium.com/#ryanchenkie_40935/angular-cli-deployment-host-your-angular-2-app-on-heroku-3f266f13f352
So I upgraded to angular 4+ just so that I can leverage the universal package for server side rendering for SEO purposes. I implemented that in my existing angular 2+ project by upgrading it to angular 4+ and did all the necessary configuration from https://github.com/evertonrobertoauler/cli-universal-demo/commit/a2610286bd3db5d4f4cce4318d7c220c11963eb6.
There is only one difference I am using ng-bootstrap https://ng-bootstrap.github.io/#/home (v1.0.0-alpha.22). But when I run the node server using npm run start-u-dev I get this error for import keyword in ng-bootstrap.
app-ui#0.0.0 start-u-dev /Users/giric/Projects/apnaDoctor/webapp/appUI
ts-node src/server.ts
/appUI/node_modules/#ng-bootstrap/ng-bootstrap/accordion/accordion.module.js:1
(function (exports, require, module, __filename, __dirname) { import { NgModule } from '#angular/core';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/appUI/dist/ngfactory/src/app/app.server.module.ngfa
ctory.ts:18:1)
at Module._compile (module.js:571:32)
at Module.m._compile (/appUI/node_modules/ts-node/src/index.ts:406:23)
at Module._extensions..js (module.js:580:10)
at Object.require.extensions.(anonymous function) [as .ts]
(/webapp/appUI/node_mod
ules/ts-node/src/index.ts:409:12)
at Module.load (module.js:488:32)
pm ERR! Darwin 16.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "start-u-dev"
npm ERR! node v7.7.4
npm ERR! npm v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! app-ui#0.0.0 start-u-dev: `ts-node src/server.ts`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the app-ui#0.0.0 start-u-dev script 'ts-node src/server.ts'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the app-ui package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ts-node src/server.ts
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs app-ui
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls app-ui
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
This is what my package.json looks like
{
"name": "app-ui",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"prestart": "npm install",
"postinstall": "bower install",
"prestart-u-dev": "npm install && ng build && ngc",
"start-u-dev": "ts-node src/server.ts",
"prestart-u-prod": "npm install && ng build --prod && ngc",
"start-u-prod": "ts-node src/server.ts"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.0.1",
"#angular/cli": "^1.0.0-rc.1",
"#angular/common": "^4.0.1",
"#angular/compiler": "^4.0.1",
"#angular/compiler-cli": "^4.0.1",
"#angular/core": "^4.0.1",
"#angular/forms": "^4.0.1",
"#angular/http": "^4.0.1",
"#angular/platform-browser": "^4.0.1",
"#angular/platform-browser-dynamic": "^4.0.1",
"#angular/platform-server": "^4.0.1",
"#angular/router": "^4.0.1",
"#ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.22",
"angular2-toaster": "^3.0.1",
"core-js": "^2.4.1",
"ng2-webstorage": "^1.5.1",
"rxjs": "^5.1.0",
"rxjs-es": "^5.0.0-beta.12",
"typescript": "^2.2.2",
"ui-router-ng2": "^1.0.0-beta.4",
"zone.js": "^0.7.6"
},
"devDependencies": {
"#types/jasmine": "2.5.38",
"#types/node": "~6.0.60",
"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",
"node-sass": "^4.5.0",
"protractor": "~5.1.0",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.3",
"ts-node": "~2.0.0",
"tslint": "~4.4.2"
}
}
Update:
Earlier i removed angular2-toaster, but then i added it again just to make sure it wasn't just toaster module that is throwing the same error. Turns out, both angular2-toaster and ng-bootstrap threw the same error.
Update 2:
When I run the server using ng server, it works fine, no issues with using ng-bootstrap and angular2-toaster with angular 4+
Any suggestions? Thanks in advance.
For those trying to understand what the solution is, you basically want to use and whitelist angular2-toaster and other modules giving this issue.
if using angular-cli, use ng eject to create a webpack.config.js
install the webpack-node-externals dependency via npm install and add the following lines in the webpack.config.js file
const nodeExternals = require('webpack-node-externals');
module.exports = {
...
target: 'node',
externals: [nodeExternals({
whitelist: [
/^#ng-bootstrap\/ng-bootstrap/,
/^angular2\-toaster/,
]
})],
...
}
It is clearly a build issue - you don't seem to have a proper transpilation setup for your server-side code. Please note that ng-bootstrap (as any other Angular 2.x+ library!) is shipping code in the following manner:
unbundled ES2015 code (with imports)
UMD-bundled ES5 code (without imports)
If you want to run ng-bootstrap on the server you've got 2 choices: either setup proper transpilation pipeline and used unbundled code or import from a bundle (located in bundles folder).
If you decide to go with a ES5 bundle approach you should be importing from #ng-bootstrap/ng-bootstrap/dist/ng-bootstrap instead of just #ng-bootstrap/ng-bootstrap). But to be clear I wouldn't recommend it as you would have to have different imports in your server-side and client-side code.
I think you can create two module. One is for browser is imported ng-bootstrap, one is for server is not imported ng-bootstrap. I think you have to create one more module common to share component, service for browser module and server module. Modal doesn't render by server to SEO.
Hello.
I have an wierd error. I recently reinstalled everything on my laptop. Now i ran into troubles. Everytime i use this config from package.json i get error pushing to heroku.
{
"name": "mrfrederiksen",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"postinstall": "ng build --aot -prod",
"start": "node server.js"
},
"engines": {
"node": "7.7.3",
"npm": "4.1.2"
},
"private": true,
"dependencies": {
"#angular/cli": "1.0.0",
"#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",
"express": "^4.15.2",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/compiler-cli": "^4.0.0",
"#types/jasmine": "2.5.38",
"#types/node": "~6.0.60",
"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-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
}
}
But...
If i use this giving from an friend who have older versions installed everything works.
{
"name": "mrfrederiksen",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"postinstall": "ng build --aot -prod",
"start": "node server.js"
},
"engines": {
"node": "6.9.4",
"npm": "3.10.10"
},
"private": true,
"dependencies": {
"#angular/cli": "1.0.0-rc.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",
"core-js": "^2.4.1",
"express": "^4.15.2",
"rxjs": "^5.1.0",
"zone.js": "^0.7.6"
},
"devDependencies": {
"#angular/compiler-cli": "^2.4.0",
"#types/jasmine": "2.5.38",
"#types/node": "~6.0.60",
"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-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.4.2",
"typescript": "~2.0.0"
}
}
Here is my error console messages when using my own with latest versions.
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NPM_CONFIG_PRODUCTION=true
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 7.7.3
engines.npm (package.json): 4.1.2
Downloading and installing node 7.7.3...
npm 4.1.2 already installed with node
-----> Restoring cache
Skipping cache restore (new runtime signature)
-----> Building dependencies
Installing node modules (package.json)
> node-sass#4.5.1 install /tmp/build_5a8b797790355e544758529cdf0f5b1a/node_modules/node-sass
> node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.5.1/linux-x64-51_binding.node
Download complete
Binary saved to /tmp/build_5a8b797790355e544758529cdf0f5b1a/node_modules/node-sass/vendor/linux-x64-51/binding.node
Caching binary to /app/.npm/node-sass/4.5.1/linux-x64-51_binding.node
> node-sass#4.5.1 postinstall /tmp/build_5a8b797790355e544758529cdf0f5b1a/node_modules/node-sass
> node scripts/build.js
Binary found at /tmp/build_5a8b797790355e544758529cdf0f5b1a/node_modules/node-sass/vendor/linux-x64-51/binding.node
Testing binary
Binary is fine
> mrfrederiksen#0.0.0 postinstall /tmp/build_5a8b797790355e544758529cdf0f5b1a
> ng build --aot -prod
The "#angular/compiler-cli" package was not properly installed.
Error: The "#angular/compiler-cli" package was not properly installed.
at Object.<anonymous> (/tmp/build_5a8b797790355e544758529cdf0f5b1a/node_modules/#ngtools/webpack/src/index.js:14:11)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/tmp/build_5a8b797790355e544758529cdf0f5b1a/node_modules/#angular/cli/tasks/eject.js:10:19)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
npm ERR! Linux 3.13.0-112-generic
npm ERR! argv "/tmp/build_5a8b797790355e544758529cdf0f5b1a/.heroku/node/bin/node" "/tmp/build_5a8b797790355e544758529cdf0f5b1a/.heroku/node/bin/npm" "install" "--unsafe-perm" "--userconfig" "/tmp/build_5a8b797790355e544758529cdf0f5b1a/.npmrc"
npm ERR! node v7.7.3
npm ERR! npm v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! mrfrederiksen#0.0.0 postinstall: `ng build --aot -prod`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mrfrederiksen#0.0.0 postinstall script 'ng build --aot -prod'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the mrfrederiksen package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ng build --aot -prod
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs mrfrederiksen
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls mrfrederiksen
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /tmp/build_5a8b797790355e544758529cdf0f5b1a/npm-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
After I upgraded the npm, node, typescript and ng-cli to its latest versions, I had a similar kind of issue.
Tried many things but nothing worked out.
(ended up with "The "#angular/compiler-cli" package was not properly installed" error).
Then did the following steps:
Create a new project (ng new [project_name]) with new versions
Start the above created project with no code written using 'npm start' successfully
Copied the old projects 'src' folder into the new project folder
Copied folders (bootstrap) in old project in the new project folder
Start the project using 'npm start'
Everything started to work as usual.
Just update typescript v2.2.1 and it works