标签: angular-universal

CookieConsent 和库版本？

- cookieconsent version: 3.1.1\n- ngx-cookieconsent version: 2.2.3\n- Angular CLI: 10.0.3\n- Angular SSR (universal)\n

我正在运行以下命令：

npm run build:ssr && npm run serve:ssr\n

在哪里：

"serve:ssr": "node dist/compy/server/main.js",\n\n"build:ssr": "ng build --prod && ng run compy:server:production",\n

失败给出的日志

Node Express server listening on http://localhost:4000\n\nERROR TypeError: Cannot read property 'initialise' of undefined\n    at NgcCookieConsentService.init (C:\\Coding\\compyFront\\dist\\compy\\server\\main.js:1:3482889)\n    at new NgcCookieConsentService (C:\\Coding\\compyFront\\dist\\compy\\server\\main.js:1:3482119)\n    at Object.NgcCookieConsentService_Factory [as factory] (C:\\Coding\\compyFront\\dist\\compy\\server\\main.js:1:3484065)\n    at R3Injector.hydrate (C:\\Coding\\compyFront\\dist\\compy\\server\\main.js:1:2802301)\n    at R3Injector.get (C:\\Coding\\compyFront\\dist\\compy\\server\\main.js:1:2799033)\n    at NgModuleRef$1.get (C:\\Coding\\compyFront\\dist\\compy\\server\\main.js:1:2977443)\n    at Object.get (C:\\Coding\\compyFront\\dist\\compy\\server\\main.js:1:2946537)\n    at …

