标签: angular-universal

我有一个在我的应用程序中使用的函数，该函数的参数之一是一个对象：

const checkValues = {
  promoId: ...,
  ...
  unsaved: !JSON.parse(localStorage.getItem('unsaved')) ? [] : JSON.parse(localStorage.getItem('unsaved'))
}

但是，当我提供项目时收到的唯一错误是：

ReferenceError：对象中未定义 localStorage。(/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:4145:23) 在webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30)在对象。(/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:4119:67) 在webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30)在对象。(/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:1728:69) 在webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30)在对象。(/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:1803:70) 在webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30)在对象。(/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:1509:79) 在webpack_require (/home/meow/Development/dmc/cli_universal/dist/server.bundle.js:21:30)

如何检查 localStorage 是否存在？

我正在创建一个部署在 firebase 上的 Angular8 通用应用程序。引用了这个网站Angular universal with firebase

当我在本地使用 Express 服务器运行并提供应用程序时，所有路由都将加载更新的元标记。当我在 firebase 上部署应用程序时，一切正常，但根路径上的元标记没有更新。它们对于所有其他路线都工作得非常好。当我打开检查元素时，元标记也会更新。我添加了一些配置，以便不在 firebase.json How to Prevent caching for the index.html of an SPA上缓存 html 文件，并将 server.ts 文件中的“cache”值设置为“No-cache”，如下所示

app.get('*', (req, res) => {
  res.set('Cache-Control', 'public, max-age=0, s-maxage=0, no-cache');
  res.render('index', { req });
});

但对我来说没有任何作用。请帮忙。

我将我的 Angular 应用程序从 v6 更新到 v9，在测试时它真的没问题，但是当我将它部署到我的登台服务器时，我遇到了这个错误：

你必须传入一个 NgModule 或 NgModuleFactory 才能被引导

我已经搜索了很多关于它，但我不知道可以在这里做什么。

./server.ts：

    const environment = process.env.NODE_ENV || 'local';
    const docker = process.env.DOCKER || false;

    // These are important and needed before anything else
    import 'zone.js/dist/zone-node';
    import 'reflect-metadata';

    import { enableProdMode } from '@angular/core';

    // Express Engine
    import { ngExpressEngine } from '@nguniversal/express-engine';
    import { MODULE_MAP } from '@nguniversal/module-map-ngfactory-loader';

    import * as express from 'express';
    import * as forceSSL from 'express-force-ssl';
    import * as morgan from 'morgan';
    import * as …

使用最新版本的 angular、angularfire 和 angular Universal 时出现此错误。

服务

定期服务没问题...

ng 添加@nestjs/ng-universal

添加了通用，似乎安装得很好...

npm 运行构建：ssr

似乎编译，一些警告，但没有错误......

npm 运行服务：ssr

似乎可以正常工作，直到我在本地主机上加载页面并出现此错误：

启用离线持久性时出错。回退到持久性禁用：错误：ENOENT：没有这样的文件或目录，打开'C:\angular projects\testProject\dist\testproject\server\src\protos\google\firestore\v1\firestore.proto'

---------更新-----------

我删除了dist文件夹并重建，现在我得到了这个错误：

错误：ENOENT：没有这样的文件或目录，打开“google/protobuf/api.proto”

这是完整的错误：

PS C:\angular projects\testapp.io> npm run serve:ssr

> testapp@0.0.0 serve:ssr C:\angular projects\testapp.io
> node dist/testapp/server/main.js

