Application structure

I am looking into a typical Ionic project structure. It’s based on an idea that every page has its own folder where all the page parts (specifically components) reside. In reality an application might have pages that mostly use common business components - components that are built on a top of a generic framework. Ionic in this case. Shouldn’t be there a common place for all these business components? Like in AngularJS development I have common folders for all my directives that serve the purpose of being my business component framework. Any idea?


Incase of ionic angular project structure,there will be seperate folder for pages,components,providers etc.When you generate a new page folder will be generates with 4 files

I have created a number of Ionic applications using online examples. None of them creates a structure you are describing.

So what kind of structure did you get from online tutorial? Iam telling about ionic2/ionic3 project is the official ionic docs Start your project


Although I would expect something like this:

Maybe not all these folders under app, but at least components have their own folder which in my mind is critical for a large application.

hey@zolotoy How did you create your project?
Use this CLI for create project

ionic start YourPojectname

The ionic generators are intended for small apps with just a few pages. If you’re using a larger app, the file structure in the official Angular Style Guide is better. You need to modify that style guide a bit, because lazy loading is different in Ionic. I put providers in a separate sub-feature module so they can be registered in app.module.ts,without affecting the parts of the feature module that I want to lazy load later.

I see. So, if I use Angular seed project how am I going to add all this Ionic stuff to it? Manually?

That’s what I do. I created a blank feature module and I copypaste. I should create a generator I suppose, but I haven’t gotten around to it. You could check this out. It’s a different philosophy from mine, and I don’t know whether it’s maintained, but it’s an interesting approach.


I just updated the project’s dependencies:

I used ‘Schematics for Ionic Angular’ it to create the scaffolding for ‘Brew - The Craft Beer App’: