Angular Gulp setup with latest NodeJS version - angularjs

I have been following the repo A healthy Gulp Setup for the gulp setup of my AngularJS project.
I can successfully proceed with this in an older version of nodejs. But on my another system, I have installed a newer version "NodeJS 4.2.2" and I get many dependency errors.
At initial try of npm install I got the error
npm WARN engine karma#0.10.10: wanted: {"node":"~0.8 || ~0.10"} (current: {"node
":"4.2.2","npm":"2.14.7"})
I tried modifying the karma version in package.json from 0.10 to 0.13. This time the npm install hangs for hours while processing bufferutil.
C:\wamp\www\ros_ui\node_modules\karma\node_modules\socket.io\node_modules\socket
.io-client\node_modules\engine.io-client\node_modules\ws\node_modules\bufferutil
>if not defined npm_config_node_gyp (node "C:\Program Files (x86)\nodejs\node_mo
dules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild
) else (node rebuild )
Building the projects in this solution one at a time. To enable parallel build,
please add the "/m" switch.
bufferutil.cc
win_delay_load_hook.c
Creating library C:\wamp\www\ros_ui\node_modules\karma\node_modules\socket
.io\node_modules\socket.io-client\node_modules\engine.io-client\node_modules\
ws\node_modules\bufferutil\build\Release\bufferutil.lib and object C:\wamp\ww
w\ros_ui\node_modules\karma\node_modules\socket.io\node_modules\socket.io-cli
ent\node_modules\engine.io-client\node_modules\ws\node_modules\bufferutil\bui
ld\Release\bufferutil.exp
Generating code
Finished generating code
bufferutil.vcxproj -> C:\wamp\www\ros_ui\node_modules\karma\node_modules\sock
et.io\node_modules\socket.io-client\node_modules\engine.io-client\node_module
s\ws\node_modules\bufferutil\build\Release\\bufferutil.node
Is there any work around for this? I would prefer going with latest node version.
Any help would be appreciated. Thanks in Advance.

Try angularcoffee-boilerplate, this is a project template for AngularJS where npm and Gulp are preconfigured. Just clone the project, install prerequisites with the script install_prerequisites.bat and start the server with the command npm start

Related

No `package.json` file found. Make sure you are running the command in a Node.js project

I am building a AngularJS file with typescript and installed tsd for typedefinitions globally. When I try to run the following command on the root of my project folder I am getting an error
I am new Angular JS using version 1.7. I am not sure if Package.json is needed for AngularJS project
Command
tsd install angular --resolve --save
Error
No package.json file found. Make sure you are running the command in a Node.js project.
package.json is required for node projects to specify metadata about project and include some important commands that may be required for the project build. First you have to install node from official website. You can google for the step by step installation. Once installed, goto your project directory and run this command. Make sure to perform "npm init" before you run the desired angular command.
Note: Ensure, node is accessible through cli
tsd is deprecated use #types node modules
npm i #types/angular --save

Angular installation

