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.