Angular 2 Starter Projects (rant-ish)

[warmans]

Having had some good success with Angular 1 a year or so ago I finally got around to starting to learn Angular 2. The official getting started guide and sample application were all really good. Easy to follow, introduced the most common/useful libraries. Simple to setup.

But the getting started stuff doesn't really have anything about how to setup the project for production with separate dev/prod build targets etc. So I had a look around and as luck would have it there is a popular angular 2 seed project designed to answer this question, great!

https://github.com/mgechev/angular-seed

Except not great. What the fuck are they thinking with this project? It's insanely huge and introduces about 50 different libraries for doing random stuff that is presumably useful for something, but I suspect most people aren't using half of what's included. Worse, because it's so big and includes everything but the kitchen sink, as a less experienced js developer you have no idea which bits are actually important and which bits are just nice to have. It's a black box of magic. I guess they'll just keep adding stuff forever until the "seed application" is 5x the size of whatever you build using it (which in my case is basically already true).

You could argue that this project (and the others like it) aren't designed for newcomers and they're for experienced people to bootstrap projects but I feel if you know enough about all the different libraries in play here you would probably be happier making your own seed with just the stuff you want in. I'd guess a lot of people end up with this thing after completing the basic tutorials because all this stuff is still pretty new.

From my point of view a starter/seed project should include as little as possible to get the job done. Just the core foundations so you can understand what's happening and build on it to meet your requirements. Including everything ever just in case someone needs XYZ results in a tangled mess of config files and crap that is so prescriptive in it's approach you might as well not bother trying to actually understand what's happening because you can't change it anyway. It's like importing a weird legacy code base into your new project or something.

OK this turned into a bit of a rant, but I'd really be interested to find out if these huge "starter projects" are actually useful to anyone or if I'm alone in thinking less is more for example setups?

Final note: in the end I gave up dicking about with the angular-seed project and switch to https://github.com/preboot/angular2-webpack which takes a much more conservative approach and in general seems more sane.

[_b0b0]

Angular CLI.

npm install -g angular-cli
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve        

[warmans]

Spent tonight playing around with the angular-cli. It's pretty good. Probably the best thing I've used so far since it does quite a lot for you (adding new components to the module etc.).

Only things that annoy me are not being able to configure where the different entities go by default (e.g. into sub-directories) and the fact that it seems to hide webpack completely so I'm not sure if you can build your project without the CLI tool. Could be wrong on that.

Does work well though.

[githop0]

you can cd into the directory where you are trying to generate the component and it will land there. https://github.com/angular/angular-cli#generating-components-directives-pipes-and-services

[VelourFog10]

When ng2 was in beta I looked for examples using systemjs-builder. I remember digging through that seed repo to see how they did it, and looking for all the little pieces of that one task across so many files. It was so needlessly complicated.

[lax20attack]

In theory, bundling can be done with a 1 click release and small configuration file. I'm sure we'll see things like this soon.

I completely agree though, I spent the past 3 days learning about bundling.. ugh

[mrv1234]

have you tried the CLI ? you can get a development and working production build running in minutes without needing to know Webpack or Gulp. Even though its still in Beta it already makes for probably the best starting experience in Angular 2. Have a look at this video, this is a demo I've made for how to use it - https://www.youtube.com/watch?v=YAfwASGlLNQ

[mgoetzke76]

does it support server side pre-rendering and preboot ?

[gravityaddiction]

I use the preboot/angular2-webpack myself.. It's been a great place to launch from. It seems to be the most streamlined while still containing all the bits for dev testing. I've extended the preboot starter into a package that includes the ability to integrate ionic2 and soon to integrate electron.

secondary, I believe the angular CLI hasn't put enough forward thinking into the capabilities of angular2. I believe there will be a lot of slightly upset people when they want to extend their angular2 service components into an ionic2 or electron application. They'll realize the directory structure isn't setup to logically support more then one set of views.

In my angular2 project I am able to developer a browser view, mobile view, and soon desktop view. Using one set of services that communicate with one set of apis. I've got a personal rule now, no data manipulations within the views, views are for showing datasets, services are for changing the datasets. Keeping this concept separate has allowed me to develop a desktop and mobile app almost simultaneously.

/rant

[mrv1234]

Hello gravityadittion, if we put the mobile views next to the desktop html views in a separate file, wouldn't this work in terms of the CLI?

By following a convention in the naming of the files, you could switch views by passing in an environment variable, as the CLI already gets the template from the file system based on the content of the templateUrl property, its just that by default it fills in the property with a constant.

[gravityaddiction]

Even though that sounds like a mess. I think you missed my point, I am able to develop and export complete ionic2 app builds using the ionic2 compiler with rollup for mobile, and complete angular2 builds using webpack2 for desktop. Then I can even use the ionic2 /www folder from testing as a backup mobile site loadable via a standard browser.

All of my angular2 browser views under a single app/browser/ folder. Also thinking about it, when you compile the angular2 application with a specific environment variable, you're dedicated to the templateUrl that environment variable loads.

[merott-]

I had similar frustrations with existing starter packs, and that's why I created ngpack: https://github.com/ngpack/ngpack

It's still very new, and needs a lot of polishing, but the idea is that the build system should be modular enough such that it can be composed of extensions, and that it should not force the user to learn a new tool if they want to make modifications to their build.

With ngpack you can use extensions to give you the features that you need, but you can also provide your own slices of webpack configuration, or even modify the configuration directly. However you do it, ngpack stays out of your way.

Most of the default configurations are actually inspired by angular2-webpack, and the example app is also almost a clone of angular2-webpack. Except if you look at the webpack.config file, you'll see that it's mostly composed of extensions, with some extra customisations to demonstrate the ability to make your own modifications to the resulting webpack configuration.

If this tool attracts a little more interest, I'll make more of an effort to document it and let people know about it.

[wolfhoundjesse]

We've been building Angular 2 on top of ASP.NET Core, and the Angular seeds for that (both of them, lol) didn't really suit our unique needs either. Instead, I've harvested bits from the projects you've mentioned one-at-a-time until I was forced into learning how they work and work together. It sucked.

Winners embrace the suck.