Angular 12+：应用 ssr 步骤后出现错误

Question

我有现有的 Angular 项目。我需要在我现有的 Angular 项目上应用 ssr。我关注this

1. ng add @nguniversal/express-engine此命令按预期工作。

2. npm run dev:ssr 运行此命令并在给定链接上打开浏览器后，出现以下错误

   找不到翻译文件：../../assets/translate/Pages/header/en.json

   找不到翻译文件：../../assets/translate/Pages/footer/en.json

   找不到翻译文件：../../assets/translate/Pages/home/en.json

   ERROR ReferenceError: $ is not defined 在 HeaderComponent.ngOnInit (mypro\dist\pro\server\main.js:228895:9) ....

   ERROR ReferenceError: FormData is not defined 在 HomeComponent.getUpcomingEvents (mypro\dist\pro\server\main.js:229576:29) ....

   ERROR ReferenceError: localStorage is not defined 在 AuthService.isLoggedIn (mypro\dist\pro\server\main.js:240521:9) ....

   由于选择器错误而跳过了 1 条规则： .custom-file-input:lang(en)~.custom-file-label -> 不匹配的伪类 :lang

   由于选择器错误而跳过了 1 条规则： .custom-file-input:lang(en)~.custom-file-label -> 不匹配的伪类 :lang

我尝试了不同的方法，但每次都遇到相同的错误。我不知道应该怎么做才能在现有项目上应用 SSR。如果我创建新的角度项目并应用相同的步骤，它可以工作，但它不适用于现有项目。

我应该如何消除这些错误？

请帮助和指导。

Answer 1

assets: 好像是用相对路径检索翻译文件，试试绝对路径

$ 更有可能是由于 JQuery 的使用（这是摆脱它的好机会）

localstorage/FormData：使用 SSR，您的应用程序将在节点环境中呈现，无需浏览器。 Web Storage/FormData API 在浏览器之外不可用。根据您的使用情况，您可以在 Google 上找到本地存储的相关解决方案（因为问题中没有代码）。 对于表单数据：

Install form-data via npm
npm install form-data

then import form-data to your component or service
import * as FormData from 'form-data';