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

如何解决Angular Universal SSR 组件无法正常工作并获取 $(...).owlCarousel 不是函数错误

由于 SSR SEO 元标签渲染，我有一个正常的 angular9 应用程序，我添加了 angular Universal。我添加的元标记在源代码中呈现，但我的 javascript 文件不像 Carousel、Slick 和其他一些文件那样工作。我按照以下查询切换到 angular 通用。

• ng 添加@nguniversal/express-engine
• npm run dev:ssr
• npm run serve:ssr

在我切换到 Angular Universal 之前

现在使用 Angular Universal SSR

-- 无法理解要做什么尝试解决我面临的其他一些问题，例如“窗口未定义”等，但我解决了所有问题。帮我解决这些问题“owlCarousel 不是一个函数”

• 我也想使用 javascripts

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

原本是普通的Angular

解决方法

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

运行这个：npm install 然后再试一次。

,

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

,

最后我解决了角度通用问题。

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

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

如果您遇到窗口未定义之类的错误。不用担心你只需要在 component.ts 文件中做一件事

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

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

就是这样，我们的应用程序可以正常运行在服务器上，也可以用于 seo 爬虫。

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