混合Angular应用运行报错：Zone重复加载及模块实例化失败

Let's walk through resolving both issues step by step—no jargon, just actionable fixes:

1. Fixing "Zone already loaded" Error #

The root cause here is Zone.js being loaded after AngularJS (and possibly duplicated). Zone.js needs to patch AngularJS's event system before AngularJS initializes to work with Angular's change detection.

Code Changes: #

• Update index.html to load Zone.js first, then AngularJS:

  <head>
    <!-- Load Zone.js BEFORE AngularJS -->
    <script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>
    <!-- Then load AngularJS -->
    <script src="https://code.angularjs.org/snapshot/angular.js"></script>
    
    <!-- Keep your other polyfills and commented code as-is -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
  </head>
  

• Remove the duplicate Zone.js import from main.ts:

  // main.ts
  import app from '../app';
  // DELETE THIS LINE: import 'zone.js';
  import '@angular/platform-browser';
  // ... rest of your imports
  

• Clean up old bundles: Delete your dist folder and rebuild to ensure no leftover Zone.js instances are present.

2. Fixing AngularJS [$injector:modulerr]/[$injector:nomod] Errors #

This happens when the AngularJS app module isn't registered properly before we try to bootstrap it. Let's ensure the module is loaded and accessible:

Code Changes: #

• Verify app.ts is executing: Add a console log to confirm the module is being created:

  // app.ts
  import * as angular from 'angular';
  
  console.log('✅ App.ts executed - creating "app" module'); // Add this line
  
  export default angular.module("app", []).component("jsApp", {
    template: "<p>Hello {{'AngularJS'}}</p>",
    controller: function() {
      console.log("app component started");
    }
  });
  

• Fix Angular component bootstrapping in app.module.ts: You defined ngDoBootstrap() but didn't manually bootstrap the Angular component. Update it to:

  // app.module.ts
  import { NgModule, ApplicationRef } from '@angular/core';
  // ... your other imports
  
  @NgModule({
    imports: [BrowserModule, UpgradeModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
  })
  export class AppModule {
    constructor(private upgrade: UpgradeModule) { }
    
    // Manually bootstrap the Angular component
    ngDoBootstrap(appRef: ApplicationRef) {
      appRef.bootstrap(AppComponent);
    }
  }
  

• Temporarily disable strictDi in main.ts to rule out dependency injection issues (we can re-enable it later if needed):

  // main.ts
  platformBrowserDynamic().bootstrapModule(AppModule)
  .then(platformRef => {
    setAngularLib(angular1);
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    // Remove strictDi for now
    upgrade.bootstrap(document.body, ['app']);
  });
  

• Check file paths: Ensure main.ts correctly imports app.ts (your path ../app looks right if app.ts is in the root directory and main.ts is in app/).
• Update tsconfig.json: Make sure app.ts is included in your TypeScript compilation:

  {
    "include": [
      "app/**/*.ts",
      "app.ts" // Add this line if missing
    ]
  }
  

Final Steps to Test #

1. Delete your dist folder to clear old builds.
2. Rebuild your app with Webpack.
3. Run the dev server and check the console:
   • You should see ✅ App.ts executed - creating "app" module before any errors.
   • The Zone.js error should be gone.
   • Both <my-app> and <js-app> should render their content correctly.

If you still see issues, check the console for the log messages we added—they'll help pinpoint if the app module is being created or not.

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