小编Lar*_*dam的帖子

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

有一点我注意到,在构建应用程序时,我尝试使用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:', …

我目前正在开发一个项目，我们的首席架构师希望在运行时动态加载角度应用程序中的不同“兄弟”应用程序。我已经知道如何使用具有延迟加载的模块来完成此操作。但在我们的例子中，应用程序也单独存在于它们自己的环境中。有人对如何以有角度的方式实现这一目标有建议吗？

我已经尝试将它们分成自己的块并像这样加载它们，并且它部分起作用。但“主”应用程序需要了解同级应用程序，因此需要对其进行调整以延迟加载模块。

我主要好奇其他人在此类场景中使用的解决方案:)

也许是关于 ng-content / 内容投影的奇怪问题。我的想法是，您可以动态地放入“内容”，而“内容”又可以使用 ng-content 进行投影。为了实现此目的，我还可以做的一件事是创建一个输入属性来传递我想要在组件中显示的信息。

我遇到过这个项目；https://trimox.github.io/angular-mdc-web/#/home 这是 Angular 的新材质组件。我在浏览代码时发现的一件事是，他极端地使用 ng-content 来投影一些“子组件”。我忍不住想知道...为什么？因为我还可以尝试使用一个卡组件和我传递的类似 JSON/对象的配置来解决这个问题。

<mdc-card class="demo-card">
<mdc-card-primary-action mdc-ripple>
    <mdc-card-media class="demo-card__media--16-9" [wide]="true"></mdc-card-media>
    <div class="demo-card__primary">
        <h2 class="demo-card__title" mdcHeadline6>Our Changing Planet</h2>
        <h3 class="demo-card__subtitle" mdcSubtitle2>by Kurt Wagner</h3>
    </div>
    <div class="demo-card__secondary" mdcBody2>
        Visit ten places on our planet that are undergoing the biggest changes today.
    </div>
</mdc-card-primary-action>
<mdc-card-actions>
    <mdc-card-action-buttons>
        <button mdc-button mdcCardAction="button">Read</button>
        <button mdc-button mdcCardAction="button">Bookmark</button>
    </mdc-card-action-buttons>
    <mdc-card-action-icons>
        <button mdcIconButton mdcCardAction="icon" iconOn="favorite" iconOff="favorite_border"></button>
        <mdc-icon mdcCardAction="icon" mdcRipple>share</mdc-icon>
        <mdc-icon mdcCardAction="icon" mdcRipple>more_vert</mdc-icon>
    </mdc-card-action-icons>
</mdc-card-actions>

例如，您可以在上面看到一个“卡片”组件，其中包含多个项目。我还找到了这些组件的来源；https://github.com/trimox/angular-mdc-web/blob/master/packages/card/card.ts。

我原来的问题仍然存在；什么时候使用 ng-content …