How to integrate CoreUI Pro with Angular enterprise apps
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Integrating CoreUI Pro into an Angular enterprise application requires a strategic approach to handle professional components, private registries, and scalable architecture.
With over 25 years of experience in software development and as the creator of CoreUI, I have architected dozens of enterprise-grade dashboards using this exact workflow.
The most efficient and modern solution involves configuring a private registry for the Pro packages and leveraging standalone components for a lean, high-performance bundle.
By following this guide, you will ensure your application is built on a reliable foundation with access to advanced features like the Smart Table.
Integrate CoreUI Pro by configuring your private NPM registry and importing the @coreui/angular-pro modules into your application’s bootstrap process.
Section 1: Private Registry Configuration
Enterprise-grade software like CoreUI Pro is distributed via a private registry. To ensure your CI/CD pipelines and local environment can fetch the packages, you must create an .npmrc file in your project root.
# .npmrc configuration
@coreui:registry=https://registry.coreui.io/
//registry.coreui.io/:_authToken=${COREUI_PRO_TOKEN}
This configuration tells NPM to look for any @coreui scoped packages on our private server. Using environment variables for the COREUI_PRO_TOKEN is a security best practice that prevents sensitive credentials from being committed to your version control system. Once this is set, you can safely run the installation command to pull the professional assets into your node_modules.
Section 2: Installing CoreUI Pro Packages
Once the registry is configured, you need to install the core Angular wrapper and the Pro styles. These packages contain the advanced UI components, specialized icons, and the robust CSS framework used in our Angular Dashboard Template.
# Installation command
npm install @coreui/angular-pro @coreui/coreui-pro @coreui/icons-pro
This command installs the full suite of professional tools. The @coreui/angular-pro package provides the Angular directives and components, while @coreui/coreui-pro contains the foundational SCSS. We also include the professional icon set to give your enterprise app a polished, high-end appearance.
Section 3: Configuring Global Styles with SCSS
Enterprise apps often require deep customization of themes. To facilitate this, use SCSS instead of plain CSS. Open your src/styles.scss and import the CoreUI Pro source files.
// src/styles.scss
// Import CoreUI Pro variables first for customization
@import '@coreui/coreui-pro/scss/functions';
@import '@coreui/coreui-pro/scss/variables';
// Define your enterprise brand colors here
$primary: #2eb85c;
// Finally, import the full CoreUI Pro framework
@import '@coreui/coreui-pro/scss/coreui';
@import '@coreui/icons-pro/css/all.css';
By importing the functions and variables first, you gain the ability to override default theme colors, spacing, and typography before the main framework is compiled. This is the same approach we use in CoreUI to maintain design consistency across large-scale projects while allowing for brand-specific modifications.
Section 4: Registering CoreUI Modules
In modern Angular applications, we prefer using standalone components or targeted module imports to minimize the final bundle size. In your main application file or specific feature modules, import the essential layout components like the Sidebar and Header.
Standalone (recommended) — app.config.ts:
// app.config.ts
import { importProvidersFrom } from '@angular/core'
import {
SidebarModule,
HeaderModule,
FooterModule,
DropdownModule
} from '@coreui/angular-pro'
export const appConfig = {
providers: [
importProvidersFrom(
SidebarModule,
HeaderModule,
FooterModule,
DropdownModule
)
]
}
NgModule-based — app.module.ts:
// app.module.ts
import { NgModule } from '@angular/core'
import { SidebarModule, HeaderModule, FooterModule, DropdownModule } from '@coreui/angular-pro'
@NgModule({
imports: [
SidebarModule,
HeaderModule,
FooterModule,
DropdownModule
]
})
export class AppModule {}
Note: importProvidersFrom is for standalone bootstrapping (app.config.ts). In module-based architecture, add modules directly to the imports array of your NgModule — do not put them inside providers.
This ensures that only the necessary professional logic is loaded into your application. For enterprise apps, this modularity is critical for maintaining performance as the feature set grows.
Section 5: Implementing the Enterprise Layout
The core of any enterprise app is its layout. CoreUI Pro provides a standard structure that includes a responsive sidebar, a sticky header, and a main content area. Using the professional components ensures that complex behaviors like sidebar toggling and mobile responsiveness are handled automatically.
<!-- app.component.html -->
<c-sidebar visible>
<c-sidebar-brand>CoreUI Pro</c-sidebar-brand>
<c-sidebar-nav [navItems]="navItems"></c-sidebar-nav>
<c-sidebar-toggler></c-sidebar-toggler>
</c-sidebar>
<div class='wrapper d-flex flex-column min-vh-100 bg-light'>
<c-header position='sticky' class='mb-4'></c-header>
<div class='body flex-grow-1 px-3'>
<router-outlet></router-outlet>
</div>
<c-footer></c-footer>
</div>
The navItems array should be defined in your component class to drive the navigation dynamically. For icons in the sidebar to render, you must also configure IconSetService — inject it in your root component and register the icon set:
// app.component.ts
import { Component } from '@angular/core'
import { IconSetService } from '@coreui/icons-angular'
import { iconSubset } from './icons/icon-subset'
@Component({ selector: 'app-root', templateUrl: './app.component.html' })
export class AppComponent {
constructor(private iconSetService: IconSetService) {
iconSetService.icons = { ...iconSubset }
}
}
Without this, icons referenced in your navItems will not render. This structure provides a “shell” for your application, allowing your development team to focus on business logic rather than CSS layout bugs.
Section 6: Utilizing the Smart Table
The Smart Table is one of the most powerful features in CoreUI Pro, designed specifically for enterprise data management. It supports filtering, sorting, and pagination with minimal configuration, saving hundreds of hours of manual development.
<!-- data-view.component.html -->
<c-smart-table
[items]="userData"
[columns]="columns"
columnFilter
footer
itemsPerPageSelect
itemsPerPage="10"
pagination
></c-smart-table>
In your TypeScript file, you define the userData array and the columns configuration. The table handles the heavy lifting of UI rendering, state management for filters, and responsive behavior. This is the level of productivity that enterprise teams expect when moving from free tools to professional-grade libraries.
Section 7: Performance Optimization
For enterprise applications with hundreds of routes and components, performance is non-negotiable. CoreUI Pro supports AOT (Ahead-of-Time) compilation and Tree Shaking out of the box. Ensure your angular.json is configured to take advantage of these features during the build process.
// angular.json
{
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
}
Setting buildOptimizer and optimization to true allows the Angular compiler to remove unused CoreUI components from the final bundle. This keeps your application fast for end-users, even when using a comprehensive library like CoreUI Pro.
Best Practice Note:
This is the same approach we use in CoreUI professional templates to ensure stability and speed. Always keep your @coreui packages synchronized in versioning to avoid peer dependency conflicts. For complex state management in enterprise apps, consider pairing CoreUI Pro with NgRx or Signals to maintain a predictable data flow across your professional components.
