Setting-up AngularJS, Angular Seed, Node.js and Karma

I’ve used AngularJS for a few months, but I have no knowledge when it comes to testing AngularJS apps. I have a subscription to PluralSight.com and wanted to go through their online video training course for AngularJS. Specifically with this course I want to learn how to use Karma to do testing.

I’m usually extremely happy with PluralSight.com course, but in the beginning of this course I was somewhat disappointed. In Section 7 (“Angular Seed”) new technologies were introduced. The author introduced Angular-Seed, Node.js and Karma. I’ve worked with Node.js, but there are probably many people who have never used it. I believe the author took for granted that the student knew Node.js. For those who have never used Node.js this could be an obstacle.

When I started the course I didn’t have Node.js installed. I installed Node.js and things didn’t work as intended. I couldn’t run tests in Node.js because Karma was not installed. Once I installed Karma, Chrome wouldn’t launch in the tests.

With all the issues I was having, I wondered if others were having the same problems. If others were having similar issues, were they discouraged and not continuing with the course. So I decided to create this blog post to help others to get stared with AngularJS, Angular-Seed, Node.js and Karma.

Here are my assumptions:

  • You are a windows developer
  • Google Chrome browser is installed
  • You will use the Windows Command Prompt instead of Bash
  • You have little or no knowledge of Node.js
  • You have little or no knowledge of Karma
  • You will use Node.js as the web server. I will step you through this.
  • You have access to and IDE. Visual Studio will be fine. NotePad++ would also probably work. I use JetBrains WebStorm. JetBrains has a free 30 day trial for WebStorm.

Here are the high level step we will follow:

  1. Download and install Angular-Seed
  2. Download and install JetBrains WebStorm (Optional)
  3. Download and install Node.js
  4. Confirm Node.js is installed
  5. Run Karma Unit Tests – will fail because Karma is not installed
  6. Install Karma
  7. Run Karma Unit Tests again – Will fail because Chrome will not start
  8. Add System Variable to Windows
  9. Confirm System Variable Were Added
  10. Run Unit Tests again – should succeed
  11. Confirm that Units are being tracked by Karma
  12. Start Web Server by using Node.js

So lets get started.

1. Download and install Angular-Seed

Download Angular-Seed from GitHub at https://github.com/angular/angular-seed.

Extract Angular-Seed to a directory. I extracted it to “C:DemoAngular-Seed-Master”

2. Download and install JetBrains WebStorm (Optional)

Since PluralSight.com course for AngularJS is using the application JetBrains WebStorm, I will use it also. I will go through the steps of installing and setting up WebStorm; it’s very simple.

So install and run JetBrains WebStorm. They have a free 30 day trial. It can be downloaded from here: http://www.jetbrains.com/webstorm/download/. Any editor will be fine. I prefer WebStorm for editing HTML, JavaScript and CSS.

Once WebStorm is downloaded and installed, start the application. After you stared WebStorm you will eventually get to the “Quick Start” screen. On this screen select “Open Directory” (see image).

The “Select Path” dialog will be displayed. Navigate to the directory where you extracted Angular-Seed. Select “OK”. I extracted it to “C:DemoAngular-Seed-Master”

The WebStorm IDE should be displayed. On the left there should be a project structure with the “Angular-Seed-Master” folder. Click “+” to expand the directory structure.

3. Download and install Node.js

The test in Angular-Seed requires Karma-Runner. To run Karma you will need to install Node.js. I will provide instructions of how to install Node.js and Karma-Runner. After they are installed I will show how to run the tests.

Download and install Node.js.

Go to http://nodejs.org/ website and select the “install” button (see image below). This should download the version of Node.js you need. For me, when I clicked the “install” the version for Windows 64-bit downloaded. Once Node.js is download, execute the file.

I will not go thought the steps for installing Node.js; it’s very straight forward. During the install I used all default options.

4. Confirm Node.js is installed

When Node.js installation has completed we need to confirm it was installed successfully. Open a Windows Command Prompt and type “Node” and [enter]. You should get prompted with a “>”.

Now at the prompt type something like “2 + 2” and [enter]. You should get a result. I got back 4. Now we have confirmed that Node.js is installed correctly. You can quit Node.js by using the keyboard and typing [ctrl]+C twice.

