Question

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

我已经读了数百本教程，但是我一定会缺少一些东西。

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

这是一个带有测试组件的堆叠闪电弹，表明它无法正常工作https://angularjs-q1vrpe.stackblitz.io/

引导程序

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 （MainAngularModule）

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,
],

通过在<my-bootstrap></my-bootstrap的开头添加<body>，强制将其加载到主index.html中。

Answer 2

答案实际上非常简单，我花了很长时间才看到它。

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

Angular downgradeComponent未创建

2 个答案: