- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在将电子应用程序从 AngularJS 迁移到 Angular5,我在需要加载任意模块及其组件并将主要组件动态呈现到 View (它是一个插件系统)的部分中遇到问题。在我的应用程序中,插件是一个包含在我的 angular5 应用程序中呈现的组件的 angular5 模块。
我像这样动态加载组件:
@ViewChild("view", { read: ViewContainerRef })
view: ViewContainerRef;
constructor(
// ...
private compiler: Compiler,
private injector: Injector,
private moduleRef: NgModuleRef<any>
) {}
然后,
const addonModule = addonObject.getModule();
this.compiler
.compileModuleAndAllComponentsAsync(addonModule)
.then(factories => {
const factory = factories.componentFactories.find(
componentFactory =>
addonObject.getViewComponent().name ==
componentFactory.componentType.name
);
if (factory) {
const cmpRef = factory.create(this.injector, [], null, this.moduleRef);
cmpRef.instance.config = {
from: "afd@test.com",
apikey: "dsfkjd"
};
this.view.insert(cmpRef.hostView);
}
});
效果很好,但是当我在模板中添加 Material Component 时,它在 factory.create()
处失败了出现此错误:
模板:
<div>
<button mat-button>test</button>
</div>
错误:
ERROR Error: Uncaught (in promise): Error: StaticInjectorError[Renderer2]:
StaticInjectorError[Renderer2]:
NullInjectorError: No provider for Renderer2!
或
模板:
<div fxLayout="row" fxFlex>
test
</div>
错误:
ERROR Error: Uncaught (in promise): Error: StaticInjectorError[MediaMonitor]:
StaticInjectorError[MediaMonitor]:
NullInjectorError: No provider for MediaMonitor!
Material 模块似乎很好地导入了我的插件模块,否则如果它没有加载我有不同的行为:它忽略指令(例如 <button mat-button></button>
只是一个 <button></button>
没有 Material 效果也没有错误)和 Material 组件抛出错误(例如 <mat-card>test<mat-card>
抛出 Error: Template parse errors: 'mat-card' is not a known element...
)
我尝试以多种不同方式捆绑动态模块:tsc/ngc/ng-packagr/webpack。
当我在另一个使用 ng-cli 构建的应用程序的 NgModule 中正常(静态)导入它时,该包正在工作。
有人知道如何动态呈现具有模板中使用的 Material 组件/指令的组件,例如 fxFlex/mat-button/mat-card 吗?
编辑:我在这里用 SystemJS 复制了错误:https://github.com/thyb/repro-dynamic-loading
Angular :5.0.2
Angular Material :5.0.0-rc1
最佳答案
正如@yurzui 在评论中解释的那样,@angular/* 依赖项被加载了两次。作为一种解决方法,我发现使它工作的唯一方法是使用 window
在应用程序和插件之间共享 @angular 对象(@angular/core
,@angular/common
, @angular/material
).
在我的应用程序 index.html 中:
window.angular = {
core: require("@angular/core"),
common: require("@angular/common"),
material: require("@angular/material"),
...
}
在我的插件中:
const NgModule = (window as any).angular.core.NgModule;
const CommonModule = (window as any).angular.common.CommonModule;
const MatButtonModule = (window as any).angular.material.MatButtonModule;
...
它不是很优雅(再见 tree shaking)但至少它有效...如果有人有更简单的解决方案,我会接受 :)
我在 Gitter 上看到了关于 @angular/element 的讨论这看起来很有前途,因为它创建了独立/自包含的 Web 组件,可以动态注入(inject)而没有我遇到的问题 - https://www.youtube.com/watch?v=ljsOPm4MMEo&feature=youtu.be&t=13m20s .这是一个实验室项目,因此在当前版本中不可用,但已经有一些工作:https://github.com/angular/angular/pull/19469
关于 Angular 5 : Dynamic component loading - StaticInjector error with @angular/core dependencies,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47342589/
我正在 div 中加载一个 php 页面,该页面采用发布的变量来显示正确的内容。它的工作原理是这样的: $(".mainArea").load("page.php", {'folder': 'a'})
我是 AWS 新手。我开始学习 ALB 和 NLB。我知道 ALB 在第 7 层协议(protocol)中工作,而 NLB 在第 4 层协议(protocol)中工作。 谁能解释一下ALB和NLB的实
这是来自 this Article . filter(loaded => !loaded) 有什么作用?我没有在任何地方看到该变量的定义。 我明白这个方法的目的是什么,只是不是那一行。 canActi
我应该在 Constructor 还是 FormLoad() 中加载子表单? 我有一些代码调用在控件中嵌入表单的自定义类。我最初是在 Constructor 之外声明我的子窗体,然后在 FormLoa
目录 1、图解 2、json.loads()用法 3、json.load()用法 4、此外还有一种json.dumps 语法
我正在使用 PhoneGap 为 iPad 编写应用程序,我想在不触发 Safari 或使用 ChildBrowser 等内部 Web 浏览器的情况下加载外部 URL。 我正在使用 PhoneGap
人们经常在他们的(与优化和性能相关的)问题和答案中谈论“重载”。 我试图在典型服务器上的常规 Web 应用程序的上下文中量化这一点(以 SO 及其相当小的基础设施为例),假设它们立即返回(以简化和提高
有人可以写这段代码吗: this.Loaded += (s, e) => this.loaded = true; 分成几行代码以便我可以追溯其含义? 在我的代码示例中没有 s 或 e 吗? 最佳答案
我正在使用 jQuery 的 .load()方法和Loading Page Fragments 。以下是我当前的代码: $("#submit").click(function() { $("#
我想实现的是,当单击图像时,在该图像所在的 div 中,加载了一个包含来自另一个 .html 的其他内容的 div,但我无法完成。 如果我这样做,下面的代码将完美运行: $('#windows_lin
我使用 qt 开发了一个 c++ 库。在本文中,我使用 QSqlDatabase 从 SQLite 数据库中查询信息。注意:我的库在 qt 桌面应用程序中运行良好(我在 Linux 上开发)。 现在我
演示:http://jsfiddle.net/FyrRm/1/ 当我们向下滚动时,您会注意到...在滚动到文章标题到 之后我正在展示一个共享小部件。我正在使用 $(window).on("load"
我在 html(PC) 中使用的图像正确加载,我使用了 img 标签。我已将此文件连同图像一起保存并发送到我的手机,但它不会加载到手机上。我对图像大小或任何东西没有任何问题。我认为它与图像位置有关。
我将 .load() 广泛用于 AJAX 内容。很棒,但如果它做得更多一点,我会喜欢它: 如果为了响应用户操作,我多次调用同一个 div 上的 .load(),我可能会在 div 中得到错误的数据。当
我知道很多方法需要调用它的父类(super class)方法,有些方法不需要, 我正在寻找关于方法调配的东西。它在加载方法中初始化,并且在教程中没有[super load]。 我想知道是不是错了,还是
几个月来,我一直在使用pyGame 2.0.1。今天,我升级到最新版本(2.1.2)后,在尝试加载音频文件时开始出现以下错误:。到目前为止我尝试过的东西:。我使用的是Windows 10、Python
我有一个完整的 angular 应用程序,它使用预先加载。 我想将其转换为延迟加载,但是因为我对所有路线都有保护,而且所有路线都是到一条 protected 主路线的子路线,我不知道是否可以做到这一点
我有一个 React 应用程序,它在 useEffect 中调用我的 API,返回一个用作 imy 图像 src 的 URL 列表。 我正在使用 react-loader-spinner 在加载图像时
我正在使用 Slick.js 逐步加载我的图像我注意到有些图像要么部分加载,要么根本没有加载。 例如,在this site上,有两个画廊:建筑和设计(在导航中)。当用户单击任一图像时,他们会看到该图库
我在我的一个项目中收到此警告。这在调用我的后端 api 时会导致问题,因为它调用了 api 两次。我已经尝试过之前在论坛上发布的关于相同查询的解决方案,但我无法解决这个问题。如果有人能帮助我解决这个问
我是一名优秀的程序员,十分优秀!