标签: angular-universal

我正在尝试访问 Angular2 中的 div，如下所示：

import { Component, ViewChild, ElementRef, AfterContentInit } from '@angular/core';

@Component({
    selector: 'main',
    template: `
    <div  #target class="parent">
        <div class="child">
        </div>
    </div>
  `
})

export class MainComponent implements AfterContentInit {
    @ViewChild('target') elementRef: ElementRef;

    ngAfterContentInit(): void {
        var child = this.elementRef.nativeElement.querySelector('div');
        console.log(child);
    }
}

但我得到以下异常：

异常：调用节点模块失败并出现错误：TypeError：this.elementRef.nativeElement.querySelector 不是函数

我目前正在我的应用程序中实现 Angular Universal。我已经有一堆错误需要解决，但我坚持这个错误。我可以构建我的应用程序，aot 编译工作正常，但是当我运行应该引导我的应用程序的服务器时，我可以看到该错误：

我的 \node_modules\ng2-translate\src\translate.pipe.js:1 中出现意外的令牌导入

我已经看到服务器版本有一个特殊的加载器使用 fs 而不是 http 来查找与语言对应的 json 文件。

所以这是我的代码：

应用程序.浏览器.模块.ts

`import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TranslateModule, TranslateStaticLoader, TranslateLoader } from 'ng2-translate';
import { Http } from '@angular/http';
import { BrowserStateTransferModule } from '@ngx-universal/state-transfer';

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

@NgModule({
  imports: [
    BrowserModule.withServerTransition({
      appId: 'aml-website'
    }),
    BrowserStateTransferModule.forRoot(),
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: HttpTranslate,
      deps: …

我正在使用 Angular Universal 和 Angular Material 2，因此我只能通过点击来工作（就用户事件而言）。是否可以从选项卡附加（单击）属性来更改索引并提取动态数据。

我曾经有一个 getAlbums 方法，它可以检索 selectedIndexChange 上的图片数组，现在这不是一个选项，还有其他方法吗？

唯一的其他方法是有一个单独的按钮来控制选项卡索引。

错误 ：

factory(require("jquery"), document, window, navigator);
                               ^ReferenceError: document is not defined

面对角度通用渲染服务器端的问题，我用谷歌搜索了这个并浏览了很多帖子，但没有得到任何有用的资源。

是否可以对某些路线不使用角度通用？我想对我的静态页面使用角度通用。当我登录我的应用程序时，我不想使用它。我想用 /app/* 排除路由 我该怎么做？

非常感谢

这是我的 server.ts

 // These are important and needed before anything else
import { enableProdMode } from '@angular/core';
// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import * as express from 'express';
import { join } from 'path';
import 'reflect-metadata';
import 'zone.js/dist/zone-node';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const …

我的角度应用程序将 jquery 用于需要它作为依赖项和其他客户端任务的各种插件。

问题是，universal 无法理解要做什么，因为 jquery 操作服务器端不存在的 dom 元素。

错误参考错误：$未定义

最终目标只是忽略服务器端的 jquery 任务。我读过建议将所有 dom 操作放在仅限客户端的服务中的解决方案，以及使用if (isBrowser) { /* jQuery here */ }...的另一个解决方案，但这对于包装每个 dom 情况并不理想。

https://medium.com/@zainzafar/localstorage-with-angular-universal-2a111fb4af72

这两个都是不错的想法，但我正在寻找更优雅的东西。这将忽略 jquery ($) 而不会出错。例如，以下补丁（放入server.ts）每次都不会出错document或被window使用。无需修改客户端文件即可忽略服务器端。

const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync('./dist/browser/index.html').toString();
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;

在你告诉我不要使用 jQuery 之前。相信我。我知道。但这个决定不在我手中，这不是我在这里要求的。

编辑

我遇到了这篇文章。他找到了一个简单的解决方案来抑制本地存储错误和窗口错误...我正在寻找像这样的 jquery 解决方案 https://blog.khophi.co/localstorage-undefined-angular-server-side-rendering/

app.listen(PORT, () => {
  console.log("process.env.NODE_ENV", process.env.NODE_ENV);
  console.log(`Node server listening on http://localhost:${PORT}`);
});

