---
title: "Using the TinyMCE .zip package with the Angular framework"
description: "A guide on integrating a .zip version of TinyMCE into the Angular framework."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/angular-zip/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/angular-zip/index.md"
version: "6"
last_updated: "2022-04-07T05:31:36Z"
tokens: 1159
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/angular-zip/).
# Using the TinyMCE .zip package with the Angular framework
The [Official TinyMCE Angular component](https://github.com/tinymce/tinymce-angular) integrates TinyMCE into Angular projects. This procedure creates a [basic Angular application](https://angular.io/guide/setup-local) containing a TinyMCE editor.
For examples of the TinyMCE Angular integration, visit [the tinymce-angular storybook](https://tinymce.github.io/tinymce-angular/).
## Prerequisites
This procedure requires [Node.js (and npm)](https://nodejs.org/).
## Procedure
1. On a command line or command prompt, install the [Angular CLI Tool](https://angular.io/cli) package.
```sh
npm install -g @angular/cli
```
2. Create a new Angular project named `tinymce-angular-demo`.
```sh
ng new --defaults --skip-git tinymce-angular-demo
```
3. Change into the newly created directory.
```sh
cd tinymce-angular-demo
```
4. Install the `tinymce-angular` package and save it to your `package.json` with `--save`.
```sh
npm install --save @tinymce/tinymce-angular
```
5. Using a text editor, open `/path/to/tinymce-angular-demo/src/app/app.module.ts` and replace the contents with:
```ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { EditorModule } from '@tinymce/tinymce-angular';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
EditorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
6. Using a text editor, open `/path/to/tinymce-angular-demo/src/app/app.component.html` and replace the contents with:
```tsx
TinyMCE 6 Angular Demo
```
7. Add the `tinymce` global to the application by: Deploying TinyMCE independent of the Angular application, or bundling TinyMCE with the Angular application.
- Deploy TinyMCE independent of the Angular application
To use an independent deployment of TinyMCE, add a script to either the `` or the end of the `` of the HTML file, such as:
```html
```
To use an independent deployment of TinyMCE with the create a Angular application, add the script to `/path/to/tinymce-angular-demo/src/app/app.component.html`.
- Bundling TinyMCE with the Angular application using a module loader (such as Webpack).
> **Important:** Tiny does not recommend bundling `tinymce` and `tinymce-angular` with a module loader. Bundling these packages can be complex and error prone.
To bundle TinyMCE using a module loader (such as Webpack, Rollup, or Browserify), import or require the `tinymce` package, followed by the `tinymce-angular` package, then the other required TinyMCE-related imports.
Example of bundling:
```js
/* Add the tinymce-angular wrapper to the bundle */
import { Editor } from '@tinymce/tinymce-angular';
/* For instructions on bundling TinyMCE, see the Bundling TinyMCE documentation. */
```
For instructions on bundling TinyMCE, see: [Bundling TinyMCE](../introduction-to-bundling-tinymce/).
8. Test the application using the Angular development server.
- To start the development server, navigate to the `tinymce-angular-demo` directory and run:
```sh
ng serve --open
```
- To stop the development server, select on the command line or command prompt and press *Ctrl+C*.
## Deploying the application to a HTTP server
The application will require further configuration before it can be deployed to a production environment. For information on configuring the application for deployment, see: [Angular Docs - Building and serving Angular apps](https://angular.io/guide/build) or [Angular Docs - Deployment](https://angular.io/guide/deployment).
To deploy the application to a local HTTP Server:
1. Navigate to the `tinymce-angular-demo` directory and run:
```sh
ng build
```
2. Copy the contents of the `tinymce-angular-demo/dist` directory to the root directory of the web server.
The application has now been deployed on the web server.
> **Note:** Additional configuration is required to deploy the application outside the web server root directory, such as http://localhost:/my_angular_application.
## Next Steps
- For examples of the TinyMCE integration, see: [the tinymce-angular storybook](https://tinymce.github.io/tinymce-angular/).
- 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.io/docs).