Angular 未创建降级组件

Question

我刚刚设置了一个带有 downgradeModule 的混合 AngularJS / Angular 5 应用程序。我已经将一个非常小的组件从 AngularJS 转换为 Angular 但它从未被创建。我在整个组件中放置了 console.logs 以查看是否调用了某些位而其他位未调用。文件已加载，但组件从未加载。

我已经阅读了数百篇教程，但我一定遗漏了一些东西。

请注意，我在转换组件时走到了这一步，意识到它没有被创建，然后停止移植其余部分。因此，为什么 driverImage 当前不在转换后的组件上。

这是一个带有测试组件的 stackblitz，显示它不工作 https://angularjs-q1vrpe.stackblitz.io/

Bootstrap

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']);

App.Module（主要Angular模块）

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';

@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule
    ],
    declarations: [Ng2TestComponent, DriverImageComponent],
    entryComponents: [Ng2TestComponent, DriverImageComponent]
})

export class MainAngularModule {
    // Empty placeholder method to satisfy the `Compiler`.
    ngDoBootstrap() { }
}

index.module（为简洁起见删除了大部分依赖项）

angular
    .module("myApp", [
        "constants",
        "ngMaterial",
        "ngSanitize", ... ]);

新转换的组件：

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() { }
}

相关modules.ts

import { downgradeComponent } from "@angular/upgrade/static";
...
.component("driverImage", downgradeComponent({ component: DriverImageComponent }))

Answer 1

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

而不是 import { platformBrowser } from "@angular/platform-browser"; 使用这个 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; （不能完全告诉你区别，但平台浏览器在我的项目中不起作用）

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

编辑：

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

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

创建一个 Bootstrap 组件

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

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

将其添加到您的 App.Module

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

通过在 <body>

的开头添加 <my-bootstrap></my-bootstrap 强制将其加载到主 index.html 中

Answer 2

答案其实很简单，我花了很长时间才看到。

与您可能相信的相反，您需要将 AngularJS 组件更改为注册为指令，而不是组件。

Angular 未创建降级组件

Angular downgradeComponent not being created

angularjs

angular-upgrade

angular

angular-hybrid