Я только что установил гибридное приложение AngularJS / Angular 5 с downgradeModule. Я преобразовал очень маленький компонент из 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 (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 }))
1
Chris 24 Сен 2018 в 18:44

2 ответа

Лучший ответ

Ответ на самом деле очень прост, мне потребовалась целая вечность, чтобы увидеть это.

Вопреки тому, что вы думаете, вам нужно изменить компонент AngularJS, чтобы он был зарегистрирован как директива, а НЕ как компонент.

2
Chris 29 Окт 2018 в 16:18

Без 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,
],

Заставьте его загрузиться в ваш основной index.html, добавив <my-bootstrap></my-bootstrap в начале <body>

1
Nicolas Gehlert 25 Сен 2018 в 09:23