title: Custom video blot for Quill
body: <p>I'm trying to write a custom blot for Quill so that we can add HTML5 video tags to the editor. I have a working version of this code which works fine in development mode but fails to compile when creating the Angular AOT build.</p>
  
  <p>The error I'm getting is</p>
  
  <pre><code>ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (31,26): Cannot find name 'Quill'.
  
  ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (32,22): Cannot find name 'Quill'.
  
  ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (33,21): Cannot find name 'Quill'.
  
  ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (37,22): Property 'cache' does not exist on type 'typeof VideoBlot'.
  
  ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (46,22): Property 'cache' does not exist on type 'typeof VideoBlot'.
  
  ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (67,19): Property 'blotName' does not exist on type 'typeof VideoBlot'.
  
  ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (68,19): Property 'tagName' does not exist on type 'typeof VideoBlot'.
  
  ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (73,22): Property 'cache' does not exist on type 'typeof AudioBlot'.
  
  ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (82,22): Property 'cache' does not exist on type 'typeof AudioBlot'.
  
  ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (103,19): Property 'blotName' does not exist on type 'typeof AudioBlot'.
  
  ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (104,19): Property 'tagName' does not exist on type 'typeof AudioBlot'.
  
  ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (121,20): Property 'blotName' does not exist on type 'typeof SourceBlot'.
  
  ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (122,20): Property 'tagName' does not exist on type 'typeof SourceBlot'.
  
  ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (125,9): Cannot find name 'Quill'.
  
  ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (126,9): Cannot find name 'Quill'.
  
  ERROR in /workspace/workspace/my-app/app/view/common/quillComponent.ts (127,9): Cannot find name 'Quill'.
  </code></pre>
  
  <p>The blot is defined in quillComponent as</p>
  
  <pre><code>    let BlockEmbed = Quill.import('blots/block/embed');
      let Inline = Quill.import('blots/inline');
      let Block = Quill.import('blots/block');
      class VideoBlot extends BlockEmbed {
  
          static create(value) {
              this.cache = {};
              let node = super.create();
              node.setAttribute('controls', '');
              node.setAttribute('controlsList', 'nodownload');
              node.setAttribute('style', 'max-width:720px');
              node.setAttribute('player-source', value.src);
              let src = document.createElement('source');
              src.setAttribute('src', value.src);
              node.appendChild(src);
              this.cache.length = 1;//94 + value.src.length;
              return node;
          }
  
          deleteAt(index: number, length: number) {
              super.deleteAt(0, 1);
          }
  
          length() {
              return 2;
          }
  
          static value(node) {
              return {
                  controls: node.getAttribute('controls'),
                  controlsList: node.getAttribute('controlsList'),
                  style: node.getAttribute('max-width:720px'),
                  src: node.getAttribute('player-source')
              };
          }
      }
      VideoBlot.blotName = 'clbvideo';
      VideoBlot.tagName = 'video';
      Quill.register(VideoBlot);
  </code></pre>
  
  <p>The imports for quillComponent are</p>
  
  <pre><code>import { Component, EventEmitter, Input, Output, ViewChild } from "@angular/core";
  import { GlobalService } from "../../service/global.service";
  </code></pre>
  
  <p>And adding the video to the editor is done through</p>
  
  <pre><code>this.quill.insertEmbed(this.range.index + 1, 'clbvideo', {
                  src: this.urlText
              }, "user");
  </code></pre>
  
  <p>I have tried many, many different ways of importing Quill and the other dependencies into our quillModule but none of them actually work correctly. I tried almost any suggestion from these two:
  <a href="https://stackoverflow.com/questions/41086454/having-problems-extending-quill">Reference 1</a>
  <a href="https://github.com/quilljs/quill/issues/1233" rel="nofollow noreferrer">Reference 2</a></p>
  
  <p>We use webpack and @ngtools/webpack for processing our typescript sources.</p>
  
  <p>If relevant, this is the tsconfig for our AOT build</p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "es5",
      "module": "es2015",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": ["dom","es2015"],
      "removeComments": false,
      "noImplicitAny": false,
      "suppressImplicitAnyIndexErrors": true,
      "typeRoots": [
        "./node_modules/@types"
      ],
      "types": [
        "core-js"
      ]
  
    },
  
    "angularCompilerOptions": {
      "genDir": "aot/",
      "skipMetadataEmit" : true
    }
  }
  </code></pre>
  
  <p>and this is our AOT webpack config</p>
  
  <pre><code>var webpack = require("webpack");
  var helpers = require('./config/helpers');
  var path = require('path');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  var CompressionPlugin = require("compression-webpack-plugin");
  var ngtools = require('@ngtools/webpack');
  const extractSass = new ExtractTextPlugin({
      filename: "./scssStyles.css"
  });
  
  module.exports = {
      entry: {
          'polyfills': './app/polyfills.js',
          'vendor': './app/vendor.ts',
          'app': './app/main-aot.ts'
      },
  
      output: {
          path: helpers.root('prod'),
          filename: "./[name].js"
      },
  
      resolve: {
          extensions: ['.ts', '.js']
      },
  
  
      module: {
          rules: [
              {
                  test: /\.css$/,
                  use: ExtractTextPlugin.extract({
                      fallback: "style-loader",
                      use: "css-loader"
                  })
              },
              {
                  test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                  loader: 'file-loader?name=./assets/[name].[ext]'
              },
              {
                  test: /\.ts$/,
                  loaders: '@ngtools/webpack'
              },
              {
                  test: /\.html$/,
                  loader: 'raw-loader'
              },
              {
                  include: /\.json$/,
                  loaders: ["json-loader"]
              }
          ],
  
      },
  
      plugins: [
  
          new webpack.optimize.CommonsChunkPlugin({
              name: ['app', 'vendor', 'polyfills']
          }),
  
          new ngtools.AotPlugin({
              tsConfigPath: helpers.root('./tsconfig.aot.json'),
              entryModule: helpers.root('./app/app.module.ts#AppModule')
          }),
  
          new ExtractTextPlugin("./styles.css"),
          extractSass,
  
          new webpack.ProvidePlugin({
              $: "jquery",
              jQuery: "jquery",
              "window.jQuery": "jquery"
          })
      ]
  };
  </code></pre>
  
  <p>And this are the quill parts of package-lock.json</p>
  
  <pre><code>"quill": {
    "version": "1.3.2",
    "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.2.tgz",
    "integrity": "sha512-Tudr3tPSPr64J+Fnr8hsNKbi5e2xueyLROmemOIsIsUIeX+WU7LtA22HWRRHr2gGasqxhah2NzFGe9N32eJkMg==",
    "requires": {
      "clone": "2.1.1",
      "deep-equal": "1.0.1",
      "eventemitter3": "2.0.3",
      "extend": "3.0.1",
      "parchment": "1.1.0",
      "quill-delta": "3.6.1"
    },
    "dependencies": {
      "quill-delta": {
        "version": "3.6.1",
        "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.1.tgz",
        "integrity": "sha512-jSD448mqyDevX0FhdjNppMLHl67vXEzZEDjQrtkfDXI6s6e3WJkJOZpYiVhqxLl4HcYNeAhFT+fhAeX8ef7Cew==",
        "requires": {
          "deep-equal": "1.0.1",
          "extend": "3.0.1",
          "fast-diff": "1.1.1"
        }
      }
    }
  },
  
  
  "@types/quill": {
    "version": "0.0.31",
    "resolved": "https://registry.npmjs.org/@types/quill/-/quill-0.0.31.tgz",
    "integrity": "sha512-2Y0Pr5SSNf7kpD4mWMPSYYYyVTLbBNn99DtEYzZ1hlEry1fiWCJYLTYSoGTgPvYiRU4JNRi9LYW0EOV60jN9yA=="
  },
  </code></pre>
  
  <p>FYI: I also tried using the latest version of these.</p>