我在控制台中收到 process.env.NODE_ENV 'none'

构建命令

npm run build:alpha:ssr NODE_ENV=alpha

我的 package.json 文件

{
  "name": "mobilesite-ecommerce",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve -c local",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "serve:ssr": "node dist/server",
    "build:client-and-server-bundles": "ng build --prod --deploy-url=##scripturl## && ng run mobilesite-ecommerce:server:production",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    "build:prerender": "npm run …

我正在开发一个 Angular Universal 应用程序，并试图以最有效的方式防止服务器/客户端上的重复 HTTP 调用。我已经能够通过利用ServerTransferStateModuleonapp.server.module和BrowserTransferStateModuleon来完成任务app.module。在进行 HTTP 调用时，我使用 获取或设置状态变量TransferState。

这有效。我的问题是，目的是什么，TransferHttpCacheModule因为对我来说它无需使用它即可工作，但其他示例表明这是必要的。它对我来说似乎没有必要，所以我想知道它应该如何适应。我感谢您的帮助！

我现在处理这个问题已经快两周了。我尝试了很多解决方法，但似乎没有一个有效。我已经安装angular-fire并安装firebase到它的最新版本，尝试过ng add @angular/fire，配置自定义webpack.config.ts，尝试回滚到每个建议的先前版本。没有人解决这个问题。

实际错误：

de-10@de10-LIFEBOOK-A555:~/Desktop$ node dist/server.js 
internal/modules/cjs/loader.js:797
    throw err;
    ^

Error: Cannot find module 'firebase/app'
Require stack:
- /home/de-10/Desktop/dist/server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/de-10/Desktop/dist/server.js:125276:18)
    at __webpack_require__ (/home/de-10/Desktop/dist/server.js:20:30)
    at Module.<anonymous> (/home/de-10/Desktop/dist/server.js:125199:70)
    at __webpack_require__ (/home/de-10/Desktop/dist/server.js:20:30)
    at Module.<anonymous> (/home/de-10/Desktop/dist/server.js:124984:78)
    at __webpack_require__ (/home/de-10/Desktop/dist/server.js:20:30) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/home/de-10/Desktop/dist/server.js' ]
}

我不能放弃 Firebase 因为然后我面临：

ERROR in ../node_modules/@angular/fire/auth/auth.d.ts:4:28 - error TS2307: Cannot find module 'firebase/app'.

4 …

我在 SSR 上运行的异步管道有问题。没有错误，只有无限循环（似乎服务器正在等待 observable 被解析）。

我在用：

1. @nestjs/ng-universal
2. 角 9
3. 火力基地
4. 接收器

像这样的简单案例有效：

<p>{{ observable | async }}</p>

但是使用结构指令不起作用：

如果

<p *ngIf="(observable$ | async) > 5">{{ observable$ | async }}</p>

恩福

<p *ngFor="let item of items | async">{{ item }}</p>

使用 async 是一个很好的做法，因为它会避免手动取消订阅以避免组件销毁时内存泄漏。但是，使用手动取消订阅有效。

更新 08/06/2020

当我在http://localhost:4200之后添加 index.html 时，应用程序会加载

异步在模板中是这样的：

<ng-container *ngIf="currentUser$ | async; else loadingUser">

并且 currentUser$ 是在ngOnInit组件的方法中设置的：

  ngOnInit(): void {
    this.currentUser$ = this.authService.currentUser$;
  }

更新 16/06/2020

当我们在组件中删除所有 OnPush 检测策略的使用时，即使在结构指令中使用异步，SSR 模式也能工作。

所以这似乎表明在结构指令中使用带有异步的 OnPush TOGETHER 在 SSR 模式下不起作用。 …