相关疑难解决方法(0)

目前我正在开发一个托管在客户端服务器上的项目.对于新的"模块",无意重新编译整个应用程序.也就是说,客户端希望在运行时更新路由器/延​​迟加载的模块.我已经尝试了几件事,但我无法让它发挥作用.我想知道你们中是否有人知道我还能尝试什么或者我错过了什么.

有一点我注意到,在构建应用程序时,我尝试使用angular cli的大部分资源都被webpack捆绑成单独的块.这似乎是合乎逻辑的,因为它使用了webpack代码拆分.但是如果在编译时模块还不知道怎么办(但是编译后的模块存储在服务器的某个地方)？捆绑不起作用,因为它找不到要导入的模块.并且使用SystemJS将在系统上找到时加载UMD模块,但也通过webpack捆绑在一个单独的块中.

我已经尝试过的一些资源;

• 动态远程组分装载机
• 模块加载
• 在运行时从不同服务器加载模块
• 如何将动态外部组件加载到Angular应用程序中
• 在Angular 2,4,5,6中实现插件架构/插件系统/可插拔框架
• Angular 5 - 在运行时动态加载模块(在编译时未知)
• https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e
• 其他几个与此主题有关.

我已经尝试并实现了一些代码,但目前还没有工作;

使用普通的module.ts文件扩展路由器

     this.router.config.push({
    path: "external",
    loadChildren: () =>
      System.import("./module/external.module").then(
        module => module["ExternalModule"],
        () => {
          throw { loadChunkError: true };
        }
      )
  });

正常SystemJS导入UMD捆绑包

System.import("./external/bundles/external.umd.js").then(modules => {
  console.log(modules);
  this.compiler.compileModuleAndAllComponentsAsync(modules['External']).then(compiled => {
    const m = compiled.ngModuleFactory.create(this.injector);
    const factory = compiled.componentFactories[0];
    const cmp = factory.create(this.injector, [], null, m);

    });
});

导入外部模块,不使用webpack(afaik)

