> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/berry-angular/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codedthemes.gitbook.io/berry-angular/integration/to-existing-project.md).

# 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**:

```json
/"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.