我正在使用带有 Angular Material 的弹出登录，当我添加 Angular Universal 时，身份验证防护就是问题所在。如果某些路由受到身份验证保护，则页面只会开始挂起，并且永远不会结束。没有 Angular Universal 的行为是重新加载页面时它只是打开弹出窗口进行登录。

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(readonly auth: AuthService, public router: Router, private dialog: MatDialog, private store: Store<fromAuth.State>) {}

    /** Performs the user authentication prompting the user when neeed or resolving to the current authenticated user otherwise */

    public authenticate(action: loginAction = 'signIn') {
      return this.store.pipe(
        select(fromAuth.selectAuthState),
        take(1),
        switchMap(user => !user.user ? this.prompt(action) : of(user.user))
      ).toPromise();
    }

  public prompt(data: loginAction = 'signIn'): Promise<any> {

    return this.dialog.open<LogInComponent, loginAction>(LogInComponent, { data …

我最近安装了 Angular 13 并尝试安装 @nestjs/ng-universal

ng 添加@nestjs/ng-universal

这适用于以前的角度版本，但我成功安装了软件包，然后出现此错误：

*An unhandled exception occurred: Package subpath './schematics/utils' is not defined by 
"exports" in C:\Users\ADMIN\kiambol\node_modules@nguniversal\express-engine\package.json
See "C:\Users\ADMIN\AppData\Local\Temp\ng-1gySjP\angular-errors.log" for further 
details.*

angular-errors.log 文件中的完整错误是：

[error] Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './schematics/utils' is not defined by "exports" in C:\Users\ADMIN\kiambol\node_modules@nguniversal\express-engine\package.json
at throwExportsNotFound (internal/modules/esm/resolve.js:299:9)
at packageExportsResolve (internal/modules/esm/resolve.js:522:3)
at resolveExports (internal/modules/cjs/loader.js:449:36)
at Function.Module._findPath (internal/modules/cjs/loader.js:489:31)
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:875:27)
at Function.Module._load (internal/modules/cjs/loader.js:745:27)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object. (C:\Users\ADMIN\kiambol\node_modules@nestjs\ng-universal\schematics\install\index.js:15:17)
at Module._compile (internal/modules/cjs/loader.js:1072:14)

当我查看角度项目文件时，没有任何更改，并且服务器文件未设置。我尝试创建不同的角度项目只是为了看看我的角度项目是否没有正确选择，然后再次添加ng add @nestjs/ng-universal ，仍然得到相同的结果。

为了测试一下，我尝试使用ng …

我正在使用 Angular 16.0.0 和 Angular Universal 服务器端渲染，但是当我BrowserModule.withServerTransition在应用程序模块中导入时，它被标记为已弃用，它的替代品是什么？

我的应用程序模块.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {MatMenuModule} from '@angular/material/menu';
import {MatButtonModule} from '@angular/material/button'
import {MatIconModule} from '@angular/material/icon';
import {MatCardModule} from '@angular/material/card';
import { HomeComponent } from './home/home.component';
import {MatTabsModule} from '@angular/material/tabs';
import { CoursesCardListComponent } from './courses-card-list/courses-card-list.component';
import {CourseComponent} from "./course/course.component";
import { MatDatepickerModule } from "@angular/material/datepicker";
import { MatDialogModule } from "@angular/material/dialog";
import { …

是否可以根据条件导入模块？具体来说，仅当在浏览器中而不是在服务器中渲染angular 2通用应用程序时，才导入外部模块。

这个问题与某些依赖浏览器功能的PrimeNG模块有关，只能在浏览器中呈现。最好在服务器渲染时省略它们，因为日历和其他组件对于SEO并不真正重要。

目前，如果关闭服务器渲染，则可以渲染日历组件。但是，当我在app.module.ts中包含以下代码并打开服务器渲染时，服务器在button.js中产生错误“ ReferenceError：未定义事件”。

import { CalendarModule } from 'primeng/components/calendar/calendar';
@NgModule({
    ...
    imports: [
        ...,
        CalendarModule
    ]
})

角度提供了一个isBrowser条件。

import { isBrowser } from 'angular2-universal';

但是我不知道如何将其用于条件导入。是否真的有针对模块的方法？

我需要将Angular 4 Web应用程序转换为Angular Universal.原因是目前,Web应用程序无法被Google(以及Facebook社交预览缩略图)正确编入索引,因为它是单页应用程序并在客户端.所以现在我需要实现Angular Universal,服务器端渲染.

我了解了如何使用这个精彩的视频系列创建一个新的Angular Universal应用程序.

问题:您能否告诉我我必须遵循将现有应用转换为Angular Universal的方向.可能是一个不错的URL或步骤或任何方向将受到高度赞赏.

注意:这里角度版本不是问题.2或者是.或者4.

我在yo generator-aspnetcore-spa 运行应用程序后就遇到问题

处理请求时发生未处理的异常。

NodeInvocationException：60000ms之后，节点调用超时。您可以通过在NodeServicesOptions上设置InvocationTimeoutMilliseconds属性来更改超时持续时间。

调试的第一步是确保Node.js函数始终调用提供的回调（或同步引发异常），即使遇到错误也是如此。否则，.NET代码无法知道它已完成还是失败。Microsoft.AspNetCore.NodeServices.HostingModels.OutOfProcessNodeInstance + d__13.MoveNext（）

NodeInvocationException：60000ms之后，节点调用超时。您可以通过在NodeServicesOptions上设置InvocationTimeoutMilliseconds属性来更改超时持续时间。调试的第一步是确保Node.js函数始终调用提供的回调（或同步引发异常），即使遇到错误也是如此。否则，.NET代码无法知道它已完成还是失败。

和红色在这条线上

AspNetCore._Views_Home_Index_cshtml + d__31.MoveNext（）in Index.cshtml + ViewData [“ Title”] =“ Home Page”;

这是我的package.json的样子

{
  "name": "WebApplicationBasic",
  "version": "0.0.0",
  "dependencies": {
    "@angular/animations": "^4.3.0",
    "@angular/common": "^4.3.0",
    "@angular/compiler": "^4.3.0",
    "@angular/core": "^4.3.0",
    "@angular/forms": "^4.3.0",
    "@angular/http": "^4.3.0",
    "@angular/platform-browser": "^4.3.0",
    "@angular/platform-browser-dynamic": "^4.3.0",
    "@angular/platform-server": "^4.3.0",
    "@angular/router": "^4.3.0",
    "@types/node": "^7.0.38",
    "angular2-template-loader": "^0.6.2",
    "aspnet-prerendering": "^2.0.6",
    "aspnet-webpack": "^1.0.29",
    "awesome-typescript-loader": "^3.2.1",
    "bootstrap": "^3.3.7",
    "css": "^2.2.1",
    "css-loader": "^0.28.4",
    "es6-shim": "^0.35.3",
    "event-source-polyfill": "0.0.9",
    "expose-loader": "^0.7.3",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.11.2",
    "html-loader": "^0.4.5",
    "isomorphic-fetch": "^2.2.1", …

我正在构建一个Angular Universal App，现在我所拥有的只是该网站的结构。我所做的所有事情都像教程中有关为Angular Universal转换我的应用程序一样。

console.log("got Request " + new Date());
res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req , time: true}, 
   function(err, html) {
      console.log("finished Rendering " + new Date());
      res.send(html);
   }   
);

渲染需要3个半秒。.对我来说，这似乎是很长的时间。同样在Chrome TTFB中的DeveloperTools中为3.5秒。而且该应用程序除了路由之外什么也不做。我不希望我的未来应用这么慢。

是否有人知道这是正常现象还是需要改进的地方？Github回购与问题 https://github.com/Joniras/slow-universal-rendering-example

设置工作区并运行角度通用：

npm install   
npm run build:universal   
npm run serve:universal     

版本：
Angular CLI: 1.5.0
Node: 6.11.5 OS: win32 x64 Angular: 5.0.1 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, platform-server, router @angular/cdk: 5.0.0-rc0 @angular/cli: 1.5.0 @angular/flex-layout: 2.0.0-beta.10-4905443 @angular/material: 5.0.0-rc0 @angular-devkit/build-optimizer: 0.0.33 @angular-devkit/core: …

我们可以Rendered2在Angular应用程序的浏览器版本中使用,但它需要document.body引用,并且在服务器呈现时不可用.

platform-browser有Title和Meta组件,但我想有更多的控制<head>部分,如注入<script>标签,访问body元素等.

有办法吗？

我遵循了官方的angular-cli 教程，将angular-universal集成到我现有的angular-cli应用程序中。

我可以为我的angular-cli应用程序执行SSR。但是当我尝试集成ngx-leaflet时，出现以下错误：

ReferenceError：导航器未在D：\ ng2-ssr-pwa \ dist \ server.js：40251：29定义

现在，我知道传单正在尝试访问Node上下文中不可用的导航器对象。因此，我决定延迟传单的呈现，直到此SO线程中给出的页面加载到浏览器中为止。但是我仍然遇到同样的错误。您可以在此处查看带有传单问题的演示应用程序。

./src/app/browserModuleLoader.service.ts：

import { Component, Inject, Injectable, OnInit, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

@Injectable()
export class BrowserModuleLoaderService {
    private _L: any;

    public constructor(@Inject(PLATFORM_ID) private _platformId: Object) {
        this._init();
    }

    public getL() {
        return this._safeGet(() => this._L);
    }

    private _init() {
        if (isPlatformBrowser(this._platformId)) {
            this._requireLegacyResources();
        }
    }

    private _requireLegacyResources() {
        this._L = require('leaflet');
    }

    private _safeGet(getCallcack: () => any) …