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

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

0 голосов
/ 24 сентября 2018

Я только что установил гибридное приложение AngularJS / Angular 5 с downgradeModule.Я преобразовал очень маленький компонент из AngularJS в Angular, но он никогда не создается.Я поместил console.logs по всему компоненту, чтобы увидеть, если определенные биты вызываются, а другие нет.Файл загружен, но компонент никогда не загружается.

Я прочитал то, что похоже на сотни учебников, но я должен что-то упустить.

Обратите внимание, что я дошел до преобразования компонента, понялон не создавался, потом перестал переносить остальные.Следовательно, почему driverImage в данный момент отсутствует на преобразованном компоненте.

Вот стэкблитц с тестовым компонентом, который показывает, что он не работает 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 }))

Ответы [ 2 ]

0 голосов
/ 29 октября 2018

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

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

0 голосов
/ 25 сентября 2018

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

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

...