标签: angular-universal

我正在尝试将我的 angular 6 应用程序转换为服务器端渲染（用于 SEO 目的），并且一切似乎都编译无误。除了当我实际导航到本地主机时，我得到了完整的错误

Error: No NgModule metadata found for '[object Object]'.
at NgModuleResolver.resolve (/execroot/angular/packages/compiler/src/ng_module_resolver.ts:31:15)
at CompileMetadataResolver.getNgModuleMetadata (/execroot/angular/packages/compiler/src/metadata_resolver.ts:509:41)
at JitCompiler._loadModules (/execroot/angular/packages/compiler/src/jit/compiler.ts:127:49)
at JitCompiler._compileModuleAndComponents (/execroot/angular/packages/compiler/src/jit/compiler.ts:107:32)
at JitCompiler.compileModuleAsync (/execroot/angular/packages/compiler/src/jit/compiler.ts:61:33)
at CompilerImpl.compileModuleAsync (/execroot/angular/packages/platform-browser-dynamic/src/compiler_factory.ts:57:27)
at /execroot/nguniversal/modules/express-engine/src/main.ts:130:16
at new ZoneAwarePromise (/Users/melliotfrost/projects/myapp/node_modules/zone.js/dist/zone-node.js:891:29)
at getFactory (/execroot/nguniversal/modules/express-engine/src/main.ts:115:10)
at View.engine (/execroot/nguniversal/modules/express-engine/src/main.ts:92:7)

我正在运行命令 npm run build:ssr && npm run serve:ssr

app.module.ts（主模块）

Error: No NgModule metadata found for '[object Object]'.
at NgModuleResolver.resolve (/execroot/angular/packages/compiler/src/ng_module_resolver.ts:31:15)
at CompileMetadataResolver.getNgModuleMetadata (/execroot/angular/packages/compiler/src/metadata_resolver.ts:509:41)
at JitCompiler._loadModules (/execroot/angular/packages/compiler/src/jit/compiler.ts:127:49)
at JitCompiler._compileModuleAndComponents (/execroot/angular/packages/compiler/src/jit/compiler.ts:107:32)
at JitCompiler.compileModuleAsync (/execroot/angular/packages/compiler/src/jit/compiler.ts:61:33)
at CompilerImpl.compileModuleAsync (/execroot/angular/packages/platform-browser-dynamic/src/compiler_factory.ts:57:27)
at …

我是 Angular 通用和 Socket.io 的新手。

我想使用Angular-universal（Angular-6）为服务器端渲染Socket.io和NodeAPI server（express）项目创建一个MEAN堆栈项目。

我使用angular-cli6 来生成 Angular-6 项目。

所以，我的问题是如何配置 Angular-universal(Angular 6) + Socket.io + Node API 服务器项目（带有 Angular 通用和 Socket.io 的 MEAN 堆栈）。

任何文章或博客都会非常有帮助。

提前致谢。

这是我的服务器代码，下一个片段渲染角度home.comnponent：

app.get("*", (req, res) => {
    res.render(
        `../${CLIENT_DIST_DIR}/index`,
        {
            req: req,
            res: res,
            providers: [
                {
                    provide: REQUEST, useValue: (req)
                },
                {
                    provide: RESPONSE, useValue: (res)
                },
                {
                    provide: "ORIGIN_URL",
                    useValue: (`${http}://${req.headers.host}`)
                }
            ]
        },
        (err, html) => {
            if (err) {
                Log.error("NG render error", err);
                throw err;
            }
            res.send(html);
        }
    );
});

这是我home.component的错误：

