SHARE

Hey ninjas, in this Angular 2 tutorial for beginners, I’ll show you how to install the angular CLI and how we can use it to create new projects in Angular 2. To install the Angular CLI, we’ll need to use the node package manager.

—– COURSE LINKS:
+ Repo – https://github.com/iamshaunjp/angular-2-playlist
+ Atom editor – https://atom.io/
+ Download Node.js – https://nodejs.org/en/

———————————————————————————————
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== PSD to WordPress Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W

============ Node.js for Beginners Playlist =============

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

================== Social Links ==================

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

33 COMMENTS

  1. Hey, I love your videos! I'm currently using them to teach myself all the js front end frameworks you have tuts for so I can pick one for my new website (I had been using angular 1 so I figured on the new site learn some new stuff).

  2. When I did this for some reason it downloaded ninja-directory directly into my user instead of the angular-2-playlist-master directory, just in case this happened to you-keep going back in directories (cd ..) and check for ninja-directory (cd .. ninja-directory) until you find it.

  3. Great video man… when I ran "ng new directoryname" it created the project but I noticed mine dint come with some directory(config, public, typings).. what can I do to make it right??

  4. HELP !!!

    E:just_tryangular-2-playlistninja-directory>ng serve
    ** NG Live Development Server is running on http://localhost:4200. **
    Hash: 77326f1a4fd4b5431720
    Time: 2144ms
    chunk {0} styles.bundle.js, styles.bundle.map (styles) 28 bytes {2} [initial] [rendered]
    chunk {1} main.bundle.js, main.bundle.map (main) 40 bytes [initial] [rendered]
    chunk {2} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

    ERROR in multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts
    Module not found: Error: Can't resolve 'webpack-dev-server/client?http://localhost:4200/' in 'E:just_tryangular-2-playlistninja-directory'
    @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

    ERROR in multi ./src/styles.css
    Module not found: Error: Can't resolve 'style-loader' in 'E:just_tryangular-2-playlistninja-directory'
    @ multi ./src/styles.css

    ERROR in Error: Child compilation failed:
    Entry module not found: Error: Can't resolve 'html-webpack-plugin/lib/loader.js' in 'E:just_tryangular-2-playlistni nja-directory':
    Error: Can't resolve 'html-webpack-plugin/lib/loader.js' in 'E:just_tryangular-2-playlistninja-directory'

    – compiler.js:76
    [ninja-directory]/[angular-cli]/[html-webpack-plugin]/lib/compiler.js:76:16

    – Compiler.js:280 Compiler.<anonymous>
    [ninja-directory]/[angular-cli]/[webpack]/lib/Compiler.js:280:10

    – Compiler.js:480
    [ninja-directory]/[angular-cli]/[webpack]/lib/Compiler.js:480:13

    – Tapable.js:138 next
    [ninja-directory]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:138:11

    – CachePlugin.js:62 Compiler.<anonymous>
    [ninja-directory]/[angular-cli]/[webpack]/lib/CachePlugin.js:62:5

    – Tapable.js:142 Compiler.applyPluginsAsyncSeries
    [ninja-directory]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:142:13

    – Compiler.js:477
    [ninja-directory]/[angular-cli]/[webpack]/lib/Compiler.js:477:10

    – Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [ninja-directory]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:131:46

    – Compilation.js:615
    [ninja-directory]/[angular-cli]/[webpack]/lib/Compilation.js:615:19

    – Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [ninja-directory]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:131:46

    – Compilation.js:606
    [ninja-directory]/[angular-cli]/[webpack]/lib/Compilation.js:606:11

    – Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [ninja-directory]/[angular-cli]/[webpack]/[tapable]/lib/Tapable.js:131:46

    – Compilation.js:601
    [ninja-directory]/[angular-cli]/[webpack]/lib/Compilation.js:601:10

    – Tapable.js:131 Compilation.applyPluginsAsyncSeries

  5. I had trouble getting 'ng serve' to work for me. I was originally on node v4.4.7 and npm v3.10.10. This is how I resolved it:

    I upgraded to the latest 'recommended for most users' version of node which for me was 6.9.4 from https://nodejs.org/en/
    Then did the following (This assumes you are still in ninja-directory):
    cd .. (to go up one folder)
    rm -R ninja-directory (to delete ninja-directory folder)
    npm i -g reflect-metadata
    npm i -g portfinder
    npm uninstall -g angular-cli
    npm cache clean
    npm install -g angular-cli
    ng new ninja-directory
    cd ninja-directory
    ng serve

    =)

  6. For people having problems with starting the server etc..(and using netbeans)
    Create the application as shown on the tutorial but create it in the NetBeansProjects folder. When the project is created open it in Netbeans. Right click the project name and press NPM install, after NPM install you should be able to start the server etc.. hopefully this solves your problems.

  7. I'm getting this error when coomand ng serve:
    "Tried to find bootstrap code, but could not. Specify either statically analyzabl
    e bootstrap code or pass in an entryModule to the plugins options"

    Any ideas?

  8. im getting this error message when i execute "ng serve":

    "[default] Checking started in a separate process…
    [default] C:Users…angular-2-playlist-masterninja-directorysrcappapp.component.ts:5:13
    Cannot find name 'require'.
    [default] C:Users…angular-2-playlist-masterninja-directorysrcappapp.component.ts:6:12
    Cannot find name 'require'.
    [default] Checking finished with 2 errors"

    Can somebody please tell me whats going on?

  9. Great video man… when I ran "ng new directoryname" it created the project but I noticed mine dint come with some directory(config, public, typings).. what can I do to make it right??

  10. I was having the same issue installing angular-cli…. I figured it out, I updated npm only (npm install [email protected] -g) and now npm v3.10.9 and node v4.4.7. Again in my case I only had to update npm and not node, hope this helps!

  11. I have the latest nmp version and node 4.6.0 and I cannot install angular-cli, when I do that it appears loads of ERR related to clone git or something like this, can u help please? 🙁

  12. Yeah this is definitely a problem
    Ninja can you add anotation for people to download 5.x.x+ NodeJS, It didnt work for me with 4.x.x version, I install 6.x.x and now it works perfectly

  13. on official website of Angular 2 it says that you need "NodeJS v5.x.x or higher and npm v3.x.x or higher", you pointed to download v4.x.x, could this be a problem?

LEAVE A REPLY

Please enter your comment!
Please enter your name here