create Angular2 angular-cli project - javascript

I am trying to create Angular2 project using angular-cli. I run, npm install -g angular-cli then I ng new test, it returns
"'ng' is not recognized as an interal or external command, operable
program or batch file."
I check the directory, C:\node\node_modules\npm\node_modules. There was not angular-cli found. My npm version is 4.0.2 and my node version is 5.11.0. If you guys have same problem, could you help me how to figure this out?

From angular-cli docs
Prerequisites
Both the CLI and generated project have dependencies that require Node
6.9.0 or higher, together with NPM 3 or higher.
You need to upgrade your node and npm first.

1) As VadimB suggested, you need to upgrade node and npm versions. Install latest version of node from nodejs.org and make sure you choose minimum Node 6.9.0 setup.
2) You are trying to run wrong command.
Current version command is - npm install -g #angular/cli (Please note - # before angular/cli package in above command.)
3) After #angular/cli installation, you can use ng help or ng -v to check successful installation and version.
4) You are looking at wrong folder. Once installed successfully, #angular\cli will be available in C:\Users\<UserName>\AppData\Roaming\npm\node_modules\

Installing Angular Dependencies
Install a stable version of Node (if not already installed) and verify the installation using node -v
Install TypeScript using command npm install -g typescript
Download and install Angular CLI using command npm install -g #angular/cli
Angular is a component oriented framework. Many components needs to be created to make the whole application. A component is a group of custom elements, HTML elements, ShadowDOM & HTML imports.
Creating the Angular 4 app using Angular CLI
To create a fresh new Angular 4 app, use command ng new newAppName. This command takes some time to execute.
package.json - takes care of the development and app dependencies / packages / commands to execute
src\main.ts - takes care of the scaffolding the entire
src\app\app.module.ts - any newly created module has to added to the declarations and services has to be provided to the providers key parameter of the function #NgModule to make them accessible across the entire application
Run the Angular 4 app using Angular CLI
To run the freshly created app using CLI, use command ng serve which will run the app on http://localhost:4200/.

Use this code :
npm install -g #angular/cli

Related

How to insert dependencies in local package if npm package is installed globally

I have installed few npm packages globally but it does not show any dependencies in any of my package.json files. Which npm command should I use to apply dependencies in all of my package.json files?
Globally installed dependencies won't list in your local package.json file. You should still be able to use them requiring/importing into your project.
if you want to save a dependency in your package.json as well when you install it, us --save flag with npm install command.
for example
npm install --save express
It is not recommended to add a package which is installed globally to locally or vice versa.
When a package is installed globally, it is normally used as a command in the terminal. For example, create-react-app or express-generator. You might install these packages globally to use them as commands in the terminal to build React or Express app (with default scaffold).
When a package is installed locally, it means you want to use it within the application. For example, jsonwebtoken. You should install this package locally so that it can be used within the application and when somebody else clones your project they can install this package as well via npm install command.
So, the suggestion is, install the package globally if you're going to use it as a command, else install the package locally within the application. Don't mix them.

install webpack VS install webpack-cli?

What is the difference installing between the two? I installed webpack globally as said on the installation page then I moved to getting started it is said there to install webpack-cli locally. CLI = Command Line Interface, Does that mean webpack do not have cli so that I have to install webpack-cli?
Since webpack version 4, the command line interface got removed from the main package and added to its own repo and package.
You are obliged to install a cli aside of webpack. CLI = command line interface, webpack = main functionalities.

How can I download ReactJS in to Windows?

How can I download ReactJS in to Windows?
I tried this link but couldn't find the starter kit download option.
I am new to ReactJS, just trying to learn, so can anyone help.
click this refer
This a simple library /npm module for creating react app
Reactjs install in windows. Reference Link
following this steps:
Go to https://nodejs.org/en/
Download latest version of NodeJS LTS with Administrator privileges.
git --version
node --version
npm --version
scoop install yarn (refrence link)
npm install webpack -g
npm install -g create-react-app
create-react-app //projectname//
run it :
cd //projectname//
npm start

yo meanjs:vertical-module runs the application creator

I have been using mean.js version 0.3 with no problems up untill now. Today I decided to checkout mean.js 0.4 so I ran
npm install -g generator-meanjs
to install the new version of the generator, and then ran
yo meanjs
and I went through the steps of the generator which finished successfully, and I was able to run the example site.
However, when I tried to use yo to create my own modules with the following command:
yo meanjs:vertical-module customer
It runs the application setup again:
You're using the official MEAN.JS generator.
? What mean.js version would you like to generate? (Use arrow keys)
master
❯ 0.4.0
0.4.1
I tried looking for a solution, and the only thing I found was this issue:
https://github.com/meanjs/generator-meanjs/issues/79
That suggested the cause is multiple versions of the generator is installed, so I tried uninstalling with the following command and then re-installing by repeating steps I described above
npm unstall -g generator-meanjs
But I am still getting the same results
I would really appreciate any suggestions as to how resolve this. TIA!
I had the same problem, finally figured it out. Maybe it will work for you too:
# remove meanjs generator from npm global
sudo npm remove generator-meanjs -g
sudo npm cache clean -g
# figure out where my npm global modules are
npm root -g
Result: /usr/local/lib/node_modules
# cd to the npm global directory
cd /usr/local/lib/node_modules
# get the latest Yo generator code from GitHub
sudo git clone https://github.com/meanjs/generator-meanjs
# switch to the 0.4-dev branch
cd generator-meanjs
sudo git checkout origin/0.4-dev
#install (run while in generator-meanjs dir)
sudo npm install
# test it
cd ~/
mkdir tmp
cd tmp
yo meanjs:vertical-module my_crud_module
try to install the following version of meanjs generator
npm install -g meanjs/generator-meanjs#0.4-dev
then use
yo meanjs:vertical-module customer
i think that will help.
After hours of haunting errors I managed to find a way to generate crud module. As you guys know 0.4.x generators are still under development so there's a way to create another meanjs project folder with 0.3 version. You can downgrade to meanjs 0.3x without destroying the meanjs 0.4 project folder. All you have to do is to downgrade generator-meanjs to 0.1.12 version and downgrade yo to 1.3.3 or the versions till january 2015.
You can find the information about versions through:
sudo npm info -g yo
sudo npm info -g generator-meanjs
I came up with a hack to fix this issue:
1. Install the crud module when creating your meanjs application:
yo meanjs
this will install an articles crud module in the modules directory.
2. Replace all keywords article by name in all files.
3. Rename all filename with name instead of 'article' in the articles directory.
I have posted a video where I explain these steps in details:
https://www.youtube.com/watch?v=Nkpdp1ofux8

How to use a branch for a yeoman generator

I have a yeoman generator installed globally on my system. I would like to use the "canary" branch of a yeoman project if I type $ yo into the console. Currently it uses the master branch.
Anyone any hints?
When you install your generator globally from npm like this
npm install -g grunt-usemin
it takes the latest released (published) version from a registry.
If you would like to install a specific version from any branch, you can specify link to that repository, for example, for appveyor branch, add #appveyor at the end:
npm install -g https://github.com/yeoman/grunt-usemin.git#appveyor
Here is full npm syntax reference: https://docs.npmjs.com/cli/install
In order to install a branch version of a generator from a GitHub repository, you will need to suffix the URI with #<branch_name> as per the installation of any git hosted npm package.
The command to install a branch named canary for a yeoman generator in a repository named my-yeoman-generator hosted on GitHub will look like this:
$ npm install -g https://github.com/username/my-yeoman-generator.git#canary

Categories

Resources