I am getting started with Angular2 and followed the quickstart here: https://angular.io/guide/quickstart
It seems to work fine when I do npm install but I want to run it in Visual Studio and I will be making in Asp.Net/C# and not NodeJS.
When I build the solution in VS I get this:
I think in nodejS it works because in the package.json we have this:
"postinstall": "typings install",
entire package.json
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0-rc.2",
"#angular/compiler": "2.0.0-rc.2",
"#angular/core": "2.0.0-rc.2",
"#angular/http": "2.0.0-rc.2",
"#angular/platform-browser": "2.0.0-rc.2",
"#angular/platform-browser-dynamic": "2.0.0-rc.2",
"#angular/router": "2.0.0-rc.2",
"#angular/router-deprecated": "2.0.0-rc.2",
"#angular/upgrade": "2.0.0-rc.2",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.12",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4"
}
}
But problem is I am using Visual studio. How can I just build the solution and make it run without using npm start
I think you must use es6-shim to get these errors away. Try this:
typings install dt~es6-shim --save --global
This fixed the problem for me.
Related
I hit the below error on container when i deploy the app on Open shift.
status of container is Crash Loop Back-off
Local env works fine with no errors.
I made sure angular package versions are aligned to get the build successful.
> ng serve
sh: ng: command not found
npm info lifecycle dashboard#0.0.0~start: Failed to exec start script
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! dashboard#0.0.0 start: `ng serve`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the dashboard#0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm timing npm Completed in 122ms
npm ERR! A complete log of this run can be found in:
npm ERR! /opt/app-root/src/.npm/_logs/2020-04-10T15_14_11_050Z-debug.log
My package.json looks like below
"name": "dashboard",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.14",
"#angular/cdk": "^8.2.3",
"#angular/common": "^8.2.14",
"#angular/compiler": "^8.2.14",
"#angular/core": "^8.2.14",
"#angular/forms": "^8.2.14",
"#angular/material": "7.3.2",
"#angular/platform-browser": "^8.2.14",
"#angular/platform-browser-dynamic": "^8.2.14",
"#angular/router": "^8.2.14",
"#swimlane/ngx-charts": "^13.0.2",
"chart.js": "^2.9.3",
"ng2-charts": "^2.3.0",
"rxjs": "~6.4.0",
"sessionstorage": "^0.1.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.803.26",
"#angular/cli": "^8.3.26",
"#angular/compiler-cli": "~8.2.13",
"#angular/language-service": "~8.2.13",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "^2.0.8",
"#types/node": "^8.10.59",
"codelyzer": "^5.2.1",
"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.5.1",
"protractor": "^5.4.3",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}
Any thoughts or help is appreciated.
Just add npx before ng serve like this npx ng serve
If you have installed the dependencies locally and need to refer those packages instead of global. use npx before the the command eg: npx ng serve refers to the locally installed package. ng serve refers to the global package.
npm version 5.2+
I was getting error installing expressJs to my packages. I have had to do an npm cache clean --force no sucess, then I deleted my node_modules and package-lock.json, I try to reinstall packages using npm i I still got an error.
Now I deleted node.js from my pc windows 10 and downloaded and installed the latest node and tried to reinstall the project packages again. Now the error I get is this
$ npm i
npm ERR! Unexpected end of JSON input while parsing near '...ncies":{"autoprefixer'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Chioma Onyepere\AppData\Roaming\npm-cache\_logs\2019-05-28T20_26_29_676Z-debug.log
My app is built on nextJs
Here's the package.json
{
"name": "ratethis",
"version": "1.0.2",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"build": "next build",
"now-build": "next build",
"start": "next start -p %PORT%"
},
"repository": {
"type": "git",
"url": "git+https://github.com/infinity-web-development/ratethis"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/infinity-web-development/ratethis/issues"
},
"homepage": "https://github.com/infinity-web-development/ratethis#readme",
"dependencies": {
"#zeit/next-css": "^1.0.1",
"antd": "^3.15.1",
"faker": "^4.1.0",
"next": "^8.0.3",
"next-images": "^1.1.1",
"next-redux-wrapper": "^3.0.0-alpha.2",
"now": "^15.0.6",
"prop-types": "^15.7.2",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-polls": "^1.2.0",
"react-redux": "^7.0.1",
"redux": "^4.0.1",
"redux-saga": "^1.0.2",
"shallow-equal": "^1.1.0",
"uuid": "^3.3.2"
},
"devDependencies": {
"babel-eslint": "^10.0.1",
"babel-plugin-import": "^1.11.0",
"babel-plugin-inline-import": "^3.0.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-standard": "^4.0.0",
"next-antd-aza-less": "^1.0.2"
}
}
Apparently error is from my pc cause it works just fine on another pc.
I don't know much about npm, but I'd suggesting trying to have it verify the installs it's already done and somehow rewrite the package.json file from the existing installs.
https://docs.npmjs.com/cli/cache.html
Even though the install failed and the package.json doesn't show any traces of the install, there could be some artifact that only npm knows about that's getting in the way.
I want to Generate an APK, I follow these steps In Docs but still have A Build Failed
1. cd android
2. gradlew clean "build Successful"
3. gradlew assembleRelease "BUILD FAILED" with this
Could not read path '\node_modules#babel\parser.bin\parser'.
Here is package.json File
Package.Json
{
"name": "DemoApp",
"version": "1.12.3",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"#turf/distance": "^6.0.1",
"#turf/helpers": "^6.1.4",
"#turf/invariant": "^6.1.2",
"#turf/turf": "^5.1.6",
"lodash": "^4.17.11",
"react": "16.8.6",
"react-native": "0.59.8",
"react-native-datepicker": "^1.7.2",
"react-native-fcm": "^16.2.4",
"react-native-firebase": "5.3.1",
"react-native-gesture-handler": "1.2.1",
"react-native-image-picker": "^0.28.0",
"react-native-linear-gradient": "^2.5.4",
"react-native-maps": "^0.24.2",
"react-native-svg": "^9.3.3",
"react-native-vector-icons": "^6.4.2",
"react-navigation": "3.11.0"
},
"devDependencies": {
"#babel/parser": "^7.4.4",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.8.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-devtools": "^3.6.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
I also faced the same problem and solved by downgrading yarn version to 1.10.1, then it works. May it work for you as well.
Uninstall yarn 1.12.3
Install yarn 1.10.1
Go to project folder and execute yarn install
Build my project and the error is gone
Delete the node_module folder and then run npm install.
my heroku build is failing. I am trying to build an Angular 4 application on Heroku but it won't let me. I have a feeling it is missing a package.json dependency but I am not sure.
-----> 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): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 8.x...
Downloading and installing node 8.9.3...
Using default npm version: 5.5.1
-----> Restoring cache
Skipping cache restore (not-found)
-----> Building dependencies
Installing node modules (package.json + package-lock)
> n5-complete-guide#0.0.0 preinstall /tmp/build_245bb93639fea477473780ef82795ada/SPA-Front-End-d028559f87c3e58d7bd2c6da70d4ffb0e3e44add
> npm install -g http-server
/tmp/build_245bb93639fea477473780ef82795ada/SPA-Front-End-d028559f87c3e58d7bd2c6da70d4ffb0e3e44add/.heroku/node/bin/http-server -> /tmp/build_245bb93639fea477473780ef82795ada/SPA-Front-End-d028559f87c3e58d7bd2c6da70d4ffb0e3e44add/.heroku/node/lib/node_modules/http-server/bin/http-server
/tmp/build_245bb93639fea477473780ef82795ada/SPA-Front-End-d028559f87c3e58d7bd2c6da70d4ffb0e3e44add/.heroku/node/bin/hs -> /tmp/build_245bb93639fea477473780ef82795ada/SPA-Front-End-d028559f87c3e58d7bd2c6da70d4ffb0e3e44add/.heroku/node/lib/node_modules/http-server/bin/http-server
+ http-server#0.10.0
added 23 packages in 1.212s
> node#9.2.0 preinstall /tmp/build_245bb93639fea477473780ef82795ada/SPA-Front-End-d028559f87c3e58d7bd2c6da70d4ffb0e3e44add/node_modules/node
> node installArchSpecificPackage
+ node-linux-x64#9.2.0
added 1 package in 1.676s
> n5-complete-guide#0.0.0 postinstall /tmp/build_245bb93639fea477473780ef82795ada/SPA-Front-End-d028559f87c3e58d7bd2c6da70d4ffb0e3e44add
> ng build --prod
sh: 1: ng: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! n5-complete-guide#0.0.0 postinstall: `ng build --prod`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the n5-complete-guide#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-12-13T01_22_28_985Z-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
Some possible problems:
- Node version not specified in package.json
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
I do not know why it is failing but I really want it to work, any help is appreciated. If you need more specific details, please let me know!
My JSON package:
{
"name": "n5-complete-guide",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"_heroku": "https://www.angularonrails.com/deploy-rails-application-angular-cli-webpack-front-end/",
"start": "http-server dist/",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor",
"preinstall": "npm install -g http-server",
"postinstall": "ng build --prod"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.0.0",
"#angular/common": "^5.0.0",
"#angular/compiler": "^5.0.0",
"#angular/core": "^5.0.0",
"#angular/forms": "^5.0.0",
"#angular/http": "^5.0.0",
"#angular/platform-browser": "^5.0.0",
"#angular/platform-browser-dynamic": "^5.0.0",
"#angular/router": "^5.0.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"express": "^4.16.2",
"ng": "0.0.0-rc6",
"node": "^9.2.0",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "1.5.0",
"#angular/compiler-cli": "^5.0.0",
"#angular/language-service": "^5.0.0",
"#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.4.2"
}
}
Move #angular/cli and #angular/compiler-cli from “devDependencies” to “dependencies”.
Here is my package.json :
{
"name": "mean-app",
"version": "0.0.0",
"license": "MIT",
"engines": {
"node": "6.11.3",
"npm": "3.10.10"
},
"scripts": {
"ng": "ng",
"start": "node server.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"heroku-postbuild": "ng build"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.2.4",
"#angular/cli": "1.4.9",
"#angular/common": "^4.2.4",
"#angular/compiler": "^4.2.4",
"#angular/compiler-cli": "^4.2.4",
"#angular/core": "^4.2.4",
"#angular/forms": "^4.2.4",
"#angular/http": "^4.2.4",
"#angular/platform-browser": "^4.2.4",
"#angular/platform-browser-dynamic": "^4.2.4",
"#angular/router": "^4.2.4",
"angular2-toaster": "^4.0.1",
"axios": "^0.17.0",
"body-parser": "^1.18.2",
"bootstrap": "^4.0.0-beta.2",
"core-js": "^2.4.1",
"cors": "^2.8.4",
"express": "^4.16.2",
"jquery": "^3.2.1",
"mongoose": "^4.12.4",
"ngx-bootstrap": "^1.9.3",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/language-service": "^4.2.4",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/jquery": "^3.2.15",
"#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"
}
}
It fails because there is no ng command available. It's provided by #angular/cli, if moving it to required dependencies and executing local binary doesn't work, then try to change your preinstall script to:
"preinstall": "npm i -g http-server && npm i -g #angular/cli",
In postinstall, you are using ng executable supposing it's installed globally.
Since ng is also one of your dependencies, you could change it to
"postinstall": "./node_modules/.bin/ng build --prod"
Beacause #angular/cli is not installed on deployed machine using ng build in script wont work.
Do this
"scripts": {
...
"build:prod": "ng build --prod",
"heroku-postbuild": "npm run build:prod"
},
Things to note. use heroku-postbuild instead of postinstall. And running a npm script which uses local package (ng in this case) works. But directly running ng build --prod in npm script wont run.
I am starting an ionic2 project, and running into trouble with seeing changes in code reflect to the browser.
Description of the phenomenon:
At some point I see all of what I expect to see in the browser. For example, a single page whose .html is
{{text}}
and text field in the .ts contains "hola".
The output is obviously hola.
Then, I either can change the .html to
Hello World!
Or the text field in the .ts to "mundo"
Since ionic serve is running in the background, I see the browser update itself after I save the change in the code.
However, it always updates to the same old hola.
Doesn't matter how many times I refresh, save, change. I can even delete all contents of both .html and .ts files, and still the browser would show the old state.
things I tried that don't work:
clearing cache from chrome
restarting ionic serve
saving any and all files again
refreshing browser.
It is very frustrating to work like this, as this problem comes and goes, and I have no clear method to even bypass it.
Any suggestions?
I run windows 10, and this happens both in chrome and firefox.
my package.json:
{
"name": "saperli",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "4.1.2",
"#angular/compiler": "4.1.2",
"#angular/compiler-cli": "4.1.2",
"#angular/core": "4.1.2",
"#angular/forms": "4.1.2",
"#angular/http": "4.1.2",
"#angular/platform-browser": "4.1.2",
"#angular/platform-browser-dynamic": "4.1.2",
"#ionic-native/core": "3.10.2",
"#ionic-native/splash-screen": "3.10.2",
"#ionic-native/status-bar": "3.10.2",
"#ionic/storage": "2.0.1",
"ionic-angular": "3.3.0",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.11"
},
"devDependencies": {
"#ionic/app-scripts": "1.3.7",
"#ionic/cli-plugin-ionic-angular": "1.3.0",
"typescript": "2.3.3"
},
"description": "An Ionic project"
}
This happened to me and I had to switch to using Google Chrome Icognito mode. Caching of javascript seemed to mess things up in development.
First run in your project folder npm run clean to do a clean then npm run build to rebuild before serving again.