标签: ssr

我在Angular Universal的angular 2应用程序中使用SSR。

这导致我的快递服务器有5秒的响应时间！难道我做错了什么？？

就像节点在渲染过程中挂起一样。

在此处输入图片说明

如您所知，我们可以轻松地使用样式加载器将样式添加到我们的react项目中，但是该窗口在服务器端渲染中不可用，那么如何使用样式加载器（或在SSR项目中替代样式加载器）？

当我使用style-loader时，它按预期返回此错误：

 .../public/server.js:866
        return window && document && document.all && !window.atob;
        ^

    ReferenceError: window is not defined

我正在尝试通过此链接https://angular.io/guide/universal使用Angular Universal使用SSR渲染Angular 7应用程序。我以为我可以从那里开始一切工作，因为我能够查看页面源代码并看到呈现给页面的app.component内部的所有内容。但是，我无法在router-outlet标记内渲染任何路线

我只是简单地剥离了我的应用程序，以完全按照文档中的说明进行操作。我在其中读到了一些有关确保ModuleMapLoaderModule在app.server.module内部的内容，以便进行延迟加载。默认情况下，angular-cli命令会附带此命令，因此我不确定发生了什么。

app.server.module

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

import { AppComponent } from './app.component';
import { AppModule } from './app.module';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule,
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

tsconfig.server.json

  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app-server",
  },
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

server.ts

import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
// Express …

我将http请求作为服务注入到我的组件并从那里订阅.由于我在应用程序中引入了带有角度通用的服务器端渲染,因此页面上的结果至少重复两次.

我有点击的方法,它对facebook的api执行http请求

getAlbum(albumId: number) {

    this.albumPhotos = this.state.get(ALBUM_PHOTOS_KEY, null as any);

    if (!this.albumPhotos) {
      this.facebookService.getBachadiffAlbumPhotos(albumId).subscribe(res => {
        this.bachataPicsArray = res;
        this.state.set(ALBUM_PHOTOS_KEY, res as any);
      });
    }
  }

我声明const变量低于导入

const ALBUM_PHOTOS_KEY = makeStateKey('albumPhotos');

我也宣布了这个财产

albumNames: any;

我假设我已完成所有导入,我在gallery组件中的github上有代码.

我试图将Angular 8应用程序设置为与SSR一起运行，但是当我使用时，我的延迟加载模块在webpack中触发了一些未定义的错误ng serve。在使用Angular 7之前，它运行良好，但是转到Angular 8时，一切都变了。这是我在运行时遇到的错误（在节点控制台中）

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (/Users/gwenaellarmet/Documents/Projects/ng-nouma/dist/server.js:137403:30)
    at Function.requireEnsure [as e] (/Users/gwenaellarmet/Documents/Projects/ng-nouma/dist/server.js:137422:25)
    at ?11 (/Users/gwenaellarmet/Documents/Projects/ng-nouma/dist/server.js:139660:6210)
    at RouterConfigLoader.loadModuleFactory (/Users/gwenaellarmet/Documents/Projects/ng-nouma/dist/server.js:232758:39)

我尝试更改一些tsconfig和angular.json配置，但是我总是遇到相同的错误。常春藤未启用，因为它还会在构建时触发一些错误。我认为它是链接的，但我不确定，所以现在我试图在没有常春藤的情况下使它工作

ERROR in src/app/pages/search/search.module.ts(68,12): error TS-991010: Value at position 12 in the NgModule.importss of SearchModule is not a reference: [object Object]
src/app/app.module.ts(41,12): error TS-991010: Value at position 6 in the NgModule.importss of AppModule is not a reference: [object Object]

tsconfig.json …

有什么方法可以记录服务器端nuxtjs完成的所有网络请求吗？

我已经在使用node --inspect启用Chrome控制台了，但是那里缺少“网络”标签。

非常感谢您提供任何提示。

我有一个用Nuxt.js构建的项目，我想使用express来报告asyncData方法等上的bugsnag错误。

我将如何导入？我想这不像npm install express --save那样简单。

我已经有一个用PHP编写的api，所以我不会将其用作api或其他任何东西。

是过度杀伤力吗？还是有必要的邪恶？：D

我正在尝试将我的VueJS应用程序转换为NuxtJS以与SSR一起使用。我被困试图用asyncData加载数据。当我将查询添加到'mounted() {}'函数中时，它可以正常工作asyncData(){}，但无法使用它，因此可以使用SSR。

有谁知道如何解决这个问题。

我的代码：

 <ul>
   <li v-for='province in provinces' v-bind:key="province.id"> {{province.name_nl}}</li>
      </ul>

  asyncData () {
    return { msg: 'Welcome to my  new app' }
    const moment = require("moment");
    var date = moment(new Date()).format("YYYY-MM-DD");
    let housesArray = []
    let provincesArray = []

    return firebase.firestore()
      .collection('provinces')
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
        provincesArray.push(doc.data());
        });
        return {provinces: provincesArray}
      });
  },

还是我应该采取另一种方式？请记住，它确实必须与SSR一起使用。

PS：是的，此代码位于我的页面文件夹中，而不是组件中，我知道这是不允许的。

我正在尝试使用dotnet核心创建一个Angular 7 SSR来托管它，默认模板使用angular 5，并且MS有文档来使SSR在其上运行（效果很好），我尝试通过命令行将其升级到angular 7并开始一个新的角度项目并实施SSR之后，但我总是遇到相同的问题，ng build和ng build：SSR在命令行上都可以正常工作，但是当我从VS运行它时，它超时了（我认为引发错误后，与该问题无关）：

The thread 0x6608 has exited with code 0 (0x0).
The thread 0x1134 has exited with code 0 (0x0).
The thread 0x54bc has exited with code 0 (0x0).

在此之后（https://github.com/aspnet/Templating/issues/593），我对NG5 SSR（https://go.microsoft.com/fwlink/?linkid=864501）所做的更改是：

startup.cs

options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.bundle.js";

至

options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.js";

再次将SSR项目添加到angular.json

 "ssr": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist-server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "optimization": false,
              "outputHashing": "media", …

让我们考虑做一个在浏览器中运行的测验。创建此类测验时，您希望在服务器端隐藏该测验的答案，以便客户端无法使用浏览器开发工具访问这些测验。

例如，这是Vue中的一个测验应用程序，它是不安全的，因为包含问题和答案的JSON数据已发送到前端。我曾考虑过使用服务器端渲染，但是答案仍然会发送到前端。

在客户端JavaScript应用程序中隐藏敏感数据可以使用哪些策略？如果JS无法保证数据的安全性，我该如何使用服务器对测验应用程序的答案进行验证？