Угловое понижениеКомпонент не создается

Я только что установил гибридное приложение AngularJS / Angular 5 с downgradeModule. Я преобразовал очень маленький компонент из 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 }))
Источник

2 ответа

Решение

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

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

Источник

Без Stackblitz это довольно сложно воспроизвести (кстати, у вас есть какие-либо ошибки в консоли?). Я просто записываю некоторые предложения, которые вы можете попробовать. Если вы скажете мне, что сработало, я обновлю свой ответ

вместо import { platformBrowser } from "@angular/platform-browser"; используйте этот вместо import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; (не могу сказать вам разницу, но платформа-браузер не работает в моих проектах)

Хорошо, пока я пишу это, я думаю, что нашел ответ. Ваша проблема в том, что вы не загружаете компонент, который должен быть понижен в вашем приложении Angular 5 - все, что вы хотите понизить, все равно должно быть правильно загружено в самом Angular 5. Так что попробуйте добавить entryComponents: [DriverImageComponent] к вашему приложению

Редактировать:

Хорошо, основываясь на вашем комментарии, похоже, что ваше приложение даже не загружено. Вы уверены, что используете свой компонент на той странице, которую используете в данный момент? Если компонент не используется, он не будет загружен и 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>

Источник
Другие вопросы по тегам