Angular 2 - FAQ / Commonly asked questions

[juristr]

Hi,

I'd like to create a blog post, collecting and answering some most commonly asked Angular 2 questions and would be happy to get them from you :smile:. I'm curious what puzzles you most. Besides that, your questions will help me get some valuable input for my Angular 2 screencast series I'm currently working on.

So, you're an Angular newbie, or simply getting started with Angular 2? You don't know where to start? Ask your question here, I'll collect them and publish a blog post, hopefully with some hints & answers!

---

Questions

..aggregated out of the comments below

• [ ] Angular 2 build setup\
  • [ ] Are there any starter projects that I could use to get started with my Angular 2 app?
  • [ ] What is SystemJS? JSPM? Webpack?
  • [ ] Should I check in my transpiled files into src-ctrl? Generate to a different directory?
• [ ] What about naming conventions. Is there a styleguide already like there is for Angular 1?
  • Some discussion currently going on here.
  • Community driven effort lead by Minko Gechev
  • 1st draft by John Papa
  • [ ] How do we organize folders and files in angular? #
• [ ] Do we already have open-source component libraries, like the huge AngularJS ecosystem? #
• [ ] What kind of build system should we use? Grunt, gulp ??
  • [ ] Does the angular-cli build command replace gulp? Does it handle bower? #
• [ ] What's a good workflow to create a distribution package that can be deployed in production? #
• [ ] Why do people pass in external directives into the @Component decorator like directives: [...ROUTER_DIRECTIVES]? #
• [ ] In the @Component decorator: what is the difference between the providers array and the viewProviders array?
  See Minko's blog post on this
• [ ] Why does *ngFor and *ngIf have a * star symbol in front?
  Cause it indicates they're registered as a template

(Once I have a couple, I'll publish the post with answers and check them here)

[EmmanuelDemey]

• [ ] Do we already have open-source component librairies, like the huge AngularJS ecosystem ?
• [ ] What the workflow we should follow before deploying our Angular2 into production ?

[juristr]

@Gillespie59 thx for your questions.

What the workflow we should follow before deploying our Angular2 into production ?

What exactly do you mean by that?

[etw3gh]

Does the angular-cli build command replace gulp? Does it handle bower

[juristr]

@openciti :+1: , added to the list.

Does it handle bower

Could you provide further details? What do you mean by "handle"? Doing the install which bower does?

[cpiock]

How to organize folders and files in angular2?

[cpiock]

And naming conventions for files

[juristr]

@cpiock That's already in the list :smile:

[etw3gh]

handle bower as in copy only the required files to the dist foder upon build. replace gulp as in minify and concatenate etc...

[EmmanuelDemey]

@juristr

What the workflow we should follow before deploying our Angular2 into production ?

Does the ng build task is enough when we want to deploy our app in production ? Are minification and concatenation supported by the ng build task. Should we still use gulp or grunt ? ...

[juristr]

@Gillespie59 Oh, I see, you're talking about the CLI project. So you mean like "what's a good workflow to create a distribution package that can be deployed in production".

//update: I'm still a bit skeptical whether the angular-cli will succeed. It will certainly help newbies get started much quicker and that's a big benefit. But when I think about all the features and flexibility Gulp or Webpack give you... But we'll see, the project is still too much in alpha :wink:

[cpiock]

What type of routing should we use # or html5 route?

[cpiock]

Should we use grunt or gulp or something other for angular2?

[juristr]

@cpiock

What type of routing should we use # or html5 route?

That's actually a generic question and not necessarily angular 2 specific. Generally speaking it really depends on the browser's you have to support and how you're backend application is being organized. I tend to prefer the HTML5 pushState api over hashbang URLs, as they're much "nicer" for the end-user. However that has implications on how you deliver your application. Like, the backend server has to acknowledge the frontend-routes and deliver the according startup HTML file (index.html), rather than returning a 404, because obviously no server-side resource would exist for such path.

[cpiock]

should i redirect all generated typescript javascript and sourcemaps to a specified directory?

[juristr]

should i redirect all generated typescript javascript and sourcemaps to a specified directory?

@cpiock There's no right or wrong. For toy examples it obviously doesn't matter. But for larger apps I personally prefer to do so.

[cpiock]

@juristr ok. is there a best practice where to move it or i define my own folder like jsgenrated or something else? and this js files are like dll's. so they don't go to my source repository?

[cpiock]

when i should use names like xy.component.ts and when only xy.ts?

[juristr]

@cpiock: there's Minko's community driven styleguide amd John Papa is about to create one for version 2 as well. Check the links in my starting post to this issue

[ratnabh]

How can I pass my data from shopping component to shopping-list component and add in the ingredients array? I tried but faced some issue here is link to the code

https://gist.github.com/ratnabh/61776fae47421be47113904133d8bc24

[juristr]

@ratnabh Could you create a Stackblitz s.t. I can give it a look? That takes less time on my side to help you out 😉

[ratnabh]

well @juristr i have solved it.Thanks though :-)

[ratnabh]

In my project of building Shopping list i tried to pass a selected data from my header.component.html to app.component.ts via services and then tried to just console.log in app.componwnt.ts .But i see that nothing is being printed and neither i am receiving any error .Here is the gist link to it.Any help will be highly appreciated.Thanks ! No stackblitz please :-) https://gist.github.com/ratnabh/87847c8396a32436b8a751eb5bb08ae8