如何设置作为 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?
// 角度.json
{
"projects": {
"your-project": {
"architect": {
"build": {
"options": {
"deployUrl": "http://localhost:8089/"
}
}
}
}
}
}