标签: angular-universal

我正在使用库ng2-mqtt,我在我的组件中使用它是这样的:

 import 'ng2-mqtt/mqttws31.js';
declare var Paho: any;

现在我收到以下错误:

ReferenceError: window is not defined
    at Object.<anonymous> (/Users/Picchu/Documents/em3/node_modules/ng2-mqtt/mqttws31.js:2143:4)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/Picchu/Documents/em3/dist/server.js:18707:18)

Run Code Online (Sandbox Code Playgroud)

我该如何解决这个问题？

我有我的 ssr 响应服务，其中包括重定向方法：

import { Injectable, Inject } from '@angular/core';

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

@Injectable()
export class SsrResponseService {
  constructor(@Inject(RESPONSE) private response: Response) {}

  redirect(url: string, code?: number) {
    if (!!code) {
      return this.response.redirect(code, url);
    } else {
      return this.response.redirect(url);
    }
  }
}

然后，在我的组件中，如果不满足某些条件，我需要重定向用户：

this.responseService.redirect('/some-other-url', 301);

重定向工作正常，用户被重定向，但服务器记录：

Unhandled Promise rejection: Can't set headers after they are sent. ; 
Zone: <root> ; Task: Promise.then ; Value: Error: Can't set headers after they are …

我正在使用Angular Universal。对于在我的服务器或浏览器平台上运行的路由，我的行为有所不同。这是警卫：

export class UniversalShellGuard implements CanActivate {
  private isBrowser: boolean;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    console.log('PLATFORM_ID = ' + platformId);
    this.isBrowser = isPlatformBrowser(this.platformId);
  }

  canActivate(): Observable<boolean> | Promise<boolean> | boolean {
    return !this.isBrowser;
  }
}

如您所见，警卫正在注入PLATFORM_ID并使用它来确定他是否愿意canActivate()。

现在，我想为后卫编写一个简单的单元测试，并执行以下操作：

describe('UniversalShellGuard', () => {
  let guard: UniversalShellGuard;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        UniversalShellGuard,
        // Idea: for now I just want to test the behaviour if I would be on the browser, so I would just use a …

我正在尝试实现内置的TransferHttpCacheModule以消除重复请求。我在我的应用程序中使用这个拦截器：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authService = this.injector.get(AuthenticationService);
    const url = `${this.request ? this.request.protocol + '://' + this.request.get('host') : ''}${environment.baseBackendUrl}${req.url}`

    let headers = new HttpHeaders();

    if (this.request) {
      // Server side: forward the cookies
      const cookies = this.request.cookies;
      const cookiesArray = [];
      for (const name in cookies) {
        if (cookies.hasOwnProperty(name)) {
          cookiesArray.push(`${name}=${cookies[name]}`);
        }
      }
      headers = headers.append('Cookie', cookiesArray.join('; '));
    }

    headers = headers.append('Content-Type', 'application/json');

    const finalReq: HttpRequest<any> = req.clone({ url, headers });
    ...

它启用客户端的相对 URL …

我已经阅读了几篇文章，其中一些是Angular Universal官方页面，此处的介绍等。

我不完全了解-Angular Universal服务器是否仍提供单个页面（大量的html），还是有一种方法可以配置Angular Universal以基于以下方式返回多个页面（一次应用程序的一部分）路线（请求/路线）？

最终目标是在不存在路由的情况下返回硬404（但是，就上下文而言，这超出了此问题的范围）。

对我来说令人困惑的部分是：

这是因为与服务器端渲染的HTML一起，我们还将向浏览器提供普通的客户端Angular应用程序。

然后，此Angular客户端应用程序将接管页面，从那里开始，所有内容都像正常的单页面应用程序一样工作，这意味着所有运行时渲染将像往常一样直接在客户端上进行。

那么，究竟是the server-side rendered HTML什么？它是预先渲染的WHOLE应用程序，还是某种程度上针对用户要求的“路线” /视图/内容？

我按照本教程创建服务器端渲染的应用程序。之后我运行 npm install firebase @angular/fire --save 并像这样导入 AppModule 中的模块

import { AngularFireModule } from "@angular/fire";
import { AngularFirestoreModule } from "@angular/fire/firestore";
import { AngularFireStorageModule } from "@angular/fire/storage";

 AngularFireModule.initializeApp(environment.firebase),
 AngularFirestoreModule,
 AngularFireStorageModule,

当我尝试使用 npm run build:ssr && npm run serve:ssr 为应用程序提供服务时发生错误。我得到的错误是

C:\Users\user\Documents\prueba\PruebaApp\dist\server\main.js:159431
        throw new Error("package.json does not exist at " + package_json_path);
        ^
Error: package.json does not exist at C:\Users\user\Documents\prueba\PruebaApp\dist\package.json
    at Object.PsoT.exports.find (C:\Users\user\Documents\prueba\PruebaApp\dist\server\main.js:159431:15)
    at Object.wPNL (C:\Users\user\Documents\prueba\PruebaApp\dist\server\main.js:188373:12)
    at __webpack_require__ (C:\Users\user\Documents\prueba\PruebaApp\dist\server\main.js:20:30)
    at Object.XpdW (C:\Users\user\Documents\prueba\PruebaApp\dist\server\main.js:166719:12)
    at __webpack_require__ (C:\Users\user\Documents\prueba\PruebaApp\dist\server\main.js:20:30)
    at Object.g1pB (C:\Users\user\Documents\prueba\PruebaApp\dist\server\main.js:175163:27)
    at __webpack_require__ …

我已经使用 Angular Universal 实现了服务器端渲染，我们的网站出现了问题，一切正常，但是在加载页面时，它加载了两次。一切都是根据 SSR 的 Angular Universal 指南完成的，任何人都可以帮助我有了这个问题。

我正在开发一个有角度的通用 SSR 应用程序，想为页面浏览添加 Google Analytics 跟踪，但无法让它工作。

我尝试过的大多数软件包都不适用于 SSR，因为它们试图直接访问窗口/文档。

最终我得到了一个我想分享的相当基本的解决方案。

我angular cli从6版本升级到8.1，Angular universal已经改变了简单的构建方法@nguniversal/module-map-ngfactory-loader，我应该重新部署，清除旧配置。

1. 跑 ng add @nguniversal/express-engine --clientProject [project name]

错误信息：

Skipping installation: Package already installed
Target name already exists.

2. 跑 npm install --save @nguniversal/module-map-ngfactory-loader

3. 构建通用，运行build:ssr（“npm run build:client-and-server-bundles && npm run compile:server”）

错误信息：

我需要删除一些文件，修改一些文件并重新安装@nguniversal/express-engine？

我目前正在将我的 angular 应用程序切换到通用 ssr 应用程序。我的最后一个问题是我的自定义 HttpInterceptor 触发了两次。我正在检查我的 api 调用的 http 响应代码，如果出现错误，则会显示一个弹出窗口。自从我切换到通用后，我两次收到相同的错误弹出窗口。

@Injectable()
export class HttpSetHeaders implements HttpInterceptor {
  constructor(
    @Inject(PLATFORM_ID) private platformId,
    @Inject(LOCAL_STORAGE) private localStorage: any,
    private authService: AuthService,
    private router: Router,
    private notifierService: NotifierService
  ) { }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log(isPlatformServer(this.platformId))
    ......
}

每次 HTTPClient 调用后，我都会看到两次控制台日志输出。

我在 app.module 中导入了 TransferHttpCacheModule，在 app.server.module 中导入了 TransferHttpCacheModule

谢谢马库斯