5. Run Karma Unit Tests

Now we are going run test to confirm that Node.js is ready to run Karma?

In WebStorm select the “test.bat” file; it’s in the scripts directory (see image below). There’s nothing you need to do in WebStorm at this time. I just want to point out that this is the file we will run in Node.js to execute Karma.

No go back to your Windows Command Prompt. If you are still in node, exit node by [ctrl]+C twice.

You need to navigate to the directory where you have un-compressed “Angular-Seed”. For me it’s “C:Demosangular-seed-master”.

Once at the Angular-Seed directory type “scriptstest.bat” in the command.

When you run test.bat you may get an error that “karma” is not recognized. If this occurs, “Karma” needs to be installed.

6. Install Karma

To install Karma, at the Windows Command Prompt type “npm install – g karma”. Insted use Update: “npm install – g karma@0.8.7”. !Ignore the image. Based on comments from dotnetsilverlightprism and confirmed, there seems to be breaking changes with new versions of Karma. If you install Karma version 0.8.7 everything seems to be working fine.

Now Karma should be installed.

7. Update angular-seed-master/config/karma.conf.js

Based on dotnetsilverlightprism comment (see his comment at the bottom of the post), after I originally published this post there was a breaking change with the newer Karma package and Angular Seed. This can be easily fixed by changing the file angular-seed-master/config/karma.conf.js with the following code.

8. Run Karma Unit Tests again

Now lets test the “test.bat” file again. Go to the Windows Command Prompt and confirm the location is still where you unzipped Angular-Seed. For me it’s “C:Demosangular-seed-master”.

In the Command Prompt enter “scriptstest.bat” and [enter].

You may receive another error in regards that Karma cannot start Chrome.

9. Add System Variable to Windows

To fix this, Windows System Environment Variables need to be updated to reference the Chrome Browser.

To changes the variables we need to open the Windows system properties. To do this follow these steps (see image below). (1)Click Windows “Start” Button. (2) Type “System Variables” in the Search Box. (3) Select the “Edit the system environment variables”.

This should display the following “System Properties” dialog. Select the “Environment Variables” button.

Now you should see the following “Environment Variables” dialog. In the “System Variables” section, click the “New” button.

In the “Edit System Variable” dialog, set the variable name to “CHROME_BIN”. Set Variable value to the path where Chrome is located. For me the path is “C:Program Files (x86)GoogleChromeApplicationchrome.exe”. The path for you may be different. And click “OK”. And click “OK” through the rest of the dialogs

10. Confirm System Variable Were Added

Important: If you still have Windows Command Prompt open, close it. The new system variable will not be available in the current Windows Command Prompt.

Important: Open a new Windows Command Prompt. This will give you a new context for system variables and the variable that we just added should be available now.

Let’s confirm that the system variable was added. In the new Window Command Prompt type “SET” and [enter]. In the results confirm that “CHROME_BIN” is there with the correct path. If the “CHROME_BIN” variable is not there, then one of the steps above may have been missed.

11. Run Unit Tests Again

In the Windows Command Prompt change the path to where you unzipped the Angular-Seed zip. For me it’s “C:demosangular-seed-master”

Now lets see if the test will run now. In the Windows Command Prompt type “scriptstest.bat”.    

Now the tests should run and the Chrome browser should start. Now Karma is running in Node.js

12. Confirm that Units are being tracked by Karma

In the Window Command Prompt you should notice that all 5 unit test have completed successfully.

You should also notice that the test.bat script did not end. This is because Karma is watching your source files for changes. If you change one of your source files (JavaScript file), the unit test will be rerun.

Now return to your IDE and change a JavaScript source file and save the file. For me, my IDE is WebStorm and I changed the file “testunitcontrollerSpec.js” by adding a space. After changing the file I save it.

As soon as you change the file, Karma will rerun the tests.

13. Start Web Server by using Node.js

Lets confirm that Node.js can run your Angular-Seed website.

Now open a new Windows Command Prompt or stop the current test script ([ctrl]+C twice).

Confirm and navigate that your path for Windows Command Prompt is where you extracted your Angular-Seed zip. My location is “C:demosangular-seed-master”.

In the Windows Command Prompt enter “Node scriptsweb-server.js”

