ng: command not found – when install angular-cli on OSX

Angular2 requires a bunch of files to setup and things to configure. To avoid unnecessary typing and copying of files the angular guys created angular-cli which allows bootstrapping a new Angular2 application with just one line:

ng new my-fancy-app

When installing the angular-cli package using:

npm install -g angular-cli

I encountered a strange error message that stated:

ng: command not found

There is this discussion on Github but all comments there did not solve the issue for me. Finally I noticed that the ng-command is not linked in /usr/local/bin. The fix for my problem was to add it via:

ln -s /usr/local/Cellar/node/6.3.1/lib/node_modules/angular-cli/bin/ng /usr/local/bin/ng
Advertisements

Gulp build fails with: Error: Broken @import declaration of “http://fonts.googleapis.com/css?family=Open+Sans”

I am currently working on a project that involves an Angular.js frontend and the build server running on a machine behind a corporate proxy. From time to time this error occurs:

Error: Broken @import declaration of “http://fonts.googleapis.com/css?family=Open+Sans

All the other tasks such as bower install work fine because we set the proxy for bower, npm and git. After some research it became clear that the clean-css dependency that is used by gulp-minify-css  is the problem. This plugin ignores the proxy settings and tries to resolve the import declaration directly. Solution is very easy: just set a HTTP_PROXY environment variable with your proxy and everything works just fine.

This issue here describes some more possibilities to get around this problem.

Bower install / NPM install behind a proxy

Often when you work in a company network your are using a proxy to connect to the internet and it is not uncommon that you receive the following error when trying to execute bower install or npm install

ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/jquery/jquery.git", exit code of #128

The proxy is blocking the connection to Github because most proxy do not allow git://-urls. The solution for this is very simple. Just change the git urls to https and everything will work. This command changes all github urls to https:

git config --global url.https://github.com/.insteadOf git://github.com/

gulp-nodemon: Object # has no method ‘spawnSync’

gulp-nodemon is a nice tool if you want to restart your node process when your source code changes. It is very easy to use. Just take this snippet from their sample code and modify the script to your needs.

gulp.task('develop', function () {
  nodemon({ script: 'server.js'
          , ext: 'html js'
          , ignore: ['ignored.js']
          , tasks: ['lint'] })
    .on('restart', function () {
      console.log('restarted!')
    })
})

Just fire up “gulp develop” and the server will start.

You might receive the following error: Object #<Object> has no method ‘spawnSync’

In this case check your node version (e.g. mine was 0.10.26). As stated in the release notes (here) you need to use Node.js version 0.12 in order to use it. You either use an older version of gulp-nodemon or upgrade your Node.js installation to the correct version.

Error: ENOENT, stat ‘C:\Users\Username\AppData\Roamin\npm’

Today I installed Node.js on a new Windows 8.1 machine. I downloaded the latest version from nodejs.org and tried to use npm. I got the following exception:

Error: ENOENT, stat 'C:\Users\Username\AppData\Roamin\npm'

The solution is very simple: Just create the folder: C:\Users\Username\AppData\Roamin\npm Afterwards node (and npm) works as expected.

This behavior is a bug in the recent version of the node installer (see here for more details).

JavaScript – Documenting optional parameter

JavaScript is an awesome language but due to its nature parameter documentation is pretty important especially when it come to optional parameters. If you want to create a method like this:

module.exports.create = function (callback) {
    // Do something
    if (callback) {
        callback();
    }
}

Obviously, callback is an optional parameter but if we use this method in an IDE like JetBrains WebStorm it will always show us a wrong signature warning and other developers might think this parameter is mandatory.  We can overcome that situation by adding the correct comment on this method.

/**
 * The method does something. 
 * 
 * @param {requestCallback=} callback
 */
module.exports.create = function (callback) {
    // Do something
    if (callback) {
        callback();
    }
}

Now the IDE and other developers looking at our method know that the parameter is optional and can use it like that. This syntax can be used to provide a lot of information on the different request parameter. This link contains a very detailed description.

Object # has no method ‘flash’ undefined TypeError: Object # has no method ‘flash’ at allFailed

Recently I was playing around with Passport.js in an Express application. I created a login route that logged like that:

passport.authenticate('local', {
    successRedirect: '/app',
    failureRedirect: '/login',
    failureFlash: false
});

Everything worked fine and I could login to my application but I also wanted to show a message when the login fails. So I changed my route to:

passport.authenticate('local', {
    successRedirect: '/app',
    failureRedirect: '/login',
    failureFlash: true
});

Instead of redirect back to the login page I got this exception:

Object #<IncomingMessage> has no method 'flash' undefined TypeError: Object #<IncomingMessage> has no method 'flash' at allFailed

The solution for this is simple. I forgot to include the connect-flash module that provides the flash method. So I changed my startup code:

var flash = require('connect-flash');
app.use(cookieParser());
app.use(flash());

Even so the solution is quite simple and somehow obvious. It doesn’t seem right that changing a property to true introduces the need for a new middleware.