CDK styles not being included

[JonnyHeavey]

First of all thank you for the library, it looks fantastic and the documentation is amazing!

I've got my application up and running and the components mostly look correct, as seen in your documentation.

However, my application is missing some CSS styles related to the angular CDK. This is obvious when I use a modal component. The component looks correct, but its positioning is wrong (it doesn't appear in the middle of the screen) and no background 'overlay' is present. On inspecting the DOM, I see that the overlay is created (classes such as .cdk-overlay-container) but these are not styled. When I compare this to your documentation examples, I see that the same DOM element/class has styles (such as position: fixed;). Sorry if this is a mistake on my part, but I'm unable to tell whether this is an issue with my application or a bug with the library.

I can confirm that I have the CDK installed in my application.

[Phil147]

Hi @JonnyHeavey

thanks for the kind words we are very happy to hear that you like the library 🙂

You are right the CDK Styles are not shipped by the library they have to be imported manually. We always recommend to use ng add @aposin/ng-aquila because that adds everything that is needed automatically for you including the CDK styles. If you have done it manually I just saw that in the getting started guide the CDK styles are not mentioned. We should update that.

To solve your problem you can either add @import "@angular/cdk/overlay-prebuilt.css"; to your main styles file usually styles.(sc|c|le)ss or add node_modules/@angular/cdk/overlay-prebuilt.css into the styles property in the angular.json. You could also run ng add @aposin/ng-aquila it just might leave you with some double imports, like the theme file that you already have imported. You could give it a try and see in the diff what changed.

Let us know if that helps 👍

[JonnyHeavey]

Hi @Phil147

Thanks for the swift reply. You're right that I was following the manual install steps, and your suggestion to include the CDK styles has resolved my issue, thank you! I agree that including this in your manual instructions would help others to avoid this.

For more information, I went down the manual install route as when I attempted to run ng add @aposin/ng-aquila I saw a "workspace.projects.get is not a function" error in my terminal (just after the npm package installation step) and the install was left incomplete. Unsure whether this is something wrong with my environment or the process itself. Anyway, I'm all setup for now, thanks again for your support and the library!

[Phil147]

For more information, I went down the manual install route as when I attempted to run ng add @aposin/ng-aquila I saw a "workspace.projects.get is not a function" error in my terminal

Ah, I'd assume you use Angular 11 right? The library is still built with Angular 10. The components should work fine with Angular 11, at least we didn't find any problems. But in the Angular CLI a lot of functions related to schematics were changed and we use these in our ng add schematics so that's probably the error you saw. That's a known issue and the Angular 11 update will be done next were we will update the schematics to the new APIs of the Angular CLI v11. So yeah right now you would have to create an Angular 10 project first that our ng add schematic works and then update to 11. Anyway we need to update the getting started guide regardless.

[JonnyHeavey]

Yeah I was using angular 11, thanks for the explanation and your support with this.