Livereload not working when i edit component Angular-cli [duplicate] - javascript

Using ng serve the project runs in localhost but after changing the code it does not refresh.
Lets say we have the general "App Works!!" in the initial project. However, it doesn't change if I edit inside the application.component.ts the "App works" to "Hello". It still shows App Works!!
what's the problem. Help me out.

This is a bug within the latest #ngtools/webpack package that the angular-cli uses. To fix this you need to manually downgrade the package:
npm uninstall #ngtools/webpack
npm install --save-dev #ngtools/webpack#1.2.4
After a new cli version, you should remove this from your package.json again
For more information check this bug report

The solution for Ubuntu webpack rebuild issue.
The problem seems to be the inotify max_user_watches :
sudo echo "fs.inotify.max_user_watches=524288" >> /etc/sysctl.conf
sudo sysctl -p /etc/sysctl.conf

Had the same problem with Ubuntu 16.04. Quick fix:
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
Hope this helps someone!

Related

Cannot install Vue Cli on Mac Catalina [duplicate]

While installing the dependencies of vue-cli, vue is not identified. Why?
rm -rf node_modules and npm install again
have a look here
Add sudo before yarn when installing
yarn global remove #vue/cli
sudo yarn global add #vue/cli
vue
I had the same issue for a while.
TL;DR
npm install #vue/cli-service --save-dev
As the documentation specify it is a development dependency https://cli.vuejs.org/guide/#cli-service
The CLI Service (#vue/cli-service) is a development dependency. It's an npm package installed locally into every project created by #vue/cli.
Origin
I had a fresh install of nodejs
And just did
>> sudo npm install -g #vue/cli#latest
>> vue --version
#vue/cli 4.5.8
The issue
The issue presented like this
>> npm run serve
yarn run v1.22.10
$ vue-cli-service build --mode development --watch
/bin/sh: 1: vue-cli-service: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The fixes:
npm install #vue/cli-service --save-dev
Which led me straight to another error message
>> npm run serve
yarn run v1.22.10
$ vue-cli-service build --mode development --watch
ERROR Error: Cannot find module 'vue-template-compiler/package.json'
Which I fixed the same way
npm i vue-template-compiler --save-dev
And now it is working fine.
Installing current version without permanently installing vue-cli.
npx #vue/cli create appname
It shows the vue executable is located at /home/alisha/.local/bin. So probably this location is not there in your $PATH.
You should be able to run the vue commands if you provide the full path, like:
~/.local/bin/vue create hello-world
You can also see if that directory is in your PATH by running some command like:
echo $PATH | grep '.local/bin/'
If it's there, you would see it, otherwise you can add it to your path by placing it in your ~/.profile.
Edit ~/.profile and add the following at the bottom of it.
PATH="$HOME/.local/bin:$PATH"
Hope it helps!!
I had the same issue while making a build for production.
You will require vue-cli to be installed. Use below command to install the latest version.
npm install -g #vue/cli#latest
Then
npm install
Might have to do with you having an old version on your computer:
Warning regarding Previous Versions
The package name changed from vue-cli to #vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with
npm uninstall vue-cli -g or yarn global remove vue-cli.
You can find it here: https://cli.vuejs.org/guide/installation.html
THIS FIXED THE ISSUE FOR ME:
After running
sudo npm install -g #vue/cli
I ran
sudo nano $HOME/.profile
and pasted the following line
export PATH=$PATH:/home/chike/.npm-global/bin
after writing the code, next thing I did was Ctrl + O, ENTER and Ctrl + X then wrote
vue init webpack myapp
When you install vue using cli that time you got the path of vue.Now you can copy the bin folder path.
In my example /home/sublime/.npm-packages/bin
Now you export the path below command
export PATH=$PATH:/home/sublime/.npm-packages/bin
I solved mine by running (add sudo if needed)
npm i -g vue-cli#2.9.6
npm i -g #vue/cli
Got similar issue when deploy vue project in jenkins.
Here is what I did:
Add node's bin/ dir, to jenkins user's .bashrc file.
e.g
# node
NODE_HOME=/home/dev/.nvm/versions/node/default
PATH=$NODE_HOME/bin:$PATH
Tips - about nvm & yarn
When you manage node version via nvm, make sure you already choose the node version in terminal. e.g:
nvm use stable
node -v
If you use nvm, and installed yarn via npm, then better install vue-cli via npm not yarn, otherwise the vue executable is not placed into node's bin/ dir, at least that's the case in my tests, and as a result will cause you fail to find the vue command.
Using Yarn on Ubuntu it is installed to ~/.npm-packages/bin/. You must add this directory to your PATH. For example run the following command, close your terminal and open a new one.
user#machine:~$ echo 'export PATH="$PATH:~/.npm-packages/bin/"' >> ~/.bashrc
Note: if the file ~/.bashrc does not exist then simply create it.
Following worked for me:
First remove all the existing ones:
yarn global remove #vue/cli
yarn global remove #vue/cli-service
sudo yarn global remove #vue/cli
sudo yarn global remove #vue/cli-service
Then add #vue/cli using sudo:
Note: use sudo if required
yarn global add #vue/cli
yarn global add #vue/cli-service
Then, the final thing to do is to RESTART the terminal.
vue --version
#vue/cli 4.5.9
If you already got a project, the only two things you need to do is:
Delete the directory node_modules (it is safe, since it is not under git and will regenerate in the next step)
In the command-line write yarn install (it will install everything you need)
If you start installing vue-cli manually in a existing project, it the package.json and package-lock.json will be updated. If you already did. Do a checkout from git, and follow my steps above
This may be a problem caused by version conflicts. "export PATH=$PATH:" This is really useful in some cases. But if you are also like me, after trying the direct “export path” method in the comment above, restarting the terminal still can not execute the situation, you can try this way.
Uninstall Vue
npm uninstall -g #vue/cli
Check the local-global npm package installation path, vue is installed in this directory, check if it has been removed.
npm root -g
Install vue (you can check with https://cli.vuejs.org/#getting-started to find the latest command)
npm install -g #vue/cli
Create a connection to the /usr/local/bin directory(You need to find the vue.js path after the local installation first, then replace this path with your latest local install path:/Users/xxxxx/.npm-global/lib/node_modules/#vue/cli/bin/vue.js)
ln -s /Users/xxxxx/.npm-global/lib/node_modules/#vue/cli/bin/vue.js /usr/local/bin/vue
View version number
vue -v
I was getting the same error because Node.js was not installed. My issue got resolved by installing Node.js using the following command:
sudo apt install nodejs-legacy
To see if you already have Node.js and npm installed and check the installed version, run the following commands:
node -v
npm -v
If both are installed then follow the steps here:
https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally
I installed the package using yarn global add #vue/cli on my Ubuntu box and found the binary in /home/vonkad/.yarn/bin.
I had to modify my /home/vonkad/.bashrc and add the directory to the path export PATH=$PATH:/home/vonkad/.yarn/bin.
To fix this situation, I had to add the following line to my .zshrc (maybe in your case is .bashrc)
export PATH="$(yarn global bin):$PATH"
Effectively, the yarn global bin is a folder where vue (vue-cli 3) was placed.
What helped me
mac os catalina with zsh terminal
Uninstalled node and npm using https://www.positronx.io/how-to-uninstall-node-js-and-npm-from-macos/
Downloaded node/npm from https://nodejs.org/en/download/current/
sudo npm install -g #vue/cli
vue --version (#vue/cli 4.5.4)
I faced the same issue and now resolved. In my case I installed Node.js and NPM using the default Ubuntu repository by using this command sudo apt-get install nodejs npm
The problems seemed like those 2 packages are not well maintained so it caused some bugs.
So I purge those packages and reinstall it from nodesource which is officially recommended way to install (reference: Installation instruction from nodesource) using these commands.
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs
Then reinstall #vue/cli again
sudo npm install -g #vue/cli
Now these issues have gone. Hope it helps some programmers.
You need to install vue via sudo like explained in the doc:
https://cli.vuejs.org/guide/installation.html
If you have WSL2 running and you use zsh like me, just add
yarn global add #vue/cli
# add this line to ~/.zshrc
export PATH="$HOME/.yarn/bin:$PATH"
$ vue --version
#vue/cli 4.x.xx
You can try the following code install see
npm install --global vue-cli
vue init webpack <YOUR-PROJECT-NAME-HERE>
cd <YOUR-PROJECT-NAME-HERE>
npm install
npm run dev

Expo error while choosing template: Could not get npm url for package

Error:
Laptop:~/Documents/react$ expo init PasswordManager
✔ Choose a template: › blank a minimal app as clean as an empty canvas
✖ Something went wrong while downloading and extracting the template.
Could not get npm url for package "expo-template-blank"
I am trying to set up React Native in my Linux Mint. I tried using sudo expo init PasswordManager but it was same, I tried doing sudo npm config set registry https://registry.npmjs.org/ and npm install expo-template-blank
Node version: v16.14.0
Edit: I tried reinstalling expo but no change
In my case Node was installed using Ubuntu Software
I have reinstalled using node js respo for ubuntu.
So it started Working
I had the same problem. I has installed node using snap.
I uninstalled it then used this to install a more recent version of node:
https://github.com/nodesource/distributions/blob/master/README.md#debinstall
And then everything worked.
If apt isn't available to you (because you arent on Ubuntu or similar) then you should still be installing node from nodesource.
Also worth noting, expo might not be tested against the latest greatest node.
At time or writing the active LTS version of expo needs a node version of >=14.0.0 <15.0.0
Downgraded the Node version to 12.x and it worked!!
sudo apt -y install curl dirmngr apt-transport-https lsb-release ca-certificates
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash
Then reinstall expo
npm uninstall -g expo-cli
sudo npm install --unsafe-perm -g expo-cli
Now you can youse expo init!

MAC M1 Something went wrong installing the "sharp" module

Running npm run dev (gatsby develop) on MacBook Pro M1 chip exit with Error: Something went wrong installing the "sharp" module
Running npm run dev MacBook Pro intel chip works fine.
I've seen similar post which did not solved my problem :
When i run "gatsby develop " Something went wrong installing the "sharp" module error is showing
Error Installing Gatsby Starter 'Something went wrong installing the "sharp" module'
Gatsby Develop : Something went wrong installing the "sharp" module
I've update my node version in case any fixes had been made but I still got the error on node v16.0.0
On this github issue they recommend to follow theses steps which did not work.
rm -r node_modules/sharp
yarn install --check-files
On this github issue they recommend to install NVM and downgrade node version. NVM has some difficulties to install on my M1 chip so it is not a good option for me.
I have also tried to do the following steps which did not work as well
rm -rf node_module
rm package-lock.json
npm i
Any idea what can I do to fix gatsby develop on M1 chip ?
Following these steps from this discussion solved my problem.
xcode-select --install
brew install gcc
brew reinstall vips
brew info vips
npm i
Then you can run gatsby develop
I had to downgrade node from 17 (nvm is ideal here) - it worked on 14.
I tried this command, it will probably workout for you too.
all you need to do is to install sharp with unsafe perm which gonna fix the error
npm install sharp --unsafe-perm
keep in mind that this just fix it for the time being and i suggest you to update the xcode command line tools for the main fix
Use sharp 0.29.0 or more will fix this issue
Resolved by removing the current vips
brew remove vips
rm -rf node_modules
yarn install
https://github.com/lovell/sharp/issues/2588#issuecomment-783254806

Angular CLI gives me "TypeError: callbacks[i] is not a function" when I "ng serve"

I literally just made a fresh installation of the Angular CLI in order to try it out and I don't have a clue on what's causing the following error on the command line:
PC:cobros Fran$ ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
95% emitting/Users/Fran/Documents/Workspace/Repos/cobros/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:40
callbacks[i](err, result);
^
TypeError: callbacks[i] is not a function
at Storage.finished (/Users/Fran/Documents/Workspace/Repos/cobros/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:40:15)
at /Users/Fran/Documents/Workspace/Repos/cobros/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:77:9
at /Users/Fran/Documents/Workspace/Repos/cobros/node_modules/graceful-fs/polyfills.js:287:18
at FSReqWrap.oncomplete (fs.js:153:5)
This is the information I get returned when I try "ng -v" (In case it's useful at all):
Angular CLI: 1.6.8
Node: 8.9.0
OS: darwin x64
Angular: 5.2.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
#angular/cli: 1.6.8
#angular-devkit/build-optimizer: 0.0.42
#angular-devkit/core: 0.0.29
#angular-devkit/schematics: 0.0.52
#ngtools/json-schema: 1.1.0
#ngtools/webpack: 1.9.8
#schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0
What does the 'enhanced-resolve' module even do?
Did I install angular wrong? I followed the instructions from https://github.com/angular/angular-cli and made sure I fulfilled the prerequisites.
EDIT: The issue is now fixed, so there is no need to use this workaround anymore.
Solution (workaround) found here
Add "copy-webpack-plugin": "4.3.0" to your package.json
Thanks #neshkatrapati
I had same problem and this command did miracle for me
npm install copy-webpack-plugin#4.3.1
This issue should now be resolved with v4.4.1 released just now.
https://github.com/webpack-contrib/copy-webpack-plugin/releases/tag/v4.4.1
EDIT: The issue is now fixed, so there is no need to use this workaround anymore.
Happens after upgrading #angular/cli to 1.6.8.
Solution: Problem is with copy-webpack-plugin (https://github.com/webpack-contrib/copy-webpack-plugin/issues/217)
npm i copy-webpack-plugin#4.3.1 --save-dev helps
NOTE: Previous offered solution was to downgrade cli to 1.6.7, which does not help.
As stated here https://github.com/angular/angular-cli/issues/9550 it's a problem with copy-webpack-plugin.
It can be solved by doing npm install copy-webpack-plugin#4.3.0
Following github.com/angular/angular-cli/issues/9550 (thanks #oers for the link in the comments)
I just downgraded Anuglar CLI to version 1.6.7.
To do so, just type
npm uninstall -g #angular/cli
And once it finished install a previous version
npm install -g #angular/cli#1.6.7
NOTE: This will work but it is just a temporary solution, they probably -and hopefully- hot fix this.
EDIT: Actually I tried the wrong project which wasn't using CLI, tried again and it doesn't work, if you follow the github thread, it looks like a big thing, as it doesn't work with CLI 1.5.x nor 1.6.x (didn't tried with the others). It looks like the only thing we can do ATM is either debug through or sit and wait.
OOPS!
if npm install copy-webpack-plugin#4.3.1 doesn`t help try add in package.json:
"optionalDependencies": {
"copy-webpack-plugin": "4.3.1"
},
"resolutions": {
"copy-webpack-plugin": "4.3.1"
}
Edit
Just execute yarn upgrade.
There was a release of copy_webpack_plugin fixing the bug (4.4.1), so this should be preferred for resolving this issue. With npm, npm --depth 9999 update should do the trick to update all dependencies recursively.
Regarding the depth argument for npm update:
As of npm#2.6.1, the npm update will only inspect top-level packages. Prior versions of npm would also recursively inspect all dependencies. To get the old behavior, use npm --depth 9999 update
Original answer below:
Solution
rm -rf node_modules package-lock.json
npm i copy-webpack-plugin#4.3.1 -E -O
npm i
Explanation:
We remove node_modules and lockfile
We specify copy_webpack_plugin only as a peer dependency (option -O) and with an exact version (option -E)
We install node_modules
Try this command -> npm install copy-webpack-plugin#4.3.0 resolved my issue
run this command npm install copy-webpack-plugin#4.3.0
callbacks[i](err, result);
^
TypeError: callbacks[i] is not a function
solution:-
npm install copy-webpack-plugin#4.3.0
Try to uninstall and reinstall Angular CLI :
Global package:
npm uninstall -g #angular/cli
npm cache clean
if npm version is > 5 then usenpm cache verifyto avoid errors (or to avoid using --force)
npm install -g #angular/cli#latest
Local project package:
rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
npm install --save-dev #angular/cli#latest
npm install

`npm install` ends with "Killed"

I'm trying to run Telescope (a meteor app) on an Ubuntu 16.04 server. I follow the instructions in the readme:
curl https://install.meteor.com/ | sh
git clone git#github.com:TelescopeJS/Telescope.git
npm install
The first two commands run without an error, but the last command end in Killed:
$ npm install
npm WARN deprecated cross-spawn-async#2.2.4: cross-spawn no longer requires a build toolchain, use it instead!
extract:moment → gunzTarP ▐ ╢█████████████████████████████████████████████████░░░░░░░░░░╟
Killed
Since it doesn't give any information I'm unsure what could be wrong here. Does anybody know how I can solve this? All tips are welcome!
[EDIT]
Using the tip of #Mills in the comments I first ran npm install cross-spawn and then npm install again. This fixed the npm install issue, but when I now try to run the app using meteor it ends with "Killed" again:
$ meteor
Killednloading meteor-tool#1.3.2_4... |
Any more ideas?
I haved same problem, my solution:
sudo /bin/dd if=/dev/zero of=/var/swap.1 bs=1M count=1024
sudo /sbin/mkswap /var/swap.1
sudo /sbin/swapon /var/swap.1
this commands changed configuration for swap
I am running into a similar issue installing npm packages and getting the message "Killed" and a non-zero exit status. For my scenario, it was because my system was running out of memory and I had no swap configured. Configuring swap fixed my problem.
To solve this issue on 14.04 and 16.04:
sudo fallocate -l 1G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile
sudo swapon --show
sudo cp /etc/fstab /etc/fstab.bak
echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab
sudo sysctl vm.swappiness=10
echo 'vm.swappiness=10' | sudo tee -a /etc/sysctl.conf
sudo sysctl vm.vfs_cache_pressure=50
echo 'vm.vfs_cache_pressure=50' | sudo tee -a /etc/sysctl.conf
This will create a swap file of 1GB
Trying running npm install cross-spawn and then npm install again to see if that works. It looks like whats happening is when you run npm install npm looks inside your package.json provided by telesope and is running a deprecated package
I got the same issue when running npm run build in a VM with a single core CPU and 1GB RAM. Increasing the RAM to 4GB resolved this issue.
or you can do the hardway do npm install somewhere else. i did it on my windows and uploaded al the nodemodules dir with ftpclient to the server. that worked for me
I got the same error on DO. I just increased size of CPU and RAM

Categories

Resources