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.
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
For Angular2 Components, we're arranging them by use case or feature area like
product/detail. Other building blocks like
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
.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
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.