@Component({
    selector: "app-home",
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
    constructor(private http: TransferHttpService,
                @Inject(AppStorage) private appStorage: Storage) {
    }

    ngOnInit(): …

我下载了以下 angular 项目并按照他们的说明进行安装。

https://snipcart.com/blog/angular-seo-universal-server-side-rendering

npm install ... 工作正常。

ng serve .... 工作正常

npm run build:ssr&& npm run serve:ssr... 这给出了一个错误。

（节点：5644）[DEP0005] 弃用警告：由于安全和可用性问题，不推荐使用 Buffer()。请改用 Buffer.alloc()、Buffer.allocUnsafe() 或 Buffer.from() 方法。

我正在使用节点版本 v10.1.0

在本地主机上，虽然有 DeprecationWarning，但它正在运行。但是在显示相同错误后，dist 文件夹中的 server.js 无法运行。

谁能建议我为什么会收到此错误以及解决方案是什么？

我有一个 angular6 通用应用程序，我正在为图像滑块集成ng-simple-slideshow，它构建成功，但是在运行时： npm run serve：SSR 给出以下错误：请提出一些解决方案。谢谢

ReferenceError: window is not defined
at F:\new_trd_back_up\dist\server.js:247023:8032
at vt (F:\new_trd_back_up\dist\server.js:246852:163)
at Object.module.exports (F:\new_trd_back_up\dist\server.js:246852:177)
at __webpack_require__ (F:\new_trd_back_up\dist\server.js:20:30)
at Object.jspdf (F:\new_trd_back_up\dist\server.js:87271:18)
at __webpack_require__ (F:\new_trd_back_up\dist\server.js:59361:30)
at Object../src/app/presentation/presentation.component.ts (F:\new_trd_back_up\dist\server.js:81159:13)
at __webpack_require__ (F:\new_trd_back_up\dist\server.js:59361:30)
at Object../src/app/presentation/presentation.component.ngfactory.js (F:\new_trd_back_up\dist\server.js:81046:11)
at __webpack_require__ (F:\new_trd_back_up\dist\server.js:59361:30)

我已经克隆了这个项目https://github.com/enten/angular-universal 一切正常，我可以在 chrome 上查看源页面但是当我尝试动态更改数据（例如标题）时，当我检查Chrome 中的页面源。为什么？有没有办法改变服务器端的内容？

有关更多信息，我有一个显示评论列表和用于添加评论的输入字段的应用程序。第一次加载页面时，我可以在“页面源”中看到评论列表。但是当我添加评论，并查看页面来源时，内容与初始值相同。下面是一个简单的例子

这是 post.component.html

<p>{{result}}</p>
<button (click)="changeMessage()">Clique moi</button>

和 post.component.ts

import { Component, OnInit, PLATFORM_ID, Inject, NgZone } from '@angular/core';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { isPlatformServer } from '@angular/common';

const RESULT_KEY = makeStateKey<string>('result');
declare var window: any;

@Component({
    selector: 'app-post',
    templateUrl: './post.component.html',
    styleUrls: ['./post.component.css']
})
export class PostComponent implements OnInit {
    public result;
    private isServer: boolean;
    constructor(
        private tstate: TransferState,
        @Inject(PLATFORM_ID) platformId,
        private _ngZone: NgZone
    ) {
        this.isServer = isPlatformServer(platformId);
    } …

我遇到了 Angular Universal 和路由器动画的问题。我的案子很简单但很难解决（至少对我来说）。Universal 呈现 HTML 文档并将其发送到浏览器。然后角度浏览器应用程序被下载，当它下载并触发时，路由器插座动画被触发。它看起来很糟糕，好像组件正在重新加载/刷新。这只是第一个初始动画触发器的情况。

我创建了一个存储库来重现此问题：https ://github.com/BazylPL/angular-ssr-router-test

为了让它继续运行，我使用“npm run dev:ssr”命令。当使用网络限制时，这个问题很容易发现，例如“快速 3g”

有人知道我做错了什么还是内部设计问题？

我已经使用 firebase 商店创建了项目。现在我想在其上实现服务器端渲染。当我运行程序时，我为 ssr 做了所有事情之后，这就是我得到的

ReferenceError: window is not defined
    at Object.ex9U (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:166129:4)
    at __webpack_require__ (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:26:30)
    at Module.vvyD (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:271824:80)
    at __webpack_require__ (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:26:30)
    at Module.PCNd (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:131612:74)
    at __webpack_require__ (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:26:30)
    at Module.ZAI4 (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:154371:80)
    at __webpack_require__ (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:26:30)
    at Module.24aS (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:47619:69)
    at __webpack_require__ (C:\Users\waqas\Desktop\ng-blog\dist\ng-blog\server\main.js:26:30)

A server error has occurred.
node exited with 1 code.
connect ECONNREFUSED 127.0.0.1:63621

这是我的文件 package.json

{
    "name": "ng-blog",
    "version": "0.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "dev:ssr": "ng run ng-blog:serve-ssr",
        "serve:ssr": "node dist/ng-blog/server/main.js",
        "build:ssr": "ng build …

我最近将我的 Angular 应用程序版本 11 更新为 12。也使用 SSR。以前它工作得很好。现在，在 SSR 构建中，它加载 CSS 的时间有点晚，并首先显示原始 HTML，并在一段时间后加载 CSS。我尝试从 angular.json 更改 CSS 文件的顺序，但没有任何效果。

截屏

我正在开发 Angular 14 应用程序，并尝试制作带有动态路线的 Twitter 卡。案例如下：

1. 我有一个在线商店，显示不同的产品，显然是相同的路线，只是通过路线中的参数更改产品信息

   {
     path: 'product/:id',
     component: ProductLayoutComponent,
     children: [{ path: '',  loadChildren: () => import('./pages/section-custom/modules/product/product.module').then(m => m.ProductComponent) },  ]
   }
   

   Run Code Online (Sandbox Code Playgroud)

2. 该页面有两个按钮用于在 Facebook 和 Twitter 上分享产品的链接，这里是代码

   productId: string;
   constructor(public activatedRoute: ActivatedRoute) {
     this.activatedRoute.params.subscribe((params) => {   this.productId = params['id']; });
   }
   
   shareFacebook() {
     const facebookshare = 'https://www.facebook.com/sharer/sharer.php?u=' + this.productId;
     window.open(facebookshare, '_blank');
   }
   
   shareTwitter() {
     const facebookshare = 'https://twitter.com/intent/tweet?url=' + this.productId;
     window.open(facebookshare, '_blank');
   }
   

   Run Code Online (Sandbox Code Playgroud)

3. 每个产品都有自己的图像、标题和描述出现在 Twitter 卡片和 Facebook 帖子中，经过多天的研究，我了解到社交网络爬虫需要读取一些元标记才能正确显示帖子和卡片，所以当我加载时我的产品有这个功能：

    productId: string;
    constructor(public activatedRoute: ActivatedRoute: public http: HttpClient,  private …

   Run Code Online (Sandbox Code Playgroud)