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?
Related
When pushing my angular/node app to heroku it seems to build successfully when I look at the logs. But I can see no dist folder being created in the angular side.
I built the angular client locally to make sure there were no errors in the code.
I have changed the build script from -
"postinstall": "ng build --prod"
which was throwing "path to environment.prod.ts could not be found" error to
"heroku-postbuild": "ng build --configuration=production"
which doest throw errors but doesn't continue to create the dist folder. So I am stuck right a bit.
angular package.json
{
"name": "client",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "node app.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"heroku-postbuild": "ng build --configuration=production"
},
"private": true,
"dependencies": {
"#angular/cli": "~7.3.1",
"#angular/compiler-cli": "~7.2.0",
"typescript": "~3.2.2",
"#angular/animations": "^7.2.8",
"#angular/cdk": "^7.3.3",
"#angular/common": "~7.2.0",
"#angular/compiler": "~7.2.0",
"#angular/core": "~7.2.0",
"#angular/flex-layout": "^7.0.0-beta.24",
"#angular/forms": "~7.2.0",
"#angular/material": "^7.3.3",
"#angular/platform-browser": "~7.2.0",
"#angular/platform-browser-dynamic": "~7.2.0",
"#angular/router": "~7.2.0",
"#vguleaev/angular-material-autocomplete": "0.0.10",
"#w11k/ngx-componentdestroyed": "^4.1.4",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"rxjs-observable-store": "^1.0.1",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.13.9",
"#angular/language-service": "~7.2.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.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"
},
"engines": {
"node": "10.0.0",
"npm": "5.6.0"
}
}
node package.json
{
"name": "spotify-alias",
"version": "1.0.0",
"description": "",
"main": "app.js",
"engines": {
"node": "10.0.0",
"npm": "5.6.0"
},
"dependencies": {
"#babel/cli": "^7.5.5",
"#babel/core": "^7.5.5",
"#babel/node": "^7.5.0",
"#babel/preset-env": "^7.5.0",
"axios": "^0.19.0",
"concurrently": "^4.1.0",
"cookie-session": "^1.3.3",
"cors": "^2.8.5",
"express": "^4.16.4",
"mongoose": "^5.4.14",
"node-fetch": "^2.3.0",
"passport": "^0.4.0",
"passport-spotify": "^1.0.1"
},
"devDependencies": {
"nodemon": "^1.19.1"
},
"scripts": {
"start": "node app.js",
"server": "nodemon --exec babel-node app.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false && npm install --prefix client"
},
"author": "",
"license": "ISC"
}
app.js - node
if(process.env.NODE_ENV === 'production') {
app.use(express.static('/client/dist/index.html'));
const path = require('path');
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "dist", "index.html"));
});
}
I would like everything to build and the dist folder to be created. This is my first node app so please bear with me, there might be things that look completely off.
Like I am not 100% sure about the app.js code that resolves the path. I do know that /client is where the angular stuff is from root.
Any help much appreciated.
You do not have a build script. I see that you're using Babel. Thus, you need to tell Babel to run a build for you; which ultimately provides the dist folder (could be any name though).
"build": "babel src --out-dir dist --copy-files",
Do follow the blog to deploy angular apps on heroku
https://medium.com/#hellotunmbi/how-to-deploy-angular-application-to-heroku-1d56e09c5147
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",
I try to add Material Design to my project following the official tutorial ( https://material.angular.io/guide/getting-started ) but I get an error:
node_modules/#angular/cdk/typings/rxjs/rx-operators.d.ts(11,10): error TS2305: Module '"path_to_project/nod
e_modules/rxjs/Scheduler"' has no exported member 'IScheduler'.
node_modules/#angular/platform-browser/animations/src/providers.d.ts(8,119): error TS2305: Module '"path_to_project/node_modules/#angular/animations/browser"' has no exported member 'ɵDomAnimationEngine'.
I cannot find solution in the forums.
My package.json:
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"#angular/animations": "^4.2.6",
"#angular/cdk": "github:angular/cdk-builds",
"#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/material": "github:angular/material2-builds",
"#angular/platform-browser": "~4.0.0",
"#angular/platform-browser-dynamic": "~4.0.0",
"#angular/router": "~4.0.0",
"angular-in-memory-web-api": "~0.3.0",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "5.0.1",
"systemjs": "0.19.40",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#types/jasmine": "2.5.36",
"#types/node": "^6.0.81",
"canonical-path": "0.0.2",
"concurrently": "^3.5.0",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"lite-server": "^2.2.2",
"lodash": "^4.16.4",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"tslint": "^3.15.1",
"typescript": "~2.2.2"
},
"repository": {}
}
and my systemjs.config.js:
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'#angular/material': 'npm:#angular/material/bundles/material.umd.js',
'#angular/cdk': 'npm:#angular/cdk/bundles/cdk.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
Newest material-2.0.0-beta.8 has a dependency on #angular/cdk which has a dependency on rxjs version 5.0.3 or greater.
So you have to change the rxjs version in your package.json:
npm install rxjs#5.0.3 --save
or
"rxjs": "~5.0.3"
Also, #angular/animations version 4.2.x has a know issue of
error TS2305: Module '"path_to_project/node_modules/#angular/animations/browser"' has no exported member 'ɵDomAnimationEngine'.
If you still get this error, you might need to fall back to version 4.1.x.
npm install '#angular/animations"#4.1.3' --save
I am relatively new to angular 2. I want to use angular2-grid directory. What I have done is creating a folder for my application with all necessary starting file and then run npm-install. Installation is completed and the demo application is working after I typed npm start. Then I want to set up angular2-grid and in the official website is saying to use it you simply have to run npm install angular2-grid. I tried that but I got some warning like :
npm WARN angular2-grid#2.0.1 requires a peer of #angular/core#^2.4.4
but none was installed. npm WARN angular2-grid#2.0.1 requires a peer
of rxjs#^5.0.1 but none was installed. npm WARN angular2-grid#2.0.1
requires a peer of zone.js#^0.7.2 but none was installed.
I need some help how to overcome this problem. Any suggestion is welcome.
My package.json below:
{
"name": "product-management",
"version": "1.0.0",
"author": "Deborah Kurata",
"description": "Package for the Acme Product Management sample application",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.0",
"tslint": "^3.7.4",
"typescript": "^2.0.2",
"typings": "^1.0.4"
},
"repository": {}
}
Thanks
your existing Angular version and RXJS version is lower than what angular-grid requires. Either go for an older version of angular-grid or update your project if possible
For your angular2-grid to be added as a dependency in package.json you need to do
npm install angular2-grid --save
{
"name": "product-management",
"version": "1.0.0",
"author": "Deborah Kurata",
"description": "Package for the Acme Product Management sample application",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.0",
"tslint": "^3.7.4",
"typescript": "^2.0.2",
"typings": "^1.0.4"
},
"repository": {}
}
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();
}