How do I tell Angular to install a subset of Clarity's modules?

Question

How do I install a set of Clarity's submodules?

My app is taking a little too long to bootstrap. It looks like one of the reasons is that I am importing ClarityModule in AppModule, and ClarityModule has many submodules and dependencies. I only need to use about a dozen of Clarity's components, so I would like to try importing only a small set of Clarity's submodules. Just importing the submodules doesn't work. So if I put this into AppModule:

import { ClrMainContainerModule } from '@clr/angular/layout/main-container';
...
@NgModule({
imports: [ClrMainContainerModule,
...

The Typescript linter seems to be fine with that, but when I ng serve, I get the following error:

ERROR in ./src/app/Modules/AppModule.ts
Module not found: Error: Can't resolve '@clr/angular/layout/main-container' in 'c:\Users\jzabinski\repos\hachart-client\projects\hachart-view\src\app\Modules'

Subsequent research shows that the error is coming from Webpack. I don't know whether my goal is possible, and if possible, whether I can make changes on the Typescript/Angular side to make the CLI happy, or whether I need to reconfigure Webpack.

I made a Stackblitz example. The error appearing in the Stackblitz version actually involves the use of the submodule's component in AppComponent, and is different from the error that I'm getting back from the CLI, but the root cause seems to be the same: my ignorance of how to import a submodule.

Expected: I need a way to only install a small subset of Clarity's full functionality Actual: I don't know of a way to do that

Answer 1

UPDATE September 17, 2019: Jeremy Wilken answered this question in some comments on other answers: "...we do ship each component as a submodule but Angular CLI tree shaking will drop the unused modules. We publicly export all of our submodules, so... Use import { ClrAccordionModule } from '@clr/angular'; if you really want to import just one component module." My mistake lied in trying to import from the submodule's folder (@clr/angular/layout/main-container) instead of the intended folder (@clr/angular).
But if you're using Ahead of Time compilation, this whole question becomes somewhat moot. See the original answer below.

Original Answer

Outside of the other helpful answers on this post, I found what I consider to be the true root cause; it was embarrassingly mundane. The ClarityModule was being compiled because we were unintentionally using Just In Time compilation. Our production build was using Ahead of Time compilation due to our use of the --prod flag, but I am serving my development build for testing purposes using plain old ng serve. That uses Just In Time by default, as noted in the Angular documentation.

I assumed that the two builds were the same, but that was wrong, and was why we were getting a pause of more than a second when navigating to the app. Once I used ng serve --aot instead of ng serve, there was a long pause in the CLI while factory objects were compiled for all of the templates, and then the app started running more quickly.

In other words, I couldn't really entertain the possibility of using a leaner Clarity build because it just isn't available right now, but moreover, my lack of performant software was happening due to another cause.