Build a certain subfolder instead of the whole project


I’m new in Ionic 3 and I’m a bit confused with its complex build process. We’re creating an app with a folder-by-feature structure, and I’d like to be able to build only a certain folder (a feature) instead of the whole project. This folder will have modules, components, templates, providers, styles, etc.

I tried setting ionic_src_dir in package.json so it points to the folder I want to build, but then it complains because it doesn’t find a main.ts file.

The reason for this is that we want to create features that can be applied to the app but aren’t shipped with the app. We have it working with Ionic 1. In Ionic 1, we bundle all the JS in a single file (using gulp), bundle all the CSS in a single file, and then compress them and the templates into a ZIP file. The app is able to download this ZIP file, uncompress it, add the styles to the app and execute the Javascript code. Everything works fine.

So I want to achieve something similar in Ionic 3. I’d like to be able to apply the build process only to a certain folder, so I end up with a Javascript file that I can dynamically execute in my app. Is that possible? Should I build my own build process?


What you want is not supported with Ionic 2+ as all the JS is pulled into one big file.

The exception is when you use lazy loading, then the lazy loaded module gets its own files.

How do you want to deploy this app? Web app / PWA? Or native app for iOS, Android etc?

Thanks Sujan,

it will be a native app for iOS/Android.

Is there any way to tell the builder I want to lazy load a certain module? Maybe it will be useful for me.

Kind regards,

What “builder” are you talking about?

For lazy loading, read these blog posts:

Hi Sujan,

thank you for the links, I thought I had to do something special to lazy load the modules, I’m already using “IonicPage” to lazy load the pages. I see that it creates a 0.js file, but there are still some references to my component in the main.js file:

var map = {
	"../test/pages/firsttest/firsttest.module": [
            __WEBPACK_IMPORTED_MODULE_2_ionic_angular__["c" /* IonicModule */].forRoot(__WEBPACK_IMPORTED_MODULE_5__app_component__["a" /* MyApp */], {}, {
                links: [
                    { loadChildren: '../test/pages/firsttest/firsttest.module#FirstTestPageModule', name: 'FirstTestPage', segment: 'firstest', priority: 'low', defaultHistory: [] }

Are these references needed for the app to work fine?

When you say “What you want is not supported with Ionic 2+”, do you mean I cannot achieve it even if I create my own building system to encapsulate all the module’s code into its own file?


No, if you mess with the build system it may very well be possible to build what you want. But if I were in your position, I would seriously evaluate if this is really necessary because this will be quite some work.