目前我正在尝试将angular js项目迁移到angular（12+）。我创建了第一个angular组件，并尝试将其降级，以便它们可以使用angular js。但是当页面加载时，Angular 组件将被忽略，并且不会抛出任何错误（无论是在使用webpack构建时，还是在加载页面时）。浏览器只渲染按钮栏和工具栏（仍然使用angular js实现）。
这是我的webpack.config.js：

module.exports = {
    devtool: "eval-cheap-source-map",
    mode: 'development',
    entry: "./main.ts",
    output: {
        filename: "./angular/bundle/bundledProjectModule.js"
    },
    resolve: {
        extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    module: {
        rules: [
            //all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
            { test: /\.tsx?$/, use: "ts-loader" }
        ]
    },
    stats: {
        logging: 'verbose'
    }
};

这是我的tsconfig.json：

{
  "compilerOptions": {
    "baseUrl": "",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "ESNext",
    "target": "es5",
    "sourceMap": true,
    "moduleResolution": "node",
    "lib": ["dom", "es2016", "es2019.object"]
  },
  "typeRoots": [
    "./node_modules/@types"
  ],
  "exclude": [
    "node_modules"
  ]
}

这是我的主要观点

// Angular JS modules
import 'angular';
import 'angular-resource';
import 'angular-animate';
import 'angular-aria';
import 'angular-messages';
import 'angular-sanitize';
import 'angular-route';
// LEARN modules
import './learn.main'
import './angular/generalComponents/button';
import './angular/generalComponents/cell-items';
import './angular/generalComponents/filter/search-bar';
import './angular/generalComponents/filter/date';
import './angular/generalComponents/view-fields';
import './angular/generalServices';
import './modules/project';
import './modules/project/view/linked-modules';
import './modules/project/view';
import {projectRootViewComponent} from "./modules/project/view/project-root-view.component";
import {viewExternalLinkComponent} from "./angular/generalComponents/view-fields/view-external-link.component";
import {viewComponent} from "./angular/generalComponents/view-fields/view.component";
import {viewUserComponent} from "./angular/generalComponents/view-fields/view-user.component";
// Modules necessary for the browser
import './polyfills';
// Angular Material modules
import {MatFormFieldModule} from "@angular/material/form-field";
import {MatInputModule} from "@angular/material/input";
import {MatButtonModule} from "@angular/material/button";
import {MatIconModule} from "@angular/material/icon";
//Angular modules
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {downgradeModule, UpgradeModule} from '@angular/upgrade/static';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {FormsModule} from "@angular/forms";
@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule,
        MatFormFieldModule,
        MatInputModule,
        MatButtonModule,
        MatIconModule,
        FormsModule
    ],
    declarations: [
        projectRootViewComponent,
        viewExternalLinkComponent,
        viewComponent,
        viewUserComponent
    ],
    entryComponents: [
        projectRootViewComponent,
        viewExternalLinkComponent,
        viewComponent,
        viewUserComponent
    ]
})
export class AppModule {
    // Override Angular bootstrap so it doesn't do anything
    ngDoBootstrap() {
    }
}
// Bootstrap using the UpgradeModule
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
    console.log("Bootstrapping in Hybrid mode with Angular & AngularJS");
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.body, ['learn']);
    console.log("Bootstrapping in Hybrid mode with Angular & AngularJS");
});

此处是添加Angular 组件（项目根视图）的位置：

{% extends "skeleton.twig" %}
{% set config_module = config_module_project %}
{% set page_name = 'View' %}
{% block content %}
  <div layout-align="center start" flex="90">
    {% include "buttonbar/project/view.twig" %}
    <project-root-view></project-root-view>
  </div>
{% endblock %}

这就是组件的实现：

import * as angular from "angular";
import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
import {downgradeComponent} from "@angular/upgrade/static";
@Component({
    selector: 'project-root-view',
    templateUrl: '/learn/templates/0/modules/project/view/project-root-view.html'
})
export class projectRootViewComponent implements OnInit{
    data = {"id":"1","name":"name","opportunity_id":"12345"};
    project = {};
    projectId: string;
    id: string;
    ngOnInit() {
        this.project = this.data;
        this.projectId = this.data.id;
        if(this.data.opportunity_id) {
            this.id = this.data.opportunity_id;
        }
        else {
            this.id = this.data.id;
        }
    }
}
angular.module('learn').directive('project-root-view', downgradeComponent({component: projectRootViewComponent}));

这是组件的模板：

<div layout="row" layout-align="space-around start" flex>
  <div layout="column" flex=100 flex-gt-md=85 flex-gt-lg=75>
    <div class="md-whiteframe-3dp oe-frame-l">
      <h1 class="oe-title">Project<small> - {{id}}</small></h1>
      <div layout="row" flex>
        <view [labelName]="'Project'" [data]="project.name" flex></view>
        <view [labelName]="'Opportunity ID'" [data]="project.opportunity_id" flex></view>
      </div>
    </div>
  </div>
</div>

这是（次）Angular 组件（称为视图）：

@Component({
    selector: 'view',
    templateUrl: './angular/generalComponents/view-fields/view.html'
})
export class viewComponent implements OnInit {
    hasValue = false;
    empty_placeholder = "n/a";
    label: string;
    value: string;
    @Input() labelName;
    @Input() data;
    ngOnInit() {
        this.label = this.labelName;
        if(this.data) {
            this.value = this.data;
            this.hasValue = true;
        }
        else {
            this.value = this.empty_placeholder;
        }
    }
}
angular.module('learn').directive('view', downgradeComponent({component:viewComponent}));

和视图组件的模板：

<div class="oe-input-wrapper" flex>
    <mat-form-field class="md-block oe-input-view-nb" flex>
        <mat-label>{{ label }}</mat-label>
        <textarea matInput disabled *ngClass="{'empty': !hasValue}">{{ value }}</textarea>
    </mat-form-field>
</div>