降级在 angularjs 上下文中使用的角度组件不会渲染

Question

我已经遵循了大多数文章和 SO 帖子，以实现准备迁移的 angularJS 应用程序的基本/标准引导。

import { DoBootstrap, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {downgradeComponent, UpgradeModule} from '@angular/upgrade/static';
import * as angular from 'angular';
import { setAngularJSGlobal } from '@angular/upgrade/static';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';
import { RouterOutlet } from '@angular/router';
import { IncompleteAddressesComponent } from "./incomplete-addresses/incomplete-addresses.component";
import app from '../../angularJs/src/app/index.module.ajs';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [BrowserModule, UpgradeModule, RouterOutlet, IncompleteAddressesComponent],
  providers: [],
  bootstrap: [],
})
export class AppModule implements DoBootstrap {
  constructor(private upgrade: UpgradeModule) {}
  ngDoBootstrap() {
    setAngularJSGlobal(angular);
    // port Angular Environment constants into 1.x AngularJs (deprecates Constants Loader)
    loadConstantsIntoAngularJS();

    this.upgrade.bootstrap(document.documentElement, ['app'], {
      strictDi: true,
    });

    app.directive('incompleteAddresses', downgradeComponent({component: IncompleteAddressesComponent}) as angular.IDirectiveFactory);
  }
}

// TODO: [deprecate] angularJS dependency
function loadConstantsIntoAngularJS() {
  const ngConstants = angular.module('app.constants', []);
  Object.entries(environment.constants).forEach(([name, value]) =>
    ngConstants.constant(name, value)
  );
  console.log(environment.constants);
}

我的角度组件：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'incomplete-addresses',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './incomplete-addresses.component.html',
  styleUrl: './incomplete-addresses.component.css',
})
export class IncompleteAddressesComponent {
  constructor() {
    console.log("AAA: here");
  }
}

只需在我想包含它的 angularJS 模板中像

<incomplete-addresses>

一样使用它。

问题是我可以在 DOM 中看到角度元素，但看不到不完整地址模板的内容（为了测试我只是简单地放置了

<div>Hello</div>

）

我希望在控制台中看到“AAA：这里”，但我没有。 不知何故，这个组件似乎没有初始化......如果您还需要查看其他内容，请告诉我。

我的条目文件中也有这个：

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

我也没有收到控制台错误。

Answer 1

不确定底层机制，但我正在引导 angularJs 应用程序，然后添加降级的组件。

解决方案：

首先添加所有模块，然后引导应用程序