Just getting started... trying to do step 2 of the Hero editor and I'm stuck

[Patrick Caillouet]

I'm completely new to git, angular, node, npm, typescript... hell even typing commands on command prompt. It seems the instructions at the angular website assume WAYYY to much about what people know and leave out all kinds of assumed steps. I'm doing this on Windows 10.

I'm trying to do the Hero Editor and I'm stuck here: https://angular.io/docs/ts/latest/tutorial/toh-pt1.html

I installed git, node, and npm. Managed to clone the "quickstart" project.... but when I try the part "Keep the app transpiling and running" by typing "npm start".....  I get crazy errors in the command prompt.

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\Ryan\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start' ]
2 info using n...@4.0.5
3 info using no...@v6.9.4
4 verbose stack Error: ENOENT: no such file or directory, open 'C:\Users\Ryan\Desktop\PROJECTS\PhoneFusion\2.0\learnangular\quickstart\package.json'
4 verbose stack     at Error (native)
5 verbose cwd C:\Users\Ryan\Desktop\PROJECTS\PhoneFusion\2.0\learnangular\quickstart
6 error Windows_NT 6.1.7601
7 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Ryan\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
8 error node v6.9.4
9 error npm  v4.0.5
10 error path C:\Users\Ryan\Desktop\PROJECTS\PhoneFusion\2.0\learnangular\quickstart\package.json
11 error code ENOENT
12 error errno -4058
13 error syscall open
14 error enoent ENOENT: no such file or directory, open 'C:\Users\Ryan\Desktop\PROJECTS\PhoneFusion\2.0\learnangular\quickstart\package.json'
15 error enoent ENOENT: no such file or directory, open 'C:\Users\Ryan\Desktop\PROJECTS\PhoneFusion\2.0\learnangular\quickstart\package.json'
15 error enoent This is most likely not a problem with npm itself
15 error enoent and is related to npm not being able to find a file.
16 verbose exit [ -4058, true ]

Can I really be the only person who gets stuck at step 1 of this thing?  PLLLLEEEASE HELP Me

[Sander Elias]

Hi Patrick,

I just tried it on my W10 machine, and the steps just work. This might be that my setup is configured the right way. Here is some information on how to set up a dev environment on windows. Not angular related at all.

If you think that's a bit much, you might give this a try:

from your command line type:

npm install --global windows-build-tools

That will take care of most issues you will have with developing with nodeJS on windows.

If you still have problems, don't hesitate to ask!

Regards

Sander

[Patrick Caillouet]

Hi thank you for your help. I installed the windows-build-tools and retried everything... not sure what exactly it was but I think that helped as I got it working thank you!

Now that I have your attention :)

Do most people begin with the quickstart app? or do they use the Angular CLI (https://cli.angular.io/) to do the "ng new myapp"? What are the differences?

Also, I managed to work through the Hero editor... and 1 thing that I was a little frustrated to see left out was how exactly do deploy the app.  After some stackoverflow discussions... I discovered I needed to use the Angular CLI to do "ng build --evn-prod". Is that correct? When I try to build the new app i created by doing "ng new myapp", it does indeed work... but only after I make a change in the "index.html" to make <base href="/"> become <base href="./">. Also this barebones app that simply says "app works", has 3 MBs of javascript. Is that right?

[Sander Elias]

Hi Patrick,

Those are a bit different. Quickstart has been build around systemJS, wich basically a tool that makes the browser know what to do with modules (load them when asked for.) This sounds nice, but you end up with 2500+ modules to load, and this slows down tremendously. Even on http2. (ok,ok, not really black-white, and I'm simplifying and cutting corners here!)

This is not a problem if you want to do a small prototype, and it's a very flexible way of building. However, turns out, that for production you need overly complex configuration/tooling.

On the other side is Angular-CLI. This is a build tool and generator in one. It takes care of all the nasty tooling stuff, and building for production is as simple as adding a --prod to the command at hand. Also, it helps you during the whole lifetime of the application. Adding a module, components/whatever you need, CLI will help. Want to utilise AOT? again, CLI will help, and so on. The list is getting longer with every release.

Takeaway: use the CLI. And stay clear of other build tools as long as you possibly can. For most projects, that will be the entire lifetime of those. 

The TOH, was build before the CLI was in a usable state, and is a demo project, it was never meant to be build for production. (euhm, last time I looked TOH didn't use CLI, but that might have been changed!)

Regards
Sander

[Patrick Caillouet]

WOW O WOW thank you clarifying... This makes MUCH more sense than swimming in the dark lost. They really need to copy-paste what you wrote as an excerpt at the end of the tutorial, because I bet more people like me are set on a bad path.

[SternCo]

I also started off with the quickstart tutorial. I find the new one (Aug 2016 used to be a lot messier) much more understandable und well explained. However, I have not come to actually deploying an app yet, but at this point I did find the CLI explanation very useful. Looking forward to checking it out.