I want to install Angular version 4.* on my windows 7.
I am currently using Angular version 1.6.*
I tried following command
npm install #angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}#next --save
But its not working
Can any one please guide me to install and to create angular 4 project..
Make sure you have node version above 6.9 and npm above 3
Check the version by using node --version and npm --version
Install angular cli using npm install -g #angular/cli
-g installs the angular globally on your system and you just have to run this command only once
Create the angular project using ‘ng new angularprojectname’
Go to that project folder and check the angular version by ‘ng -v’
Upgrade this version to angular 4 by running this command-
For Windows-
npm install #angular/common#next #angular/compiler#next #angular/compiler-cli#next #angular/core#next #angular/forms#next #angular/http#next #angular/platform-browser#next #angular/platform-browser-dynamic#next #angular/platform-server#next #angular/router#next #angular/animations#next --save
For Linux/Mac-
npm install #angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}#next --save
Make sure to upgrade the typescript version by running command-
npm install typescript#2.2.1 --save
Ignore whatever warning it shows up and now check the angular version by ‘ng -v’
The version has changed from 2.2.4 to 4.1.0
You can also check all the info about your angular cli in package.json file.
You just need to install npm -g install angular-cli
And write sudo if you are using mac or ubantu
Then go to directory where you want project and then ng new PROJECTNAME
It will create project
Hope it helps you
I am adding this to update the answer.
If you want to install the latest angular version others answers are for you.
If you want to install a specific version of angular (Get your version number here)
You should use the below command.
npm install -g #angular/cli#VERSION_NUMBER
for example, if you want to install angular 1.4.9 command should be like below
npm install -g #angular/cli#1.4.9
I have also found the same issue while installing.
Please Do check npm and nodejs version and upgrade them.
I'd like to recommend node v6.x.x and npm 4.x.x or higher
There are many ways to structure AngularJS applications. When you begin to upgrade these applications to Angular, some will turn out to be much more easy to work with than others. There are a few key techniques and patterns that you can apply to future proof apps even before you begin the migration.
Follow the AngularJS Style Guide
Using a Module Loader
Migrating to TypeScript
Using Component Directives
Upgrade with ngUpgrade
Or up can follow the official document of Angular
For installing Angular 4 follow below simple steps:
Install node.js and npm(they are required dependencies. npm is automatically installed on installing node.js). You can install it
from here
With the help of npm install angular CLI. Type the following command in your command prompt: npm install -g #angular/cli
If you are still facing some problems you have to install git. You can install it from here
Now to create an angular 4 project using Angular CLI type the following command:
ng new [Project_Name]
This will create an Angualr 4 project.
5.To start the server and get your project up and running type following in command line:
ng serve
Remember you should be inside the project folder before starting the server. Hope this helps.
You have some libraries, Like
angular-material, angular-cdk`
etc...
Add all those and Try.
It will work for sure.
And you will be able to run the project
Install angular cli globally.
npm install -g #angular/cli
Get git pull from repository:-
[https://github.com/blazehub/ng-cli-starter.git]
to get ready made production ready project structure.
If you are looking for latest angular version use this command to install
npm -g install #angular/cli

create-react-app: Template was precompiled with an older version of Handlebars

I just installed create-react-app package following the instructions on https://github.com/facebookincubator/create-react-app.
After that I've followed the instructions and created a "myapp" app:
$ create-react-app --version
1.0.4
$ create-react-app myapp
Creating a new React app in /home/...mydir.../myapp.
Installing packages. This might take a couple minutes.
Installing react-scripts...
After the list of installed packages I've got:
Success! Created myapp at /home/...mydir.../myapp
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd myapp
npm start
Happy hacking!
Ok, but when I'm running the server I've got the following message on browser console:
Template was precompiled with an older version of Handlebars than the current
runtime. Please update your precompiler to a newer version (>= 4.0.0) or downgrade
your runtime to an older version (>= 2.0.0-beta.1).
I've verified the handlebars version :
$ npm ls|grep handlebars
│ │ └─┬ handlebars#4.0.6
I've also tried to set the handlebars version on package.json under "devDependencies" and "dependencies" but that didn't work.
Any ideas on how to solve this?
This is a bug in Code Climate Chrome extension.
If you uninstall it, the error will go away.

Can't build the angular 2 github project

I have forked the angular 2 github repo, clone it in my desktop, add upstream then run npm install, but when I want to build ($(npm bin)/gulp build) i have an error message:
"Task 'build' is not in your gulpfile"
How can I properly build the project?
Try gulp build.sh for more recent versions. You can also run simply ./build.sh from the base directory. For future reference you can see a list of gulp tasks using gulp -T.
Make sure you're using the correct version of node (use nvm if you need to) as described in the developer guide.

Yeoman - Errors With Grunt Server Command

I already have npm and git installed on my Ubuntu machine.
I followed the instructions below when installing Yeoman and the generator-angular.
Kickstart Your AngularJS Development with Yeoman, Grunt and Bower (step by step tutorial)
http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/
My ultimate goal is to lauch a simple app using twitter bootstrap, so I can take advantage of their pretty UI. :D
However, when I get to the portion to run grunt server (recently replaced by grunt serve), I get a rediculous number of errors:
I was previously suffering from the issue described below:
Cannot install yeoman because 'generator-karma does not satisfy its siblings peerDependencies
https://github.com/yeoman/yeoman/issues/1065
Luckily I was able to work around it by running npm uninstall -g generator-karma && npm install -g generator-angular and then sudo npm install -g yo grunt-cli bower.
However, now I've hit a wall with grunt appearing as if it's not installed at all.
Does anyone know if there is a specific location where grunt should be installed?
Should I install it globally (using -g)?
Should I not install it globally (using -g)?
I don't understand what I'm doing incorrectly, but it must be something fundamental because the process is intended to be automated and simple.
Any ideas?
This looks like something npm install would fix. Looks like some of your dependencies didn't install.
Try it first without -g.
The problem definitely has something to do with compass and ruby. I was able to quickly build an angular app using yeoman when I opted not to install compass/sass for the app when prompted after typing yo angular at the terminal. After following the suggestions in this post, the last error I got was the following error:
Warning: /home/ubuntu/.rvm/rubies/rubie-2.1.1/lib/ruby/2.1.0/rubygems/core_ext/kernel_req‌​uire.rb:55:in 'require': cannot load such file -- compass (LoadError) from /home/ubuntu/.rvm/rubies/rubie-2.1.1/lib/ruby/2.1.0/rubygems/core_ext/kernel_req‌​uire.rb:55:in 'require' from /usr/bin/compass:20:in 'block in ' from /usr/bin/compass:8:in 'fallback_load_path' from /usr/bin/compass:19:in '' Use --force to continue Although, --force doesn't help.
but fixed it by simply following these instructions.

Resources