Angular TinyMCE Failed to load model: dom from url models/dom/model.js

Question

I have an Angular 14 project and I'm trying to integrate the open source Tiny MCE editor in my project and I'm getting an error when I add the editor code to the HTML.

node_modules\tinymce\tinymce.min.js:4 Failed to load model: dom from url models/dom/model.js

The rest of the configuration and setup is correct, but it seems I'm still missing something.

I'm using:

• "@tinymce/tinymce-angular": "^7.0.0"
• "tinymce": "^6.3.2"

This is my module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ManagementRoutingModule } from './management-routing.module';
import { PostsComponent } from './posts/list/posts.component';
import { PostDetailComponent } from './posts/post-detail/post-detail.component';
import { HomeComponent } from './home/home.component';
import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
import { ReactiveFormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    PostsComponent,
    PostDetailComponent,
    HomeComponent
  ],
  imports: [
    CommonModule,
    EditorModule,
    ReactiveFormsModule,
    ManagementRoutingModule
  ],
  providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }],
  exports: []
})
export class ManagementModule { }

And my component code:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { BlogService } from 'src/app/services/blog.service';
import { Post, PostResponse } from 'src/app/shared/models/models';

@Component({
  selector: 'app-post-detail',
  templateUrl: './post-detail.component.html',
  styleUrls: ['./post-detail.component.scss'],
})
export class PostDetailComponent implements OnInit {
  post$!: Observable<PostResponse>;
  f: FormGroup = this.initForm();
  
  constructor(
    private router: ActivatedRoute,
    private blogService: BlogService,
    private fb: FormBuilder
  ) {}

  ngOnInit(): void {
    const slug = this.router.snapshot.paramMap.get('slug')!;
    this.blogService.getBySlug(slug)
    .subscribe({
      next: (res) => {
        if (res.data) {
          const data = res.data.attributes as Post;
          this.f = this.initForm(data);
        }
      }
    })      
  }

  initForm(m?: Post) {
    return this.fb.group({
      title: [m ? m.title : ''],
      short_description: [m ? m.short_description : ''],
      slug: [m ? m.slug : ''],
      body: [m ? m.body : '']
    });
  }
}

And the HTML:

<div *ngIf="f">
  <h2>Manage the Blog Post</h2>
  <form [formGroup]="f">
    <div>
      <label>Title</label>
      <input type="text" formControlName="title" class="form-control"/>
    </div>
    <div>
      <label>Slug</label>
      <input type="text" formControlName="slug" class="form-control" />
    </div>
    <div>
      <label>Short Description</label>
      <textarea formControlName="short_description" class="form-control"></textarea>
    </div>
    <editor
      [init]="{
        base_url: '/tinymce'
        
      }"
      formControlName="body"
    ></editor>
  </form>
</div>

This is the error in the browser console...

I followed the docs from this page and still got this error - https://www.tiny.cloud/docs/tinymce/6/angular-pm/

Any suggestions as to why I'm getting this error and how to fix it is appreciated.

Answer 1

I had the same error after upgrading my Angular application to version 15 (from 9 yikes!).

The issue is that tinymce.min.js is trying to load model.js but your server cannot find the file at the given path. I had to edit my angular.json file and add the following under

projects > MyProjectName > architect > build > options > assets

"assets": [
   {
    "glob": "models/**/*",
    "input": "node_modules/tinymce",
    "output": "/"
   }
]

This will tell your server to grab everything from node_modules/tinymce/models and output them at "/".

In your case you might want to remove the base_url property from your HTML (will then default to "/") or modify the angular.json configuration according to your own path preference.