Angular CLI混合应用迁移AngularJS至Angular遇core.phone模块错误求助

错误原因分析 #

[$injector:nomod] Module 'core.phone' is not available 错误表明AngularJS无法找到名为core.phone的模块，常见触发场景包括：

• core.phone模块未被正确定义或注册
• 模块依赖未在AngularJS主模块中声明
• 降级服务的配置顺序错误
• 打包工具（如Webpack）未正确包含该模块代码

排查与修复步骤 #

1. 确认core.phone模块的定义
   检查AngularJS侧的模块代码，必须明确定义core.phone模块并注册降级服务：

   // 正确定义模块（需传入空依赖数组作为第二个参数）
   angular.module('core.phone', [])
     .factory('phoneService', downgradeInjectable(PhoneService));
   

   注意：如果仅用angular.module('core.phone')会尝试获取已存在的模块，而非创建新模块，这是常见失误。

2. 检查AngularJS主模块的依赖声明
   确保主AngularJS模块将core.phone列为依赖：

   angular.module('yourMainAppModule', ['core.phone', /* 其他依赖 */]);
   

3. 验证ngUpgrade引导顺序
   Angular15+混合应用必须先引导Angular，再通过UpgradeModule引导AngularJS：

   // 在Angular模块的ngDoBootstrap方法中引导AngularJS
   ngDoBootstrap() {
     this.upgrade.bootstrap(document.body, ['yourMainAppModule'], { strictDi: true });
   }
   

   禁止先单独引导AngularJS，否则降级服务无法被AngularJS识别。

4. 排查打包配置（如Webpack）
   确保AngularJS模块代码未被tree-shaking移除，可在angular.json中配置脚本引入，或在TypeScript中显式导入AngularJS文件：

   // 在main.ts或AppModule中导入AngularJS代码
   import './path/to/your/angularjs/app.js';
   

Angular15.2+可用混合应用示例 #

以下是可直接运行的核心代码片段：

1. Angular服务定义与降级 #

// src/app/services/phone.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class PhoneService {
  fetchPhones() {
    return [
      { id: 1, model: 'iPhone 14 Pro' },
      { id: 2, model: 'Google Pixel 7' }
    ];
  }
}

2. Angular模块配置 #

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

@NgModule({
  imports: [BrowserModule, UpgradeModule],
  providers: [PhoneService]
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {}

  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['hybridApp'], { strictDi: true });
  }
}

3. AngularJS模块与控制器 #

// src/app/angularjs/hybrid-app.js
import { downgradeInjectable } from '@angular/upgrade/static';
import { PhoneService } from '../services/phone.service';

// 定义core.phone模块并注册降级服务
angular.module('core.phone', [])
  .factory('phoneService', downgradeInjectable(PhoneService));

// 主AngularJS模块
angular.module('hybridApp', ['core.phone'])
  .controller('PhoneListCtrl', ['phoneService', function(phoneService) {
    this.phones = phoneService.fetchPhones();
  }]);

4. 入口文件与HTML模板 #

// src/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import './app/angularjs/hybrid-app.js';

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

<!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Angular-AngularJS Hybrid App</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body ng-controller="PhoneListCtrl as ctrl">
  <h2>Phone Inventory</h2>
  <ul>
    <li ng-repeat="phone in ctrl.phones">{{ phone.model }}</li>
  </ul>
</body>
</html>

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