Angular2 Quicky - How to structure your projects

Angular2 Quicky - How to structure your projects

When building large Angular2 Apps, you've to care about how to structure your project. John Papa will of course provide a new style guide in the near future :) (no pressure here, we've our own for ng and ng2).

But already in those early days you've to care about the project structure. Refactoring an entire project structure is #PITA. So think about it before you actually start coding.

The documentation on angular.io provides a good starting point for spikes or to get hands dirty but in my eyes it's a little bit confusing when JavaScript and SourceMaps will be generated side by side of the TypeScript files.

That said and the fact that we always structure our apps by components (also Angular1 apps) I ended up with the following structure.

Source files are located within a dedicated src folder and there is no in place transpiling, so all transpiled bits are moved to dist.

For Angular2 Components, we're arranging them by use case or feature area like login, product/list or product/detail. Other building blocks like services, directives or pipes will go to the corresponding folders.

Take the following list of files and folders as an example.

/dist ( -> ignored in git)
/src
/src/app
/src/app/components
/src/app/components/app
/src/app/components/app/app.ts
/src/app/components/login
/src/app/components/login/login.ts
/src/app/components/product
/src/app/components/product/list
/src/app/components/product/list/list.ts
/src/app/components/product/detail
/src/app/components/product/detail/detail.ts
/src/app/services
/src/app/services/logger.service.ts
/src/app/services/product.service.ts
/src/app/pipes
/src/app/pipes/user.displayname.ts
/src/app/pipes/product.displayname.ts
/src/app/models
/src/app/models/product.ts
/src/app/models/user.ts
/src/app/boot.ts
/src/index.html
/src/styles/
/src/styles/variables.less
/src/styles/main.less
/gulpfile.js
/package.json

I've removed some folders like node_modules, .temp and some configuration files here because they don't matter at this point.

By using this structure I can easily gulp all things to dist and use the transpiled Angular2 app in order to build electron and cordova apps or just exectue it as web app.

Why I published this post?

I've decided to publish this only for firing up the discussion on "how to structure your Angular2 apps".

So it's up to you now :)

Use the comment area below to share your thoughts or describe how you structured your apps.

Comments

comments powered by Disqus