Angular 通用 SSR 组件无法正常工作并且获取 $(...).owlCarousel 不是函数错误

Question

我有一个正常的 angular9 应用程序，因为 SSR seo 元标记正在渲染，我添加了 angular 通用。我添加的一个元标记在源代码中呈现，但我的 javascript 文件无法像 Carousel、Slick 和其他一些文件那样工作。我按照下面的查询切换到 angular universal.

添加@nguniversal/express-engine
npm 运行 dev:ssr
npm 运行 serve:ssr

在我切换到 Angular Universal

之前

现在有 Angular 通用 SSR

-- 无法理解该做什么试图解决我面临的一些其他问题，如“Window 未定义”和其他问题，但我解决了所有问题。帮我解决这些问题 "owlCarousel 不是函数"

我也想用javascripts

我有很多东西，但我的网站有些页面无法正常工作。当我使用普通应用程序 (CSR) 时，所有组件都工作正常。现在我试图让我的网站 SEO 友好我切换到 angular 通用 ssr 并且从那里开始这个头痛开始......

本来就正常Angular

Answer 1

您的项目使用了 owl 的依赖项，您需要安装它。

运行这个：npm install 然后重试。

Answer 2

您必须在组件中声明 jquery 选择器。声明 var $:any

Answer 3

我终于解决了 angular 普遍问题。

安装 Angular Universal 后，使用 ng 添加 @nguniversal/express-engine 命令。

我们将看到创建了一些服务器文件。要在开发模式下检查您的应用程序，我们需要运行 *npm 运行 dev:ssr 命令。

如果您收到类似 window 未定义 的错误。不用担心，您只需要在 component.ts 文件

中做一件事

 isBrowser;
  constructor(@Inject(PLATFORM_ID) private platformId) {
    this.isBrowser = isPlatformBrowser(platformId);
  }
  
   ngOnInit(): void {
    if (this.isBrowser) {
      window.scrollTo(0, 0);
    }
  }

-一旦你解决了所有需要呈现 angular 应用程序的错误，然后运行 npm 运行 prerender 命令。它将在 dist/project_name 中创建两个文件夹，即 browser 和 server。我们只需将 browser 文件夹中的所有文件上传到 aws s3 存储桶。

就是这样，我们的应用程序可以很好地用于服务器，也可以用于 seo 爬虫。

如有任何疑问，请告诉我...

Angular 通用 SSR 组件无法正常工作并且获取 $(...).owlCarousel 不是函数错误

Angular Universal SSR components are not working properly & getting $(...).owlCarousel is not a function error

javascript

angular

server-side-rendering

owl-carousel

angular-universal