Bug 243618 - Angular Seed template requires npm install
Angular Seed template requires npm install
Status: VERIFIED FIXED
Product: web
Classification: Unclassified
Component: HTML Project
8.0
All All
: P3 (vote)
: 8.0.1
Assigned To: Tomas Mysik
issues@web
80patch-candidate
:
: 243623 (view as bug list)
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2014-04-07 07:05 UTC by Vladimir Riha
Modified: 2014-05-29 15:47 UTC (History)
4 users (show)

See Also:
Issue Type: DEFECT
:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Vladimir Riha 2014-04-07 07:05:21 UTC
Seems like Angular Seed template requires running 

$ npm install 

in project root to download all dependencies (see https://github.com/angular/angular-seed ). If user creates a new HTML5 project from this template, it doesn't work out of box anymore. It is described in README.md, but this file is located in project root (not site root) so users won't see it unless they switch to Files...

Since IDE does not support NodeJS, would it be possible to update template's Description field in New Project wizard (step 3: Site Template) and add information that user must run "npm install" or something like that?
Comment 1 Vladimir Riha 2014-04-07 09:12:23 UTC
*** Bug 243623 has been marked as a duplicate of this bug. ***
Comment 2 Tomas Mysik 2014-04-11 10:19:03 UTC
Will make sense, will do it. Thanks for catching that.
Comment 3 Tomas Mysik 2014-04-11 10:26:17 UTC
Done, please verify.

Thanks.

http://hg.netbeans.org/web-main/rev/f4118d383046
Comment 4 Quality Engineering 2014-04-12 05:07:14 UTC
Integrated into 'main-silver', will be available in build *201404120001* on http://bits.netbeans.org/dev/nightly/ (upload may still be in progress)

Changeset: http://hg.netbeans.org/main-silver/rev/f4118d383046
User: Tomas Mysik <tmysik@netbeans.org>
Log: #243618 - Angular Seed template requires npm install
Comment 5 Vladimir Riha 2014-04-14 07:53:47 UTC
Thank you, unfortunately it seems like running only the command won't help... NPM installs the dependencies to project root and index.html then contains in site root following:

<script src="../bower_components/angular/angular.js"></script>

So it references to folder bower_components in project root. But if you run the project, the NetBeans embedded server is not able to serve files from outside of site root:
  - project is running on URL 
   localhost:8383/MyProject/index.html
  - and it tries to load files from e.g.
   localhost:8383/bower_components/angular/angular.js

And this fails... I'm not sure what could be done. One solution would be to move all dependencies from project root to site root and fix links in HTML files but this is a bit unintuitive. Or to "fix" the embedded server to serve files from outside of site root (no idea if that's even possible)


The same issue is with HTML5 sample project AngularJS Phone Catalog
Comment 6 Tomas Mysik 2014-04-14 10:49:04 UTC
Sorry, no idea now what we should do here :/ Removing patch-candidate keyword since it won't be an easy fix.

Thanks.
Comment 7 Geertjan Wielenga 2014-04-27 20:49:50 UTC
Making this a P1. AngularJS is one of our key features in NetBeans 8 and now it is completely broken.

Maybe the solution is not to get the seed template from the AngularJS repository. Maybe, instead of that, we should bundle the seed template into the IDE in such a way that we have control over it and it works.

Whatever the case, we need to fix this ASAP.
Comment 8 Tomas Mysik 2014-04-28 09:21:38 UTC
Not a P1 IMHO, so lowering. Will investigate what we can do with it.

Thanks.
Comment 9 Geertjan Wielenga 2014-04-28 16:20:50 UTC
Until there are instructions for how to workaround this, or an actual fix, the AngularJS feature in NetBeans 8, one of its key features, is broken. P1.
Comment 10 SultanBaby 2014-04-30 13:29:54 UTC
If I may offer a fix, a simple one could be to add a '.bowerrc' file to the project root, and its content should be as follows:

    {
      "directory": "app/bower_components"
    }

This will cause bower components to be installed in the directory specified above. And since 'app' directory is the site root, the project should work fine as expected (after running >> npm install).

To fix the issue of project running straight out of the box, how about enabling the IDE build feature for HTML5 projects? - So that a build can be triggered immediately after project initialisation with simple task of running
    >> npm install

Subsequent builds may be designated to run
    >> npm update    # or whatever

hat's just my two pennies' worth.
Comment 12 Tomas Mysik 2014-05-05 05:14:24 UTC
@SultanBaby: Thanks a lot for your tip! We will look at it.

Thanks.
Comment 13 Tomas Mysik 2014-05-05 05:36:38 UTC
Based on [1], it seems that the current dev build could "work", I guess (we have added an info message). Láďo, could you please check it?

The question is, whether NetBeans should run "npm install" or just inform about it. Any opinions?

Thanks.
[1] https://github.com/angular/angular-seed/commit/daf71f27ba1ae0801f0f3235eaa87598f0912a59
Comment 14 Vladimir Riha 2014-05-05 07:31:52 UTC
Yes, it works with the change if you run npm install (only src pointing to modernizr script is wrong but that's problem in Angular seed, I'll file issue against it).


I think it would be ideal if IDE would run the command and if it fails (npm not found, network issue...) it would show some message. Question is if the new project wizard would wait for npm install to finish or not (it takes some time).
Comment 15 Tomas Mysik 2014-05-05 08:13:05 UTC
(In reply to Vladimir Riha from comment #14)
> Yes, it works with the change if you run npm install (only src pointing to
> modernizr script is wrong but that's problem in Angular seed, I'll file
> issue against it).

Thanks a lot. Not a P2 anymore, so lowering. Also adding 80patch-candidate keyword, let's put it in the next patch of NB 8.0.

> I think it would be ideal if IDE would run the command and if it fails (npm
> not found, network issue...) it would show some message.

I agree. I will update the description of the template (something like "Ensure that npm is correctly installed on your PC.").

> Question is if the
> new project wizard would wait for npm install to finish or not (it takes
> some time).

Well, I will try both cases and choose the better one.

Thanks.
Comment 16 Tomas Mysik 2014-05-06 08:20:53 UTC
Since AngularSeed project is fixed now, the NetBeans support works again. I have reported a new issue for calling "npm install" since it will need a bit more work (we don't want to copy & paste code, we likely prefer a support for NPM command line tool, right?) - see issue #244322.

Thanks.


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2014, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo