具有 Angular Universal 的 Angular 元素答案

【问题标题】：Angular Element with Angular Universal具有 Angular Universal 的 Angular 元素
【发布时间】：2021-10-27 17:08:58
【问题描述】：

我的应用程序是 Angular Universal 应用程序，我一直在尝试加载我单独创建的 Web 组件。我将子应用程序的所有 js 文件合并为一个，并尝试在我的父应用程序中使用选择器，但是，通用编译失败了：

Compiled successfully.

ERROR 错误：未捕获（在承诺中）：错误：无法匹配任何路由。 URL 段：'roles-permissions/roles-permissions.js' 错误：无法匹配任何路由。 URL 段：'roles-permissions/roles-permissions.js' 在 ApplyRedirects.noMatchError (C:\Projects\dev-portal-v2\dist\developer\server\main.js:88305:16) 在 CatchSubscriber.selector (C:\Projects\dev-portal-v2\dist\developer\server\main.js:88287:28) 在 CatchSubscriber.error (C:\Projects\dev-portal-v2\dist\developer\server\main.js:165412:31) 在 MapSubscriber._error (C:\Projects\dev-portal-v2\dist\developer\server\main.js:164435:26) 在 MapSubscriber.error (C:\Projects\dev-portal-v2\dist\developer\server\main.js:164415:18) 在 MapSubscriber._error (C:\Projects\dev-portal-v2\dist\developer\server\main.js:164435:26) 在 MapSubscriber.error (C:\Projects\dev-portal-v2\dist\developer\server\main.js:164415:18) 在 ThrowIfEmptySubscriber._error (C:\Projects\dev-portal-v2\dist\developer\server\main.js:164435:26) 在 ThrowIfEmptySubscriber.error (C:\Projects\dev-portal-v2\dist\developer\server\main.js:164415:18) 在 TakeLastSubscriber._error (C:\Projects\dev-portal-v2\dist\developer\server\main.js:164435:26) 在 resolvePromise (C:\Projects\dev-portal-v2\dist\developer\server\main.js:173623:21) 在 resolvePromise (C:\Projects\dev-portal-v2\dist\developer\server\main.js:173570:11) 在 C:\Projects\dev-portal-v2\dist\developer\server\main.js:173697:11 在 ZoneDelegate.invokeTask (C:\Projects\dev-portal-v2\dist\developer\server\main.js:172664:173) 在 Object.onInvokeTask (C:\Projects\dev-portal-v2\dist\developer\server\main.js:76390:33) 在 ZoneDelegate.invokeTask (C:\Projects\dev-portal-v2\dist\developer\server\main.js:172664:56) 在 Zone.runTask (C:\Projects\dev-portal-v2\dist\developer\server\main.js:172416:39) 在 drainMicroTaskQueue (C:\Projects\dev-portal-v2\dist\developer\server\main.js:172878:25)

我的托管组件：

<roles-permissions></roles-permissions>

以及我如何加载脚本文件：

export class AdminModule {
  constructor() {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '../../../roles-permissions/roles-permissions.js';
    document.body.appendChild(script);
  }
}

在这里需要一点帮助。

【问题讨论】：

组件在你的主项目之外？
相同的根文件夹，但是是的，'src' 和 'roles' 文件夹在同一级别
当您使用ng serve 进行开发时它可以工作？
因为它是一个 Angular Universal，所以没有尝试 'ng serve' 命令
我有一个 Angular 通用，我通常使用 ng serve 开发，完成后，我通常运行 ng build

标签： angular

【解决方案1】：

通过以下步骤解决了这个问题：

从您的 Web 组件中删除路由模块。
从您的 Web 组件中删除引导程序。
将文件保存在好位置，我将其更改为“资产”文件夹。

现在也可以使用“ng serve”和“npm run dev:ssr”。

【讨论】：