In the Windows Command Prompt, you should be notified that an HTTP server is running.

Now open a browser and navigate to “http://localhost:8000”.

You should see something similar to the following image.

That’s it. Hopefully everything is work and now you can create AngularJS applications using Karma, Angular-Seed, and Node.js

74 thoughts on “Setting-up AngularJS, Angular Seed, Node.js and Karma”

  1. I wrote a pretty easy to use angular seed with a cleaner directory structure and asynchronous modules loaded with RequireJS. The most important part is, It loads controllers on demand, meaning: there is no overhead in loading redundant controllers before you need. Definitely, give it a try.

  2. Thank you for the excellent article. I followed each step today (8-12-13) and got angular-seed and karma working with only one problem — There were breaking changes in angular-seed-master/config/karma.conf.js between when you wrote the article and today, when I pulled it all down. It would generate errors and not ever run Chrome.

    I had to do a few edits to karma.conf.js to put it into the new required format (fixing the breaking changes) and add some missing files in order for it to run the 5 tests. Below is the karma.conf.js that works for me.

    module.exports = function (config) {
    config.set({
    basePath: ‘../’,
    frameworks: [‘jasmine’],
    files: [
    ‘app/lib/angular/angular.js’,
    ‘app/lib/angular/angular-*.js’,
    ‘test/lib/angular/angular-mocks.js’,
    ‘app/js/*.js’,
    ‘test/unit/*.js’
    ] ,
    autoWatch: true,
    browsers: [‘Chrome’],
    junitReporter: {
    outputFile: ‘test_out/unit.xml’,
    suite: ‘unit’
    }
    })
    }

    Thank you so much for doing such a complete write up. You saved me, and a lot of others, a whole lot of time.
    George Stevens

    1. I have setup everything the way you have it BarDev but i get an error when trying to run test.bat.

      C:UserscdillmanWebstormProjectsangular-seed-master>scriptstest.bat
      ERROR [config]: Config file must export a function!
      module.exports = function(config) {
      config.set({
      // your config
      });
      };

      However,
      dotnetsilverlightprism: when i change the conf file the way you have it it says

      C:UserscdillmanWebstormProjectsangular-seed-masterconfigkarma.conf.js:3
      basePath: ΓÇÿ../ΓÇÖ,
      ^
      ERROR [config]: Invalid config file!
      SyntaxError: Unexpected token ILLEGAL
      at Module._compile (module.js:439:25)
      at Object.Module._extensions..js (module.js:474:10)
      at Module.load (C:UserscdillmanAppDataRoamingnpmnode_moduleskarmanode_modulescoffee-scriptlibcoffee-scriptcoffee-script.js:211:36)
      at Function.Module._load (module.js:312:12)
      at Module.require (module.js:364:17)
      at require (module.js:380:17)
      at Object.parseConfig (C:UserscdillmanAppDataRoamingnpmnode_moduleskarmalibconfig.js:300:22)
      at Object.exports.start (C:UserscdillmanAppDataRoamingnpmnode_moduleskarmalibserver.js:151:20)
      at Object. (C:UserscdillmanAppDataRoamingnpmnode_moduleskarmabinkarma:19:39)
      at Module._compile (module.js:456:26)
      at Object.Module._extensions..js (module.js:474:10)
      at Module.load (module.js:356:32)
      at Function.Module._load (module.js:312:12)
      at Function.Module.runMain (module.js:497:10)
      at startup (node.js:119:16)
      at node.js:901:3

      Where did you get these missing files?

      1. Some of the quotation marks in config code that dotnetsilverlightprism provided are special. I updated the post with dotnetsilverlightprism code and made the changes to the quotation marks.

        Hope this helps

    2. Thanks dotnetsilverlightprism. I confirmed the issue that you described and updated the post with you code.

      Another option is for the user to install a older version of Karma. This can be done by entering the following in a command prompt: “npm install -g karma@0.8.7”

      If the user has already installed a new version of Karma, I recommend the user to follow the steps you provided. Some of the single quotation marks in your comment are special. For example the quotation marks for the base path are curly quotations marks; everyone needs to change them to straight quotation marks.

      Great job dotnetsilverlightprism.

      1. Worked for me with the current version of angular-seed and karma. Didn’t need to modify the config or install an older karma version.

  3. I was in the exact situation you were (going through the Pluralsight AngularJS presentation) and was getting ready to embark on a “learning experience” I hadn’t anticipated until I found your post. Thank you very much!

  4. I have seen this angular seed. But no offense, it didn’t seem very exciting to me. After comparing a few good angular seeds on github, I wrote one that has a pretty good directory structure and asynchronous loading fashion in a on-demand basis. Meaning, you don’t have to load all controllers at page-load. With this angular seed you can load components on demand, when and where it’s needed on the fly.

  5. I was also going through the PluralSight course and had the same experience, your excellent and very timely article has been extremely helpful, all of the steps so far have worked (all I have left to do now is the environment variable changes for chrome). You have excellent technical writing skills and it really shows here in this post. Thanks very much!

  6. Nice post, but i have few questions about integrating unit with e2e tests:

    I usually see two config files for both, is there a way to run all tests (unit & e2e) at once, i can run unit tests with (JASMINE & JASMINE_ADAPTER) & e2e with ANGULAR_SCENARIO & ANGULAR_SCENARIO_ADAPTER but when mixing them both i get ‘Executed 0 of 0 success in karma console’.

    or if they have to remain separate, can karma show results for both in one session?

    Thanks.

  7. Thanks for all your hard work putting this together but i cannot get karma to work.. still get error that it is not recognized. The sad part is that my company pays pluralsight.com good money for access to training and all the configuration and set up required to get the sample running is ridiculous. An epic fail on the part of pluralsight… if you have to be an IT engineer to get some javascript and html to run then someone needs to take a better look at the training materials.

  8. When I run tests.bat in step 7, I get the following

    > .scriptstest.bat
    [2013-10-11 05:51:55.022] [ERROR] config – Invalid config file!
    [ReferenceError: module is not defined]

    This is regardless if I change the karma.conf.js file. And I have installed karma@0.8.7.

  9. Your karma.conf.js is pretty much the same as the one in the latest angular-seed, except that yours is missing the “plugins” key. Is that something you deliberately had to remove to make things work, or something they added since? I got things running fine with it there, though I’ve seen some quirks.

    I’ve also noticed that, when I run scriptstest.bat, it doesn’t run the existing tests — it just sits there waiting for files to change, and then runs those files when they change. Obviously I’d rather have it start by running the existing tests, but it doesn’t. Is that because you’ve removed the “plugins” key, or because you’re using Karma 0.8.7, or for some other reason?

  10. When i run test.bat I get following error:

    E:Angularangular-seed-master>scriptstest.bat
    INFO [karma]: Karma v0.10.2 server started at http://localhost:9876/
    INFO [launcher]: Starting browser Chrome
    INFO [Chrome 30.0.1599 (Windows 7)]: Connected on socket v57O-ovThK-VvnvsAnjq
    Chrome 30.0.1599 (Windows 7) ERROR
    Uncaught ReferenceError: minErr is not defined
    at E:/Angular/angular-seed-master/app/lib/angular/angular-loader.js:19
    Chrome 30.0.1599 (Windows 7) ERROR
    Uncaught ReferenceError: minErr is not defined
    at E:/Angular/angular-seed-master/app/lib/angular/angular-loader.min.js:
    6
    Chrome 30.0.1599 (Windows 7): Executed 0 of 0 ERROR (0.228 secs / 0 secs)

  11. I received the following error when trying to run test.bat

    c:Webangular-seed-master> scriptstest.bat
    INFO [karma]: Karma v0.10.2 server started at http://localhost:9876/
    INFO [launcher]: Starting browser Chrome
    INFO [Chrome 30.0.1599 (Windows 7)]: Connected on socket UFq5mIEDZbeQbJWks6PL
    Chrome 30.0.1599 (Windows 7) ERROR
    Uncaught ReferenceError: minErr is not defined
    at c:/Web/angular-seed-master/app/lib/angular/angular-loader.js:19
    Chrome 30.0.1599 (Windows 7) ERROR
    Uncaught ReferenceError: minErr is not defined
    at c:/Web/angular-seed-master/app/lib/angular/angular-loader.min.js:6
    Chrome 30.0.1599 (Windows 7): Executed 0 of 0 ERROR (1.058 secs / 0 secs)

    Any ideas what’s going wrong?

    Thanks,
    Steve

    1. was gettin err saying minErr not defined in angular-loader.js….i commented it in angular-loader.js and angular-loader.min.js and got the app wrking f9 after doing all the required settings as mentioned in above steps.

  12. was gettin err saying minErr not defined in angular-loader.js….i commented it in angular-loader.js and angular-loader.min.js and got the app wrking f9 after doing all the required settings as mentioned in above steps.

  13. Thanks for this! As noted by other users above. As of 10/21/2013, the workaround in steps 6 and 7 are no longer needed. You can install the current version of Karma and leave karma.conf.js unchanged. However, you may get a different error when running scriptstest.bat

    Uncaught ReferenceError: minErr is not defined

    To resolve this, refer to the code posted by zsumore at https://github.com/angular/angular-seed/issues/110
    Make sure to paste it into the angular-loader.js file just before
    var $injectorMinErr = minErr(‘$injector’);
    and also paste it into the angular-loader.min.js file just before
    var l=minErr(“$injector”);

    Jim

  14. Thanks mate. You’ve cleaned up Pluralsight’s shortfall. This is creeping into a lot of their courses. The caching course projects are hell to get going.

    Only thing I’d add is the commit of Angular-seed which Cooper uses in the course. It is 30fcebb5d6.

  15. Step 6. Install Karma: I am sorry, looks trivial and obviouse but took me 10-15 min to find out that there is a miss spelling in step 6. Install Karma, “install” written incorrectly, written npm “intstall” instead of “install”, which made me not able to continue the steps, yes I may be lazy and copy and paste it but, may be others like me will benefit from my mistake.

  16. Awesome write-up.. Really helpful and much appreciated.. I had issues running the karma test.bat file and resolved it by running an update of karma:
    npm install karma-jasmine –save-dev

  17. This blog post did help in solve this issue for me too as node.js is also still very new to me and I did not know anything about AngularJs, hence why I watched the fundamentals video on PluralSight 🙂

    I was following the same course and while I had node.js already installed from a previous attempt to learn more about it I did not have Karma installed.
    Also when using the current version of angular seed, Karma-junit-reporter also needs to be installed for all errors to be gone, though the tests will execute without it fine.

    As the course is about learning the fundamentals of AngularJs it should assume you know nothing of it yet and therefore, like other courses on PluralSight, the author should point out required dependencies and point the viewer to the angularjs documentation (http://docs.angularjs.org/tutorial) which states the required dependencies and also point to the node.js pluralsight course for more information.

  18. Helped me a lot! For anyone who is struggling with the karma config file like I did: I used ‘karma init’ – that will create a config file (after answering a couple of questions) which you can edit later to enter the exact files you want karma to watch.

  19. Thanks a lot for this article. I was trying to go through the pluralshight tutorial, and ran into these issues. I have no previous experience with node.js, karma, and I was getting a little frustrated. You saved me lots of time.
    thanks again for this great article

  20. Hi
    After I ran this to install karma
    npm install -g karma

    “karma” was still not recognized as a command in windows so I had to run this for the command line interface for karma
    npm install -g karma-cli

    hope this helps

  21. Thank for doing this! I was feeling the identical pain and also using a course on Pluralsight (..then he started to go into a web-server.js file which does not exist now. and started to get lost).

    I will follow along! THANKS!

  22. Thanks for the nice clear article. I followed it up to the point where you say to open the test.bat file in the scripts folder. Problem is: I have no scripts folder in the angular-seed-master folder.
    So from this point I am stuck.

    Anyone have any ideas?

    1. Same, the newest downloadable version of the git repo has no scripts folder. All the scripts are just withing /app and /test and still none of these are a .bat file, just .js files

  23. Hi I am getting error whileinstalling karma
    > ws@0.4.31 install C:UsersShubhamAppDataRoamingnpmnode_moduleskarmanode
    _modulessocket.ionode_modulessocket.io-clientnode_modulesws
    > (node-gyp rebuild 2> builderror.log) || (exit 0)

    please help me….aftr this i tried running scripts/test.bat but it says testacular is not recognised

Leave a Reply

Your email address will not be published. Required fields are marked *