未创建角度降级组件
Posted
技术标签:
【中文标题】未创建角度降级组件【英文标题】：Angular downgradeComponent not being created 【发布时间】：2019-02-28 04:16:11 【问题描述】：我刚刚使用 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 ))
【问题讨论】：
【参考方案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,
],
通过在<body> 的开头添加<my-bootstrap></my-bootstrap 来强制将其加载到您的主index.html 中
【讨论】：
嗨。谢谢回答！我已更改为 platformBrowserDynamic 并添加了 entryComponents.. 似乎没有一个工作。有趣的是，如果我将控制台日志放在我的MainAngularModule 或bootstrapFn 中似乎没有被执行......我想知道这是否是根本原因？我在控制台中也没有错误。
好吧，看起来你的 Angular 5 甚至没有被引导。用另一个建议更新了我的答案:)
Nicolas 非常感谢您的帮助，但我仍然无法正常工作。我已经根据您最近的所有建议创建了一个堆栈闪电战。angularjs-q1vrpe.stackblitz.io
嗨，克里斯，我也被困住了......不知道我错过了什么：D 将您的示例移植到 Angular 6 并删除了所有不需要的东西。 stackblitz.com/edit/angular-ssxhj2?file=src%2Fmain.ts 随意将其包含在您的问题中或看看 :D 现在对解决方案感到好奇^^【参考方案2】：
答案其实很简单，我花了很长时间才看到它。
与您可能认为的相反，您需要将 AngularJS 组件更改为注册为指令，而不是组件。
【讨论】：
以上是关于未创建角度降级组件的主要内容，如果未能解决你的问题，请参考以下文章
具有输出参数的 Angular 2 降级组件到 Angular 1
将 AngularJS 数组传递给降级的 Angular 7 组件