Angularjs 未创建角度组件

我刚刚用降级模块安装了一个混合AngularJS/Angular5应用程序。我已经将一个非常小的组件从AngularJS转换为AngularJS，但它从未被创建过。我在整个组件中放置了console.log，以查看是否调用了某些位，而没有调用其他位。已加载文件，但从未加载组件

我已经读了数百本教程，但我肯定错过了什么

请注意，我在转换组件时走了这么远，意识到它没有被创建，然后停止移植其余的组件。因此，为什么

driverImage

当前不在转换的组件上

下面是一个stackblitz，其中一个测试组件显示它不工作

自举

import * as angular from "angular";

import { downgradeModule } from "@angular/upgrade/static";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { StaticProvider } from "@angular/core";

import { MainAngularModule } from "./app.module";
import "./index.module";

const bootstrapFn = (extraProviders: StaticProvider[]) => {
    console.log("1"); <--- never output!
    const platformRef = platformBrowserDynamic(extraProviders);
    return platformRef.bootstrapModule(MainAngularModule);
};

const downgradedModule = downgradeModule(bootstrapFn);

angular.module('angularJsModule', ['myApp', downgradedModule]);

angular.bootstrap(document, ['angularJsModule']);

index.module（为了简洁起见，去掉了大部分依赖项）

新转换的组件：

import { Component, Input, OnInit, OnChanges } from '@angular/core';
import { IDriver } from "../interfaces/IDriver";

console.log("here"); // --> This is hit

@Component({
    selector: "driver-image",
    template: `<div class="driver-image" ng-style="{'background-image' : 'url('+$ctrl.driverImage+')'}"></div>`
})

export class DriverImageComponent implements OnInit, OnChanges {
    @Input() driver: IDriver;
    @Input() small: boolean;

    constructor() {
        console.log("1"); // --- Not hit
    }

    ngOnInit() {
        console.log("ONINITNINTT"); // --> Not hit
    }

    ngOnChanges() { }
}

---

如果没有Stackblitz，这是很难重现的（顺便说一句，您在控制台中有任何错误吗？）。我只是写下一些建议，你可以试试。如果你告诉我什么有效，我会更新我的答案

而不是从“@angular/platformBrowser”导入{platformBrowser}”改用这个

从'@angular/platformBrowserDynamic'导入{platformBrowserDynamic}（不能完全告诉您区别，但平台浏览器在我的项目中不起作用）

好的，在写这篇文章的时候，我想我找到了答案。你的问题是你没有在Angular 5应用程序中加载应该降级的组件-你想要降级的所有东西仍然需要在Angular 5中正确加载。因此，请尝试将
entryComponents:[DriverImageComponent]
添加到您的App.Module

declarations: [
    BootstrapComponent,
],
entryComponents: [
    BootstrapComponent,
],

编辑：

好的，根据您的评论，您的应用程序似乎还没有启动。您确定正在使用当前使用的页面上的组件吗？如果未使用该组件，则不会加载该组件，也不会引导Angular

在某些情况下，您需要在开始时强制执行此引导

创建一个引导组件

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

@Component({
    selector: 'my-bootstrap',
    template: '',
})
export class BootstrapComponent {}

将其添加到你的App.Module

declarations: [
    BootstrapComponent,
],
entryComponents: [
    BootstrapComponent,
],

通过添加
而不使用Stackblitz，强制将其加载到main index.html中。这很难重现（顺便问一下，控制台中是否有任何错误？）。我只是写下一些建议，你可以试试。如果你告诉我什么有效，我会更新我的答案

而不是从“@angular/platformBrowser”导入{platformBrowser}”改用这个
从'@angular/platformBrowserDynamic'导入{platformBrowserDynamic}（不能完全告诉您区别，但平台浏览器在我的项目中不起作用）

好的，在写这篇文章的时候，我想我找到了答案。你的问题是你没有在Angular 5应用程序中加载应该降级的组件-你想要降级的所有东西仍然需要在Angular 5中正确加载。因此，请尝试将
entryComponents:[DriverImageComponent]
添加到您的App.Module

declarations: [
    BootstrapComponent,
],
entryComponents: [
    BootstrapComponent,
],

编辑：

好的，根据您的评论，您的应用程序似乎还没有启动。您确定正在使用当前使用的页面上的组件吗？如果未使用该组件，则不会加载该组件，也不会引导Angular

在某些情况下，您需要在开始时强制执行此引导

创建一个引导组件

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

@Component({
    selector: 'my-bootstrap',
    template: '',
})
export class BootstrapComponent {}

将其添加到你的App.Module

declarations: [
    BootstrapComponent,
],
entryComponents: [
    BootstrapComponent,
],

通过添加
强制将其加载到main index.html中答案其实很简单，我花了很长时间才看到

与您可能认为的相反，您需要将AngularJS组件注册为指令，而不是组件。
答案其实很简单，我花了很长时间才看到它

与您可能认为的相反，您需要将AngularJS组件更改为注册为指令，而不是组件。
Hi。谢谢你的回答！我已更改为platformBrowserDynamic并添加了entryComponents。。似乎都不管用。有趣的是，如果我将控制台日志放在我的
MainAngularModule
或
bootstrapFn
中，似乎没有执行任何日志。。。我不知道这是不是根本原因？另外，我在控制台中没有错误。好吧，看起来你的Angular 5还没有启动。更新了我的答案，并提出了另一个建议：）尼古拉斯非常感谢你的帮助，但我仍然无法让它工作。。我已经用你最近的建议创建了一个stackblitz。。嗨，克里斯，我也被绊倒了。。。不知道我遗漏了什么：D将您的示例移植到Angular 6并删除了所有不需要的内容。请在您的问题中包含此内容，或者看一看：D现在想知道解决方案^^^您好。谢谢你的回答！我已更改为platformBrowserDynamic并添加了entryComponents。。似乎都不管用。有趣的是，如果我将控制台日志放在我的
MainAngularModule
或
bootstrapFn
中，似乎没有执行任何日志。。。我不知道这是不是根本原因？另外，我在控制台中没有错误。好吧，看起来你的Angular 5还没有启动。更新了我的答案，并提出了另一个建议：）尼古拉斯非常感谢你的帮助，但我仍然无法让它工作。。我已经用你最近的建议创建了一个stackblitz。。嗨，克里斯，我也被绊倒了。。。不知道我遗漏了什么：D将您的示例移植到Angular 6并删除了所有不需要的内容。请随意在你的问题中包含这一点，或者看一看：我现在很想知道答案^^