A long time ago I recorded a video that covered the “anatomy” of an Ionic project, and now I have recorded a video in the same style to cover the anatomy of an Ionic 4 and Angular project.
An intimidating number of files and folders are generated when you create a new Ionic project – all the files and folders play some kind of role, but there isn’t that many that you need to actively be concerned about (most of the time).
The goal of this video is to explore the project structure of an Ionic 4 application and start getting familiar with it. The goal is not to explain the role of everything in-depth, but rather to just touch on the important parts and give you a basic idea of what is happening and where everything lives.
This particular video is the sample lesson from the bonus video course included in my Building Mobile Apps with Ionic & Angular book. If you like what you see, consider grabbing the full package.
If you’re already familiar with past versions of Ionic, the key differences in the structure of an Ionic 4 project are:
- Ionic 4 projects more closely resemble the recommended structure and conventions of a standard Angular project
- An app-routing module file is included to define the routes for your application
- Most of your code will be contained within the src/app folder
- The variables file for styling now use CSS4 variables instead of SASS variables