const url = 'https://gist.githubusercontent.com/dianadujing/a7bbbf191349182e1d459286dba0282f/raw/c23281f8c5fabb10ab9d144489316919e4233d11/app.module.ts';
const importer = (url:any) => Observable.fromPromise(System.import(url));
console.log('importer:', …

我有以下jsfiddle

我希望能够将我的自定义组件粘贴到特定的网格中(例如"")

现在没有Angular2,我只是使用:

var el = $.parseHTML("<div><div class=\"grid-stack-item-content\" data-id=\""+id+"\"/><div/>");
this.grid.add_widget(el, 0, 0, 6, 5, true);

问题是,我不知道我怎么能这样做:

var el = $.parseAndCompileHTMLWithComponent("<div><div class=\"grid-stack-item-content\" data-id=\""+id+"\"/><fancy-button></fancy-button><div/>");
this.grid.add_widget(el, 0, 0, 6, 5, true);

在angular1中,我知道有一个编译,但在angular2中,没有这样的东西.

我的花哨按钮组件很简单,如下所示:

@Component({
  selector: 'fancy-button',
  template: `<button>clickme</button>`
})
export class FancyButton {}

如何动态添加花式按钮组件？

我正在为我的项目使用mgechev的angular2种子.我在Angular2工作了6个月(跟随所有RC到最终版本的世界).我遇到了我的客户的要求.我希望你们能帮忙.

这是问题所在.基于用户角色:

ROLE_ADMIN

ROLE_REVIEWER

Web应用程序应该能够加载特定的模块和显示.说,

• 如果用户角色是ROLE_ADMIN加载angular2模块Module1& Module2
• 如果用户角色只是ROLE_REVIEWER加载angular2模块 Module1.

当我说加载时,这意味着它必须从服务器获取模块文件(与模块捆绑在一起的所有内容),注入Angular2应用程序并显示该模块.

因此,如果用户角色是,ROLE_REVIEWER我将只能看到不应该从服务器获取Module1均值Module2.

编辑 这是一个困难的部分,url在做的时候没有改变.将此模块视为在仪表板上加载的小部件/dashboard.因此,在加载这些模块时,不会发生任何URL更改.

希望我的问题足够解释.请建议我应该做什么或研究或研究以实现这一目标.

我最好的猜测,我必须做以下事情:

• 有条件的延迟加载(没有路由)然后,
• 动态加载

但是我不知道怎么做.

我是Angular的新手,正在寻找关于如何将一些小部件组件延迟加载(或动态加载？)到我的页面中的信息.我在lazying加载时发现的所有信息都与Angular路由器有关.在这种情况下,路由器不是我需要的,因此很难找到有关如何具体执行此操作的信息.

我所拥有的是一个网站,它有许多可以加载到页面上的小部件.它是可配置的,因此用户可以定义在每个页面上显示哪些小部件,并且可以有任意数量的小部件.其中一些小部件理论上可能非常繁重,所以我不想在网站启动时加载它们.

我还需要传递一个字符串来初始化部分或全部这些小部件.

那么我如何将懒惰(动态？)加载组件/模块加入到我的Angular应用程序中？

有没有一种方法可以直接从html中的标签角度到延迟加载组件<my-component></my-component>？

在组件模板解析期间,angular应该在找到任何html中没有或尚未加载的新标记时将整个组件加载到浏览器中.

我知道我们可以加载一个模块,使用loadChildren该模块仅特定于路由,还需要加载模块及其组件.我只搜索组件,直接搜索组件而不是模块.

我不想使用路由器或不想在我的应用程序中导入组件ot模块.我想当angular2找到一个不在html5中的标签时,它将在spcictfic文件夹中搜索并加载js和html文件并将该组件注入特定标签

这是我的app.component.ts:

import { Component } from '@angular/core';

@Component({
    templateUrl: 'app/app.component.html',
    selector: 'my-app'
})
export class AppComponent {

}

这是我的app.component.html:

<p-tabView>
    <p-tabPanel header="Home" leftIcon="fa-bar-chart-o">
        <home-app></home-app>
    </p-tabPanel>
    <p-tabPanel header="Hierarquia" leftIcon="fa-sitemap">
        <tree-app></tree-app>
    </p-tabPanel>
    <p-tabPanel header="Configurações" leftIcon="fa-cog">
        <config-app></config-app>
    </p-tabPanel>
</p-tabView>

加载tabView时,我的三个组件(home,tree和config)已同时加载.但是,我希望在选择其选项卡时加载一个组件.怎么做？

PS:如果有帮助,TabView有一个onChange事件.

我有一个仪表板应用程序，在这里我懒惰地加载小部件（与路线无关）。

我通过定义一个对象来做到这一点{name: string, loadChildren: string}。然后app.module我会做的provideRoutes(...)。

这将导致cli为每个小部件模块创建一个块。

然后在运行时，我将使用SystemJsModuleLoader加载该字符串并获取一个NgModuleRef。

使用，我可以创建一个从模块和调用组件createComponent上ViewContainerRef。

这是该函数：

 loadWidget(
    name: string,
    container: ViewContainerRef,
    widget: Widget
  ): Promise<{ instance: WidgetComponent; personlize?: { comp: any; factory: ComponentFactoryResolver } }> {
    if (this.lazyWidgets.hasOwnProperty(name)) {
      return this.loader.load(this.lazyWidgets[name]).then((moduleFactory: NgModuleFactory<any>) => {
        const entryComponent = (<any>moduleFactory.moduleType).entry;
        const moduleRef = moduleFactory.create(this.injector);
        const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);

        const comp = container.createComponent(compFactory);
        (<WidgetComponent>comp.instance).widget = widget;
        const personalize = (<any>moduleFactory.moduleType).personalize;
        if (personalize) {
          return {
            instance: …