Angular CLI全局定义window变量及Quill图片缩放模块报错解决

Let's tackle your two technical problems one by one with clear, actionable steps:

1. Defining Global window.myVar Variables in Angular CLI #

To safely define and use global window variables in Angular (especially with TypeScript), follow these steps:

Step 1: Add TypeScript Type Definitions #

Since TypeScript enforces type checking, you need to declare the new property on the Window interface to avoid compilation errors. Create a typings.d.ts file in your project's src directory (if it doesn't exist already) and add:

declare global {
  interface Window {
    myVar: any; // Replace `any` with your specific type if known
  }
}
export {};

Step 2: Initialize the Variable #

You can initialize the variable in your app's entry point (main.ts) before bootstrapping Angular, ensuring it's available globally:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

// Initialize your global variable
window.myVar = 'Your custom value or object';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Alternative: Use Environment Files (For Config Values) #

If myVar is a config value, you can define it in src/environments/environment.ts and assign it to window in main.ts:

// environment.ts
export const environment = {
  production: false,
  myVar: 'Dev environment value'
};

// main.ts
import { environment } from './environments/environment';
window.myVar = environment.myVar;

2. Fixing Cannot read property 'imports' of undefined in Quill Image Resize Module #

The error occurs because quill-image-resize-module expects window.Quill to be globally available, but Angular CLI's module bundling doesn't expose it by default—even if you add Quill to the scripts array. Here are two reliable fixes:

Option 1: Manually Assign window.Quill in Your Component #

This is a quick fix without modifying webpack configs. Adjust your component code to explicitly set the global Quill reference before importing the resize module:

// MyComponent.ts
import Quill from 'quill';

// Expose Quill globally first
window.Quill = Quill;

// Now import and register the resize module
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);

Option 2: Extend Angular CLI Webpack Config with ProvidePlugin #

For a more scalable solution (especially if you use Quill across multiple components), customize your Angular build to inject window.Quill globally:

1. Install the custom webpack builder:

   npm install @angular-builders/custom-webpack --save-dev
   

2. Create a custom webpack config file (e.g., webpack.extra.js in your project root):

   const webpack = require('webpack');
   
   module.exports = {
     plugins: [
       new webpack.ProvidePlugin({
         'window.Quill': 'quill/dist/quill.js'
       })
     ]
   };
   

3. Update angular.json to use the custom builder:
   Find the architect > build section in your angular.json and replace the default builder with the custom one, then add the customWebpackConfig option:

   "architect": {
     "build": {
       "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": {
           "path": "./webpack.extra.js"
         },
         // ... rest of your existing build options
       }
     },
     "serve": {
       "builder": "@angular-builders/custom-webpack:dev-server",
       // ... rest of your serve options
     }
   }
   

4. Verify your component code:
   You can keep your original component code as is—window.Quill will now be automatically injected by webpack, and the resize module will find it without errors.

Bonus: Check Version Compatibility #

Ensure you're using compatible versions of quill and quill-image-resize-module. Some older versions of the resize module may not work with the latest Quill releases. If issues persist, try downgrading Quill to v1.3.7 (a version known to work well with most resize module variants).

内容的提问来源于stack exchange，提问作者Fares Ayyad