Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Angular Basics Setting Up an Angular Application Your First Angular Application

npm serve error

npm serve is not working for me. I keep getting the following error....

Usage: npm <command>

where <command> is one of:
    access, adduser, bin, bugs, c, cache, completion, config,
    ddp, dedupe, deprecate, dist-tag, docs, doctor, edit,
    explore, get, help, help-search, i, init, install,
    install-test, it, link, list, ln, login, logout, ls,
    outdated, owner, pack, ping, prefix, prune, publish, rb,
    rebuild, repo, restart, root, run, run-script, s, se,
    search, set, shrinkwrap, star, stars, start, stop, t, team,
    test, tst, un, uninstall, unpublish, unstar, up, update, v,
    version, view, whoami

npm <command> -h     quick help on <command>
npm -l           display full usage info
npm help <term>  search for help on <term>
npm help npm     involved overview

Specify configs in the ini-formatted file:
    C:\Users\Jason\.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

npm@5.4.2 C:\Program Files\nodejs\node_modules\npm

8 Answers

@stjarnan Thanks Jonas. ng serve doesn't work either, but the instructor tells us at 4:22 of the video to use npm run serve

Any other ideas?

stjarnan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points

Alright,

Did you download the project files? You did not create your own project? If so, try the following command before npm run serve:

 npm install 

If this doesn't work, make sure you're running the command in the correct folder.

Let me know if you get anywhere :)

Jonas

I'm using Visual Studio Code, have downloaded all of the project files, am in the root directory of the downloaded files folder, did not create my own project, have used npm install, and then npm run serve ???

stjarnan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points

I tried and managed to have it work by doing this:

  • Downloaded and extracted the files into a folder of my choice (root folder) *Using Visual Studio Code's terminal, I ran npm install
  • I then ran npm run serve

I'd suggest you to remove the project, redownload and try it again. Hopefully that will work.

Jonas

I've repeated from scractch five times now. It's an infinite loop LOL. I am currently in the root folder.

This is the code I get upon running npm install

Jaydacode@jaydacode-pc MINGW64 /c/xampp/htdocs/angular2-treehouse
$ npm install
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^
4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

> photoblog@ postinstall C:\xampp\htdocs\angular2-treehouse
> npm run build


> photoblog@ build C:\xampp\htdocs\angular2-treehouse
> webpack


[at-loader] Using typescript@2.1.4 from typescript and "tsconfig.json" from C:\xampp\htdocs\angular2-treehouse\src\tsconfig.json.


[at-loader] Checking started in a separate process...

[at-loader] Ok, 2.105 sec.
Hash: 6e8b569b302b8d420a4b
Version: webpack 1.14.0
Time: 64698ms
                                Asset       Size  Chunks             Chunk Names
          app.6e8b569b302b8d420a4b.js  177 bytes       0  [emitted]  app
    polyfills.6e8b569b302b8d420a4b.js     101 kB       1  [emitted]  polyfills
       vendor.6e8b569b302b8d420a4b.js     912 kB       2  [emitted]  vendor
                              app.css    1.31 kB       0  [emitted]  app
      app.6e8b569b302b8d420a4b.js.map    1.03 kB       0  [emitted]  app
                          app.css.map   84 bytes       0  [emitted]  app
polyfills.6e8b569b302b8d420a4b.js.map     772 kB       1  [emitted]  polyfills
   vendor.6e8b569b302b8d420a4b.js.map     6.6 MB       2  [emitted]  vendor
                           index.html  478 bytes          [emitted]
    + 662 hidden modules

WARNING in polyfills.6e8b569b302b8d420a4b.js from UglifyJs
Condition always true [../~/angular2-template-loader!./polyfills.ts:6,4]
Dropping unreachable code [../~/angular2-template-loader!./polyfills.ts:10,4]
Condition always true [../~/zone.js/dist/zone.js:9,0]
Non-strict equality against boolean: == false [../~/zone.js/dist/zone.js:1658,0]
Condition left of || always false [../~/zone.js/dist/zone.js:556,0]
Condition left of || always false [../~/zone.js/dist/zone.js:559,0]
Dropping unused variable frameParserStrategy [../~/zone.js/dist/zone.js:674,0]
Dropping unused function findAllExistingRegisteredTasks [../~/zone.js/dist/zone.js:964,0]
Side effects in initialization of unused variable Zone$1 [../~/zone.js/dist/zone.js:23,0]
Side effects in initialization of unused variable zoneAwareAddEventListener [../~/zone.js/dist/zone.js:1100,0]
Side effects in initialization of unused variable zoneAwareRemoveEventListener [../~/zone.js/dist/zone.js:1101,0]

