Angular如何仅在生产环境中条件性导入Kendo UI jQuery文件？

我之前在临时兼容老控件的场景里碰到过几乎一模一样的问题，给你两个靠谱的方案试试：

方案一：用原生Script标签动态加载（避开TypeScript模块问题） #

既然import '@progress/kendo-ui'没法适配动态import语法，那我们换个思路——直接用浏览器原生的脚本加载方式，结合Angular的环境变量做控制：

1. 确认环境变量配置：src/environments/environment.prod.ts里保持production: true，开发环境的environment.ts里为production: false。
2. 修改main.ts，在启动Angular应用前判断环境，生产环境下动态加载Kendo脚本：

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

if (environment.production) {
  enableProdMode();
  // 生产环境下动态加载Kendo UI jQuery文件
  const loadKendo = () => {
    return new Promise((resolve) => {
      const script = document.createElement('script');
      script.src = 'node_modules/@progress/kendo-ui/dist/js/kendo.ui.min.js'; // 可替换为CDN地址
      script.onload = resolve;
      document.body.appendChild(script);
    });
  };

  loadKendo().then(() => {
    platformBrowserDynamic().bootstrapModule(AppModule)
      .catch(err => console.error(err));
  });
} else {
  // 开发环境无需加载，直接启动应用
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
}

这个方法完全绕开了TypeScript的模块识别问题，还能确保Kendo加载完成后再启动Angular应用，避免控件初始化时找不到kendo全局变量的报错。

方案二：修复TypeScript模块声明，使用动态import #

如果你更倾向于用ES模块的动态import方式，那得先解决index.d.ts is not a module的报错：

1. 在项目src文件夹下创建自定义声明文件typings.d.ts，添加以下内容：

declare module '@progress/kendo-ui';

这会告诉TypeScript把@progress/kendo-ui当作合法模块处理，不会再抛出模块错误。

2. 在需要使用Kendo的组件/服务里，结合环境变量做条件导入：

import { environment } from '../environments/environment';

if (environment.production) {
  import('@progress/kendo-ui').then(() => {
    // 这里初始化Kendo控件，比如：
    // $('#my-grid').kendoGrid({ columns: [...] });
  });
}

注意：要确保webpack生产构建时会打包Kendo代码（如果不用CDN的话），还要把控件初始化逻辑放在import的回调里，避免Kendo未加载完成就调用API。

额外优化建议（结合你的背景） #

因为你的项目生产环境是部署在已经导入Kendo的页面中，其实可以进一步优化：生产环境直接复用页面已有的全局kendo变量，不用自己导入；仅在开发环境下导入Kendo依赖。这样能减少生产包体积，还能避免重复加载。

具体操作：

• 开发环境正常安装并导入@progress/kendo-ui；
• 生产环境下，在typings.d.ts里添加全局变量声明：

declare var kendo: any;

之后代码里直接使用kendo即可，TypeScript不会报错，生产环境也完全不用导入Kendo文件，直接复用页面资源。

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