Angular CLI混合开发AngularJS与Angular12出现import报错如何解决？

1. 修正angular.json scripts配置 #

• 立刻将所有src/app/下的TS文件（含app.module.ajs.ts、phone.service.ts等）从angular.json的scripts数组中移除，该数组仅支持加载第三方UMD格式纯JS脚本，不能放置项目源码TS文件，CLI不会对该数组内的TS文件做模块化编译，直接加载就会触发import语法报错
• AngularJS旧模块统一通过主入口main.ts或根Angular模块导入，不要走scripts配置加载

2. 调整AngularJS模块导入逻辑 #

• 将AngularJS入口文件app.module.ajs.ts改为模块化导出，文件末尾添加代码：

export default angular.module('phonecatApp', [/* 你的AngularJS依赖列表 */])

• 在根Angular模块app.module.ts中导入AngularJS模块，正确配置UpgradeModule引导逻辑，参考代码：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import phoneCatAjsModule from './app.module.ajs';
import { PhoneService } from './phone.service';

@NgModule({
  imports: [BrowserModule, UpgradeModule],
  providers: [PhoneService],
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {}
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, [phoneCatAjsModule.name], { strictDi: true });
  }
}

3. 回滚TS与包配置到默认值 #

• 把之前修改的tsconfig.json配置全部恢复为Angular12 CLI生成的默认值：module设为es2020、target设为es2015，删除package.json中添加的"type": "module"配置，Angular12默认用CommonJS处理Node端脚本，添加该配置会触发兼容冲突
• 检查tsconfig.app.json的include数组是否覆盖了所有src/**/*.ts文件，不要漏掉业务代码文件

4. 补充服务降级逻辑 #

• 如果需要在AngularJS代码中调用新的Angular版PhoneService，需要用downgradeInjectable完成服务降级后注册到AngularJS模块，参考代码放在app.module.ajs.ts中：

import { downgradeInjectable } from '@angular/upgrade/static';
import { PhoneService } from './phone.service';

phoneCatAjsModule.factory('phoneService', downgradeInjectable(PhoneService) as any);

5. 清理冗余声明 #

• 不要在Angular原生的服务、组件文件中添加declare var angular: angular.IAngularStatic;全局声明，该声明仅在AngularJS相关的模块化文件需要时添加，原生Angular代码添加该声明会触发语法报错

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