WARNING in vendor.6e8b569b302b8d420a4b.js from UglifyJs
Condition always true [../~/@angular/core/bundles/core.umd.js:7,0]
Dropping unreachable code [../~/@angular/core/bundles/core.umd.js:430,0]
Declarations in unreachable code! [../~/@angular/core/bundles/core.umd.js:430,0]
Dropping unreachable code [../~/@angular/core/bundles/core.umd.js:467,0]
Declarations in unreachable code! [../~/@angular/core/bundles/core.umd.js:467,0]
Condition always true [../~/@angular/common/bundles/common.umd.js:7,0]
Dropping unreachable code [../~/@angular/common/bundles/common.umd.js:2807,0]
Declarations in unreachable code! [../~/@angular/common/bundles/common.umd.js:2807,0]
Side effects in initialization of unused variable WrappedError [../~/@angular/common/bundles/common.umd.js:2408,0]
Condition always true [../~/@angular/platform-browser/bundles/platform-browser.umd.js:7,0]
Condition always true [../~/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js:7,0]
Condition always true [../~/@angular/compiler/bundles/compiler.umd.js:7,0]
Dropping unreachable code [../~/@angular/compiler/bundles/compiler.umd.js:7768,0]
Declarations in unreachable code! [../~/@angular/compiler/bundles/compiler.umd.js:7768,0]
Dropping unreachable code [../~/@angular/compiler/bundles/compiler.umd.js:7820,0]
Declarations in unreachable code! [../~/@angular/compiler/bundles/compiler.umd.js:7820,0]
Dropping unreachable code [../~/@angular/compiler/bundles/compiler.umd.js:7843,0]
Declarations in unreachable code! [../~/@angular/compiler/bundles/compiler.umd.js:7843,0]
Dropping unreachable code [../~/@angular/compiler/bundles/compiler.umd.js:17009,0]
Declarations in unreachable code! [../~/@angular/compiler/bundles/compiler.umd.js:17009,0]
Side effects in initialization of unused variable token [../~/@angular/compiler/bundles/compiler.umd.js:23004,27]
Side effects in initialization of unused variable parentNodeIndex [../~/@angular/compiler/bundles/compiler.umd.js:23902,35]
Non-strict equality against boolean: != true [../~/@angular/compiler/bundles/compiler.umd.js:1096,0]
Dropping unreachable code [../~/@angular/compiler/bundles/compiler.umd.js:8422,0]
Declarations in unreachable code! [../~/@angular/compiler/bundles/compiler.umd.js:8422,0]
Dropping unreachable code [../~/@angular/compiler/bundles/compiler.umd.js:8746,0]
Declarations in unreachable code! [../~/@angular/compiler/bundles/compiler.umd.js:8746,0]
Side effects in initialization of unused variable provider [../~/@angular/compiler/bundles/compiler.umd.js:25393,0]
Side effects in initialization of unused variable ngModuleByPipeOrDirective [../~/@angular/compiler/bundles/compiler.umd.js:27751,0]
Side effects in initialization of unused variable WrappedError [../~/@angular/compiler/bundles/compiler.umd.js:1641,0]
Side effects in initialization of unused variable INT_TYPE [../~/@angular/compiler/bundles/compiler.umd.js:14131,19]
Side effects in initialization of unused variable CATCH_ERROR_VAR [../~/@angular/compiler/bundles/compiler.umd.js:14863,19]
Side effects in initialization of unused variable CATCH_STACK_VAR [../~/@angular/compiler/bundles/compiler.umd.js:14864,19]
Side effects in initialization of unused variable CommentStmt [../~/@angular/compiler/bundles/compiler.umd.js:15118,0]
Side effects in initialization of unused variable NOT_THROW_ON_CHANGES [../~/@angular/compiler/bundles/compiler.umd.js:22800,19]
Child html-webpack-plugin for "index.html":
        + 1 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN photoblog@ No repository field.
npm WARN photoblog@ No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"
os":"win32","arch":"x64"})

added 684 packages in 171.483s

This is the message i get upon running npm run serve

Jaycode@jaycode-pc MINGW64 /c/xampp/htdocs/angular2-treehouse
$ npm run serve

> photoblog@ serve C:\xampp\htdocs\angular2-treehouse
> webpack-dev-server --config config/develop.config.js --inline --progress --port 8080
                                                                                                                  70% 3/3 build modules
events.js:182
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE 127.0.0.1:8080
    at Object._errnoException (util.js:1021:11)
    at _exceptionWithHostPort (util.js:1043:20)
    at Server.setupListenHandle [as _listen2] (net.js:1344:14)
    at listenInCluster (net.js:1385:12)
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1494:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:100:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! photoblog@ serve: `webpack-dev-server --config config/develop.config.js --inline --progress --port 8080`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the photoblog@ serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Jason\AppData\Roaming\npm-cache\_logs\2017-11-03T14_18_38_263Z-debug.log
stjarnan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points

I am sorry but I am starting to get dry on ideas. Let's try one thing, could you try starting over again (Sorry, I know this must feel frustrating!), but this time use the node command prompt?

No worries, What is the node command prompt?

stjarnan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points

When you install Node.js on your Windows-computer, you will have a terminal called Node command prompt. Search for 'Node' in your search bar and it should pop up :)

I am in the windows node command prompt, but it seems to only use windows commands. I only know the command line for linux ???

stjarnan I have it working now, thanks for your help.

I'm not sure what the reason for this is. I did two things different. I missed the step where I need to type in the command npm install -g typescript. Andrew has this in the teacher's notes but he never showed this in the video lesson which would be more helpful.

I'm not sure if this fixed the problem, or why it would be needed since typescript only auto-completes the commands?

The other thing I did, is I took the Treehouse npm Basics course before coming back to this. In that course I ran into an error and discovered through the help of a moderator that we needed Python downloaded on our computer for the project. There were no teachers notes, or video instructions telling us to download Python, but thru the help of a moderator the problem was fixed. This is from a different course, so I'm not sure if it has any bearings, but I figured it was worth mentioning.

I'm not sure if Python or Typescript fixed the problems, or possibly it was something else altogether that I'm unaware of,, but it's now running.

stjarnan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points

I am glad you managed to solve it! It could very well be connected to you installing Typescript as Angular uses it by default, and not having Typescript means your code can't be compiled.