---
title: "Lazy-loading TinyMCE in Angular"
description: "A guide on integrating the TinyMCE package into an Angular application."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/angular-pm/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/angular-pm/index.md"
version: "latest"
last_updated: "2026-07-15T23:26:40Z"
tokens: 851
---
# Lazy-loading TinyMCE in Angular

This guide shows how to integrate TinyMCE in an Angular application using the [TinyMCE Angular component](https://github.com/tinymce/tinymce-angular).

The steps below use standalone components. If using Angular Modules, see [Angular Modules](#angular-modules).

## Prerequisites

This procedure requires [Node.js (and NPM)](https://nodejs.org/).

## Procedure

1. From a terminal or command prompt, install the [Angular CLI Tool](https://angular.dev/tools/cli) globally.

```sh
npm install -g @angular/cli
```
2. Create a new Angular project named `tinymce-angular-demo` using default settings and without Git initialization.

```sh
ng new --defaults --skip-git tinymce-angular-demo
```
3. Navigate into the project directory and install `tinymce-angular`.

```sh
cd tinymce-angular-demo && npm install @tinymce/tinymce-angular
```
4. Install the `tinymce`.

```sh
npm install tinymce
```
5. Update the root component `app.component.ts` to import `EditorComponent` component.

```ts
import { Component } from '@angular/core';
import { EditorComponent } from '@tinymce/tinymce-angular';

@Component({
  selector: 'app-root',
  imports: [EditorComponent],
  template: `
  <h1>TinyMCE 8 Angular Demo</h1>
  <editor
    [init]="init"
    licenseKey="gpl"
  />
  `
})
export class AppComponent {
  init: EditorComponent['init'] = {
    plugins: 'lists link image table code help wordcount'
  };
}
```
6. There are two options for including TinyMCE into an application:

  1. Lazy load TinyMCE using the provided `TINYMCE_SCRIPT_SRC` dependency provider.

```ts
import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';

@Component({
  /* ... */
  standalone: true,
  imports: [EditorComponent],
  providers: [
    { provide: TINYMCE_SCRIPT_SRC, useValue: '/tinymce/tinymce.min.js' }
  ]
})
```
  2. Add the relative path to TinyMCE to the `scripts` array in angular.json`.

```json
"build": {
  "options": {
    // ... other options
    "scripts": [
      "<path_to_source_tinymce>/tinymce.min.js"
    ]
  }
}
```
7. Then update `angular.json` to include TinyMCE and other components as `assets`. This will make them available to the application as static assets.

```json
"assets": [
  {
    "glob": "**/*",
    "input": "<path_to_source_tinymce>/tinymce",
    "output": "/tinymce"
  }
]
```
8. Update the `base_url` and `suffix` options to configurate the location of other components like skins, icons, plugins, etc.

```ts
export class AppComponent {
  /* ... */
  init: EditorComponent['init'] = {
    /* ... */
    base_url: '/tinymce', // Root for resources
    suffix: '.min'        // Suffix to use when loading resources
  };
}
```
9. Run the Angular a development server

```sh
ng serve
```

## Other resources

- For examples of the TinyMCE integration, see: [the tinymce-angular storybook](https://tinymce.github.io/tinymce-angular/).
- For guides on integrating TinyMCE premium plugins, see: [Using premium plugins](../bundling-plugins/#using-premium-plugins).
- For information on customizing:

  - TinyMCE integration, see: [Angular framework Technical Reference](../angular-ref/).
  - TinyMCE, see: [Basic setup](../basic-setup/).
  - The Angular application, see: [the Angular documentation](https://angular.dev/).