To Existing Project

It describes how to integrate Berry theme to existing project.

Frequently, our customers express a desire to integrate Berry Theme into their existing projects rather than starting entirely new ones. This often presents a challenge, as every project has its own unique architecture and structure. To help address this, we have taken the initiative to select a free Angular project built with ng-bootstrap and have successfully demonstrated how Berry Theme can be seamlessly integrated into it.

Steps to follow

1. Backup Your Project

Before making any changes, create a backup of your existing project. This ensures you can easily revert if something goes wrong.

2. Install Dependencies

Berry Angular ng-bootstrap requires a few additional dependencies.

Run the following commands in your project root:

# Using npm
npm install bootstrap @ng-bootstrap/ng-bootstrap

# Using Yarn
yarn add bootstrap @ng-bootstrap/ng-bootstrap

💡 Tip: Before installing, check your file to prevent version conflicts with existing dependencies.

3. Migrate Theme Files

To apply Berry’s styling and configuration, copy the following files/folders into your project:

Config

  • Source: full-version/src/app/app-config.ts

  • Destination: src/app/app-config.ts

SCSS Directory

  • Source: full-version/src/scss

  • Destination: src/scss

Global Styles

  • Source: full-version/src/style.scss

  • Destination: src/style.scss

⚠️ Important Notes on SCSS Setup:

  • Ensure your angular.json includes the correct style paths:

/"styles": [
  "src/style.scss"
],
"stylePreprocessorOptions": {
  "includePaths": [
    "src/scss",
    "node_modules"
  ]
}

  • Update asset paths if you reference images. Place Berry’s images inside src/assets/images or update SCSS references accordingly..

4. Set Up the App Component

To establish a connection between Berry’s theme and your application, configure your AppComponent as follows:

  1. Copy the configuration file from:

    • Source: seed/src/app/theme/layout/admin/configuration/configuration.component.ts

  2. Paste and adapt it inside your destination project:

    • Destination: src/app/app.ts

⚠️ Common Pitfalls & Fixes

  • SCSS import errors: Make sure includePaths in angular.json contains both src/scss and node_modules.

  • Missing images: Copy all images to src/assets/images or update paths in SCSS.

  • Bootstrap conflicts: If another UI library is already in use, check for style overrides and namespace them where needed.

PreviousIntegrationNextDependencies

Last updated