如何在用作 Web 组件的 Angular 应用程序中延迟加载组件? (如何从正确的服务器加载块?)

问题描述 投票:0回答:1

如何设置作为 Web 组件运行的应用程序,该应用程序必须从为 Web 组件提供脚本的服务器加载块,而不是尝试从仅提供包含 Web 组件的页面的服务器进行延迟加载?

更详细的问题:

我的角度应用程序中有一个延迟加载的组件

LazytestComponent

加载代码:

    const {LazytestComponent} = await import('../lazytest/lazytest.component');
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(LazytestComponent);
    const instance = this.lazyContainer.createComponent(componentFactory, undefined, this.injector);

Angular 为该组件生成一个块,仅当此惰性代码运行时才访问该块(networktab)。

这在使用 ngserve 运行应用程序时有效。

现在通过使用 Angular/Elements 将其构建为 Web 组件:

在@NgModule中:

我们有:

  ngDoBootstrap() {
    const webComponent = createCustomElement(LazyApp, {injector: this.injector});
    customElements.define('lazyapp', webComponent);
  }

这也有效,我现在可以在另一台服务器上加载应用程序的 3 个脚本文件,并使用

<lazyapp>
-标签将其包含在页面中。

另一台服务器上的html页面:

<html>
<head>
    <script src="http://localhost:8089/lazy/polyfills.js"></script>
    <script src="http://localhost:8089/lazy/runtime.js"></script>
    <script src="http://localhost:8089/lazy/main.js"></script>
</head>
<body>
<lazyapp></lazyapp>
</body>
</html>

网页是从 localhost:8080 提供的 - 角度应用程序是从 localhost:8089 加载的。

应用程序作为 Web 组件加载,但在运行延迟加载时失败。

它不是从“http://localhost:8089/lazy/317.js”加载块,而是尝试从“http://localhost:8080/317.js”加载它 - 这是提供 html 的服务器页面,当然它不在那里。

我如何告诉我的应用程序可以在哪里找到它的块的 url?

javascript angular web-component
1个回答
0
投票

// 角度.json

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "deployUrl": "http://localhost:8089/"
          }
        }
      }
    }
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.