C:\angular projects\testapp.io\dist\testapp\server\main.js:1
!function(e,a){for(var i in a)e[i]=a[i]}(exports,function(modules){var installedModules={},installedChunks={1:0};function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}return __webpack_require__.e=function requireEnsure(chunkId){if(0!==installedChunks[chunkId]){var chunk=require("./"+({0:"firebase-functions",2:"vendors~firebase-auth",3:"vendors~firebase-functions"}[chunkId]||chunkId)+".js"),moreModules=chunk.modules,chunkIds=chunk.ids;for(var moduleId in moreModules)modules[moduleId]=moreModules[moduleId];for(var i=0;i<chunkIds.length;i++)installedChunks[chunkIds[i]]=0}return Promise.all([])},__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){

Error: ENOENT: no such file or directory, open 'google/protobuf/api.proto'
    at Object.openSync (fs.js:443:3)
    at Object.readFileSync (fs.js:343:35)
    at fetch (C:\angular projects\testapp.io\dist\testapp\server\main.js:1:1329786)
    at …

使用 Angular Universal 添加 clientProject 时出现以下错误。没有进一步的解释。有人可以帮忙吗？无法读取未定义的属性“某些”

我有带有身份验证的角度通用 SSR 应用程序。我将身份验证令牌保存在 http cookies(set-cookies) 中。现在，当我刷新应用程序时，我首先看到未经身份验证的页面，一秒钟后它会转换为经过身份验证的状态。

我知道发生这种情况是因为 Universals 渲染器服务器在渲染页面时不会将令牌从 cookie 传递到 API。那么如何强制通用服务器以经过身份验证的状态呈现页面呢？

我在我的 AuthGuard.ts 中使用 NGX Cookie 服务来检查用户是否使用 cookie 登录。问题是当我尝试获取 cookie 用户的原始值时，该函数get总是返回一个空字符串。

但是我仍然可以创建一个 cookie 并且工作正常。

我确实将 cookie 作为提供者放在我的应用程序模块和我的子模块中。

我在 Angular Universal 中使用 angular 8。

任何想法如何修复这个奇怪的错误？

提前致谢

我在我的角度应用程序中实现 SSR，在尝试运行npm run build:ssr它时会抛出以下错误。

我已经创建了自己的库，它是否以名称捆绑在 dist 文件夹中@asfc/shared

ERROR in projects/asfc-web/src/environments/environment.ts:1:39 - error TS2307: Cannot find module '@asfc/shared' or its corresponding type declarations.\n\n1 import { PageNotFoundComponent } from '@asfc/shared';\n                                        ~~~~~~~~~~~~~~\n......\n

我已将 index.ts 添加到files，但错误仍然没有消失

下面是我的，tsconfig.server.json

{\n  "compilerOptions": {\n    "target": "es2016",\n    "module": "commonjs",\n    "moduleResolution": "node",\n    "allowSyntheticDefaultImports": true,\n    "removeComments": false,\n    "strict": false,\n    "noFallthroughCasesInSwitch": true,\n    "noImplicitReturns": true,\n    "noImplicitAny": false,\n    "noUnusedLocals": false,\n    "noUnusedParameters": false,\n    "experimentalDecorators": true,\n    "pretty": true,\n    "declaration": true,\n    "outDir": "../../dist/server",\n    "lib": ["es2016", "DOM"],\n …

快速提问；我找不到有关该问题的任何文档。在 Angular Universal 的早期版本中，要在视图源中渲染延迟加载的路由，您必须包含ModuleMapLoaderModule在app.server.module.ts中中。

在 Angular 9 中，如果您不使用字符串，则似乎不必这样做loadChildren。我有一个新项目，并且设置了延迟加载，如下所示：

const routes: Routes = [
  {
    path: '',
    loadChildren: () =>
      import('./brands/brands.module').then((m) => m.BrandsModule),
  },
  { path: '**', redirectTo: '' },
];

如果我查看页面源代码，我看不到我的BrandsComponent，但如果我将路由更改为：

const routes: Routes = [
  {
    path: '',
    component: BrandsComponent,
  },
  { path: '**', redirectTo: '' },
];

查看页面源代码显示BrandsComponent告诉我延迟加载不起作用。有谁知道如何解决这一问题？

Angular 17中引入了SSR的新方法。现在我如何更改Angular组件中快速响应的状态代码？之前我改变了这样的响应：

import { RESPONSE } from '@nguniversal/express-engine/tokens';
import { Response } from 'express';  

constructor(@Optional() @Inject(RESPONSE) private response: Response)


this.response.status(this.statusCode);

这样我就可以更改状态代码。例如，如果我遇到未找到的组件，出于 SEO 原因，我必须将状态代码更改为 404。