标签: angular-universal

我克隆了一个用于服务器端渲染和路由的角度通用项目，也工作正常，但每次我单击查看源页面时，都会出现以下错误，并且页面不会加载。（我正在发送数据以命中 formdata 中的 api）。

每当我点击查看源页面时，控制台都会显示此错误

错误{错误：未捕获（承诺）：ReferenceError：FormData未定义ReferenceError：FormData未在BodyWisdomComponent.getAllBodyWisdom定义（webpack:///./dist-server/main.095f1696d45b5b44a263.js？：1：10104）

我使用 formdata 将数据发送到 api 中的服务器：

var myFormData = new FormData();
myFormData.append('timezone', 'asia/kolkata');
myFormData.append('page_no', this.pageNumber);

我的 webpack.config.js 文件是：

const path = require('path');
const webpack = require('webpack');
const FormData = require('form-data');
var nodeExternals = require('webpack-node-externals');


/**
 * This is a server config which should be merged on top of common config
 */
module.exports = {
  entry: {
    // This is our Express server for Dynamic universal
    server: './server.ts',
    // This is an example of Static prerendering …

我正在尝试将 Angular Universal 与我的项目集成。在修复了很多错误之后，我在找出这个错误时遇到了一些麻烦。希望得到一些帮助。

构建运行良好，但在运行服务器时出现此错误。

侦听：http://localhost:8080 错误 TypeError：无法在 HttpHeaders.module.exports.HttpHeaders.applyUpdate 处读取未定义的属性“长度”（C:\Users\Frederico\Documents\Projects\beatstars-marketplace-v2\dist \server.js:127015:27) 在 C:\Users\Frederico\Documents\Projects\beatstars-marketplace-v2\dist\server.js:126986:74 在 Array.forEach () 在 HttpHeaders.module.exports.HttpHeaders .init (C:\Users\Frederico\Documents\Projects\beatstars-marketplace-v2\dist\server.js:126986:33) 在 HttpHeaders.module.exports.HttpHeaders.forEach (C:\Users\Frederico\Documents\ Projects\beatstars-marketplace-v2\dist\server.js:127051:14) 在 Observable._subscribe (C:\Users\Frederico\Documents\Projects\beatstars-marketplace-v2\dist\server.js:128261:25)在 Observable.module.exports.Observable._trySubscribe (C:\Users\Frederico\Documents\Projects\beatstars-marketplace-v2\dist\server.js:59642:25) 在 Observable.module.exports.Observable.subscribe (C :\Users\Frederico\Documents\Projects\beatstars-marketplace-v2\dist\server.js:59628:22) 在scheduleTask (C:\Users\Frederico\Documents\Projects\beatstars-marketplace-v2\dist\server.js) js:168196:32) 在 Observable._subscribe (C:\Users\Frederico\Documents\Projects\beatstars-marketplace-v2\dist\server.js:168234:13)

我正在使用最新版本的 Angular 6。这是我的 package.json。

npm run build:prod - 用于构建 npm run 服务器 - 提供服务

 {
   "name": "project-name",
   "version": "0.1.105",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --host 0.0.0.0 --port 8888 --disable-host-check",
     "dev": "ng serve",
     "hmr": "ng serve --hmr …

所以我一直在尝试将我的应用程序转换为角度通用的，并且在大多数情况下它都很好。但我之前读过一些“陷阱”：https ://github.com/onespeed-articles/angular-universal-gotchas

这表明我不应该使用timeout这令人讨厌的东西，因为在AngularJS中，你用它来在视图渲染后触发事件，这样你就可以确保元素的尺寸是正确的，等等。

我还读到它仍然存在于Angular 6中，所以我有这个指令：

import { Directive, ElementRef, AfterViewInit, Input, HostListener } from '@angular/core';

@Directive({
  selector: '[pyb-button-group]'
})
export class ButtonGroupDirective implements AfterViewInit {
  @Input() className: string;

  @HostListener('window:resize', ['$event'])
  onResize() {
    let resize = this.resize;
    let element = this.element;
    let className = this.className;

    setTimeout(function () {
      resize(element, className);
    }, 500);
  }

  constructor(private element: ElementRef) {
  }

  ngAfterViewInit() {
    this.resize(this.element, this.className);
  }

  resize(nativeElement, className) {
    let elements = nativeElement.nativeElement.getElementsByClassName(className || 'btn-choice');
    let headerHeight …

我正在使用ngx-device- detector库来检测设备类型（移动设备、平板电脑或台式机）。该库在客户端模式下完美工作，但当角度通用应用程序在服务器上预渲染时无法检测设备类型（在服务器上预渲染后，在客户端模式下完美工作）。

1. 如果有人给我一个适用于这个库的解决方案，我很感激
2. 最后，如果这个库没有任何解决方案，请给我另一个解决方案

谢谢。

服务器 (ssr) 在渲染页面时向 API 发出请求，但浏览器也会发出相同的请求，这意味着对已从服务器获取的数据进行双重请求。

我找到了两个解决方案来解决这个问题。

第一个是使用TransferHttpCacheModule，我唯一要做的就是将此模块添加到appModule

第二种是直接使用传输状态 api，这意味着我必须在每个执行 http 请求的服务或解析器中手动添加一些依赖于传输状态 api 的逻辑。例如：

我必须更改此解析器

@Injectable()
export class CourseResolver implements Resolve<Course> {
    constructor(private coursesService: CoursesService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course> {
        const courseId = route.params['id'];

        return this.coursesService.findCourseById(courseId);
    }
}

这样做是为了避免浏览器的第二次请求。

@Injectable()
export class CourseResolver implements Resolve<Course> {

    constructor(
        private coursesService: CoursesService,
        @Inject(PLATFORM_ID) private platformId,
        private transferState:TransferState) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course> {

        const courseId = route.params['id'];
        const COURSE_KEY = makeStateKey<Course>('course-' + courseId);

        if (this.transferState.hasKey(COURSE_KEY)) {
            const …

各位，我一直在尝试使用 Angular 与 Angular Universal 和 NestJs 来实现一个应用程序。我相信，不仅可以为 SSR 抢占 Nest 服务器，还可以提供 API 端点。

我已经使用https://github.com/nestjs/ng-universal进行了推荐的设置ng add @nestjs/ng-universal，相当标准。之后，我将代码添加到 Angular src 文件夹中并安装了所需的依赖项。

问题是，当我尝试将模块导入嵌套 app.module 时，出现以下错误： Error: Module not found: Error: Can't resolve 'class-transformer/storage'

我尝试过使用webpack，但是由于我对webpack的了解很少，所以结果一次次失败，正如预期的那样。

首先，是否可以抢占服务器来提供端点？其次，我应该如何解决这个模块？

请在下面找到用于重现问题的存储库：

https://github.com/vitordhers/universal-nest

提前致谢

我需要将 SSR 用于我现有的 Angular 项目之一。为此，我已将我的一个项目从 v8 迁移到 v13.0.0，这本身就花费了很多时间。

然而，现在该应用程序在 v13.0.0 上运行良好，我尝试使用以下命令向其添加 SSR

\n

ng 添加@nguniversal/express-engine

\n

此命令似乎添加了通用版本 13.0.1，但它一直失败，并出现类似于以下内容的错误：

\n

D:\\my-app-universal>ng add @nguniversal/express-engine i Using package\nmanager: npm \xe2\x88\x9a Found compatible package version:\n@nguniversal/express-engine@13.0.1. \xe2\x88\x9a Package information loaded.

\n

The package @nguniversal/express-engine@13.0.1 will be installed and\nexecuted. Would you like to proceed? Yes npm ERR! code ERESOLVE npm\nERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR!\nWhile resolving: my-app-universal@0.0.0 npm ERR! Found:\n@angular/animations@13.0.3 npm ERR! node_modules/@angular/animations\nnpm ERR! @angular/animations@"~13.0.0" from the …

我最近从 Angular 版本 14 迁移到版本 15（然后迁移到 16），并且使用 Angular Universal 进行预渲染似乎发生了变化：它似乎仍然有效，但熟悉的东西<!-- this page was prerendered with angular universal -->已经消失了。

问题：我可以不再依赖添加的 html 注释来快速验证、预渲染和 ssr 是否正常工作吗？即它消失了吗？如果是的话，为什么以及为什么我在网上找不到任何东西？如果不是，我在迁移过程中可能破坏了什么导致它死亡？

我使用新的Angular Universal Starter来启动一个新的Angular 5项目.对于新版本,他们仅将Angular CLI版本作为启动器.一切正常,我可以在生产中运行我的项目npm run serve:ssr等.

但是:我有一个自定义API用于node.js/express服务器,它充当我后端的包装器.

在开发项目中使用ng serve或者npm run start我有一个工作的Angular应用程序,在文件更改时自动重新加载等.不幸的是在开发中server.ts文件被忽略,所以我的API包装器不可用.

那么有没有人server.ts使用开发中使用的文件启动并运行新的Angular Starter Kit ？

我有一个结构为{type：“ Buffer”，data：Array（702549）}的File对象类型，我需要在angular 6中做什么才能在浏览器中下载该文件？

我从此函数得到响应：

  getMarketingProposalById(id: string): Observable<MarketingProposal> {
    return this.httpClient.get<MarketingProposal>(this.apiUrl  + id , this.httpOptions).pipe(map(marketingProposal => {
      if (marketingProposal.materials[0] && marketingProposal.materials[0].file) {
        const blob = new Blob([marketingProposal.materials[0].file.data], { type: 'image/png' });
        console.log(blob);
        // saveAs(blob, 'hello.png');
      }
      const marketingProposalObject = this.assignMarketingProposalObject(marketingProposal);
      this.mapStringToDate(marketingProposalObject);
      return marketingProposalObject;
    }));
  }

marketingProposal.materials [0] .file的格式为{类型：“缓冲区”，数据：数组（702549）}