ionic 2 serve ignores changes in html - javascript

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.

Related

How to fix spawn ENAMETOOLONG error nrwl nx workspace

I generated a week ago an angular project with nrwl/nx at that time I could generate libs and components and could start my project but right now I am getting the following error:
spawn ENAMETOOLONG
This error occurs whenever I am trying to run npm run start which runs nx serve right now. ng serve is not working either. I can run npm install but nothing to start my application. Here is my package.json if you need any other information I can provide it:
{
"name": "moniesta-admin",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main",
"start": "nx serve",
"build": "nx build",
"test": "nx test"
},
"private": true,
"dependencies": {
"#angular/animations": "~13.2.0",
"#angular/cdk": "^13.0.0",
"#angular/common": "~13.2.0",
"#angular/compiler": "~13.2.0",
"#angular/core": "~13.2.0",
"#angular/forms": "~13.2.0",
"#angular/localize": "~13.2.0",
"#angular/material": "^13.2.2",
"#angular/platform-browser": "~13.2.0",
"#angular/platform-browser-dynamic": "~13.2.0",
"#angular/router": "~13.2.0",
"#nebular/auth": "^9.0.1",
"#nebular/eva-icons": "^9.0.1",
"#nebular/theme": "^9.0.1",
"#ng-bootstrap/ng-bootstrap": "^11.0.0",
"#nrwl/angular": "13.8.1",
"bootstrap": "^5.1.3",
"eva-icons": "^1.1.3",
"rxjs": "~7.4.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~13.2.0",
"#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.2.0",
"#angular/compiler-cli": "~13.2.0",
"#angular/language-service": "~13.2.0",
"#nrwl/cli": "13.8.1",
"#nrwl/cypress": "13.8.1",
"#nrwl/eslint-plugin-nx": "13.8.1",
"#nrwl/jest": "13.8.1",
"#nrwl/linter": "13.8.1",
"#nrwl/tao": "13.8.1",
"#nrwl/workspace": "13.8.1",
"#schematics/angular": "~13.2.0",
"#types/jest": "27.0.2",
"#types/node": "16.11.7",
"#typescript-eslint/eslint-plugin": "~5.10.0",
"#typescript-eslint/parser": "~5.10.0",
"cypress": "^9.1.0",
"eslint": "~8.7.0",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-cypress": "^2.10.3",
"jest": "27.2.3",
"jest-preset-angular": "11.0.0",
"prettier": "^2.5.1",
"ts-jest": "27.0.5",
"typescript": "~4.5.2"
}
}
EDIT:
This happens when i am using nx reset and after that using nx serve again:
Log file with the error: C:\Users\Hasan\OneDrive\Desktop\Moniesta-Projects\Moniesta-Combinatioon\moniesta-management\moniesta-admin\node_modules\.cache\nx\d\daemon-error.log
Please file an issue at https://github.com/nrwl/nx
Nx Daemon is going to be disabled until you run "nx reset".
In the Daemon log it just says the same error:
NX spawn ENAMETOOLONG
This error usually appears when you have too many uncommited files (in a range more than 700 or so in my experience). Commiting the files will usually solve the problem.
I just ran into the same issue. I did delete the node_modules folder manually, then re-installed everything with npm install. Also found that there is a new .angular folder in root folder, which was not present earlier. After deleting this folder entirely, I was able to run build again. Not really sure if running nx build once (which populates this folder again) you should not wipe it out once more.
I just ran into this issue. The solution that worked for me, I found it here
In my case, I was getting this error when running npm start, nx serve. After deleting the node_modules folder and running npm install, I found that running npm install was giving me this error too.
I had uncommitted changes on the branch. The error disappeared after committing the work.
I had the same issue and solve it like this:
First: Updating Nx to version 13.8.5. Do as below:
Run command: nx migrate #nrwl/workspace#13.8.5
Run command: npm install
Run command: nx migrate --run-migrations
Remove "migrations.json" file in nx workspace root directory
Second: Re-install npm globally based on nx version 13.8.5. Do as below:
Run command: npm i -g nx#13.8.5
I don't know why it's related to GIT but yes, having too many uncommitted files is the main cause of the problem.
In my case the reason was as #jurev described here, but the root cause of the problem was not so obvious.
I defined a local directory for a project and initialized local repo, then downloaded the project from remote repo into the directory and connected local repo with remote repo. As a result, I had nothing to commit but git status
showed that all of the files are not staged for further commit and nx serve.. returned spawn ENAMETOOLONG.
For me the solution was deletion whole project directory, downloading some client for version control system (for example, TortoiseGit) and clone the project from remote repo using the client and providing a link of the remote repo to it. After that nx serve worked perfectly.

I am getting a compile error with css-loader/dist/runtime/api.js "Error: ENOENT: no such file or directory" using ReactJS

