1

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

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

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

这是一个带有测试组件的 stackblitz，显示它不工作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() { }
}

相关模块.ts

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

2 回答 2

3

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

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

于 2018-10-29T16:18:15.933 回答
1

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

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

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

编辑：

好的，根据您的评论，您的应用程序甚至没有被引导。您确定您在当前使用的页面上使用您的组件吗？如果组件没有被使用，它将不会被加载，Angular 也不会被引导。

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

创建一个引导组件

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

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

将其添加到您的 App.Module

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

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

于 2018-09-25T09:08:57.293 回答