Angular Universal SSR 組件無法正常工作並獲取 $(...).owlCarousel 不是函數錯誤

Question

由於 SSR seo 元標簽渲染，我有一個正常的 angular9 應用程序，我添加了 angular Universal。 我添加的元標記在源代碼中呈現，但我的 javascript 文件不像 Carousel、Slick 和其他一些文件那樣工作。 下面的查詢我遵循切換到角度通用。

• ng 添加@nguniversal/express-engine
• npm run dev:ssr
• npm 運行服務：ssr

在我切換到 Angular Universal 之前

現在有了 Angular Universal SSR

-- 無法理解要做什么嘗試解決我面臨的其他一些問題，例如“未定義窗口”等，但我解決了所有問題。 幫我解決這些問題“owlCarousel 不是一個功能”

• 我也想使用javascripts

我有很多東西，但我的網站有些頁面無法正常工作。 當我使用普通應用程序 (CSR) 時，所有組件都工作正常。 現在我試圖讓我的網站對 SEO 友好，我切換到有角度的通用 ssr，從那里開始這個令人頭疼的事情......

原本用普通的 Angular

Answer 1

您的項目使用了 owl 的依賴關系，您需要安裝它。

運行這個： npm install試。

Answer 2

您必須在組件中聲明 jquery 選擇器。 聲明 var $:any

Answer 3

最后我解決了角度通用問題。

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

我們將看到一些服務器文件被創建。 要在開發模式下檢查您的應用程序，我們需要運行 * npm run dev:ssr命令。

如果出現類似window is not defined 的錯誤。 不用擔心你只需要在 component.ts 文件中做一件事

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

-一旦解決了渲染角度應用程序所需的所有錯誤，然后運行npm run prerender命令。 它將在 dist/project_name ie browser和server 中創建兩個文件夾。 我們只需將瀏覽器文件夾中的所有文件上傳到 aws s3 存儲桶。

就是這樣，我們的應用程序可以很好地用於服務器，並且可以用於 seo 爬蟲。

如有任何疑問，請告訴我...