I am using react-responsive-carousel to build out a carousel on a react site. I installed the package with yarn add and got everything working nicely. I then copied and pasted the .scss files from the project git repo into my own project to use as a base (same class names etc) for styling it my own way. Then my project started throwing errors. Specifically this:
./node_modules/css-loader/dist/runtime/api.js
Error: ENOENT: no such file or directory, open '/mysite/node_modules/css-loader/dist/runtime/api.js'
I have since deleted the .scss files since it was with that change that the error appeared, this did nothing, oddly. I have also tried manually installing css-loader and babel-core as suggested on similar problems, but this did nothing and css-loader still doesn't show up in my node-modules folder.
this is my package.json
{
"name": "mysite",
"version": "0.1.0",
"private": true,
"dependencies": {
"apollo-boost": "^0.4.3",
"apollo-client": "^2.6.3",
"apollo-link-http": "^1.5.15",
"babel-core": "^6.26.3",
"css-loader": "^3.0.0",
"eslint-loader": "^2.2.1",
"graphql": "^14.4.2",
"graphql-tag": "^2.10.1",
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-apollo": "^2.5.8",
"react-dom": "^16.8.6",
"react-lightbox-component": "^1.2.1",
"react-markdown": "^4.1.0",
"react-responsive-carousel": "^3.1.49",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"webpack": "^3.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
any ideas what could be going wrong here? I used create-react-app to start the project, do I need to eject it and edit some webpack config file maybe?
It's really weird since the issue started when I added new .scss files, which I since deleted but this didn't revert the issue.
Any help would be much appreciated.

I am unable to install my project packages

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.

how to deploy Angular 2 App to Github Pages?

I was able to publish an app made with Angular Cli tool to Github Pages a few weeks ago, but now when I try to use the command ng github-pages: deploy I get the error: The specified command github-pages:deploy is invalid.. This github thread suggests that the command has been removed recently, and petersgiles recommended following these guidelines instead to publish pages:
1. npm install -g angular-cli-ghpages (doesn't work if its not global)
2.Then in your package.json
"scripts": { "deploy": "ng build -sm -ec -bh /repo name/ & ngh --silent=false",...
3.when you want to deploy npm run deploy
I followed these instructions, but got the error: Failed at the mybiography#0.0.0 deploy script 'ng build -sm -ec -bh /aboutme/ & ngh --silent=false'. My npm and node js are up-to-date, and the error suggests that the problem is inside my package.json file.
My terminal proceeds to render all five chunks of my program, but there's no link to follow to the website. Is there anything i can do to fix this? I completed my website, and just need somewhere to host it. I'm very lost as a beginner, so please point out any obvious mistakes or missing info.
package.json
{
"name": "aboutme",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"deploy": "ng build -sm -ec -bh /aboutme/ & ngh --silent=false",
"ng": "ng",
"start": "ng serve",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor" },
"private": true,
"dependencies": {
"#angular/common": "^2.3.1",
"#angular/compiler": "^2.3.1",
"#angular/core": "^2.3.1",
"#angular/forms": "^2.3.1",
"#angular/http": "^2.3.1",
"#angular/platform-browser": "^2.3.1",
"#angular/platform-browser-dynamic": "^2.3.1",
"#angular/router": "^3.3.1",
"core-js": "^2.4.1",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"#angular/cli": "^1.0.0-rc.1",
"#angular/compiler-cli": "^2.3.1",
"#types/jasmine": "2.5.38",
"#types/node": "^6.0.42",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "~2.0.3"
}
}
just wanted to update this old post with an answer that worked for me on this SO post: how to publish to github pages?
There is a new angular cli command to push to gh-pages, the old one no longer works. So you have to install the new command, build the project, then execute the push command.
Try this: (for mac) (does not require any changes to package.json) :
$ npm install -g angular-cli-ghpages
Push your code to a github repo and then run this in terminal: ng build --env=prod --base-href "https://yourgithubusername.github.io/yourprojectname/" here
'yourprojectname' is the name of your github repo, not your local
repo.
If everything works fine, then run : sudo angular-cli-ghpages and enter password.
I suspect ngh --silent=false throws an error. The command for running angular-cli-pages with verbose output at the time of this answer is ngh --no-silent
If you want to update your deploy script, take a look at the angular-cli-pages doc for commands to build and deploy:
> ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY/"
> ngh --no-silent
Here is the simple way without any third party plugin you can deploy angular project to GitHub pages.
STEP 1: Open angular.json of your angular repo.
STEP 2: change dist/your-project-name to docs/
STEP 3: ng build --prod --base-href=https://username.github.io/respository-name/
change username to your GitHub username & respositoryName to repository name of your project.
STEP 4: Commit docs folder to local repo and push to github.
git add .
git commit -m "generated deployables"
git push -u origin master
STEP 5: Open Github repo and open settings
STEP 6: Select master branch /docs folder in github pages.
Congrats !!
Here is VERIFIED step by step detailed guide Article on how to deploy angular project to github pages, if you want more detailed article.

Angular2 Build: Cannot find name 'Promise' only in Visual Studio

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.

Categories

Resources