标签: angular-universal

我正在寻找一个关于SEO或Metatags与Angular 2的完整工作示例,使用Angular universal在服务器端渲染(由facebook,twiter和其他元标记识别)但我没有成功..

我发现了多篇文章,但有不完整的(没有所有源代码可用)或最旧的(不能使用最新版本编译):

a)blog.devcross.net/2016/04/17/angular--universal-seo-friendly-website/注意:包含源代码的优秀帖子,但它不起作用.

b)builtvisible.com/universal-angular-2-server-side-rendering-seo-crawl-friendliness/注意:非常有用但没有源代码完整源代码..

c)https://gist.github.com/kaaboeld/851bc3190eec67f6723c6054751ee2dc

注意:不完整的工作示例.可能是最好的方法..

d)https://github.com/angular/universal/issues/454 注意:它是c选项的变体,有一些修复......

你有完整的工作实例吗？

提前致谢

我需要获取我的Angular 2应用程序的完整基本URL(例如http:// localhost:5000或https://productionserver.com),以便我可以在应用程序的上下文中将其传递给第三方服务.应用程序的位置取决于它是开发,各种登台/测试环境还是生产,我想动态检测它,所以我不需要维护硬编码列表.

一个类似的问题已经提出,在过去,但答案(即使用window.location.hostname或window.location.origin属性的某些版本),只有当angular2应用程序正在被浏览器呈现工作.

我希望我的应用程序可以与Angular Universal一起使用,这意味着它需要在服务器端呈现,而无法访问像window.location这样的DOM对象.

任何想法如何实现这一目标？供参考,使用asp.net核心作为后端(使用默认的dotnet新角度模板).

我正在尝试从此链接运行通用的入门套件：https://github.com/ng-seed/universal，即使我已按照步骤操作并安装了 Yarn，当我运行命令来运行服务器时，它给我以下错误：

错误：在 DllBundlesControl.getPackageJsonPath (/home/themadhatter/sites/) 的 Function.resolve (internal/module.js:27:19) 的 Function.Module._resolveFilename (module.js:469:15) 找不到模块“yarn” Brandyd-relaunch/node_modules/src/DllBundlesControl.ts:237:39) 在 DllBundlesControl.getPackageJson (/home/themadhatter/sites/brandyd-relaunch/node_modules/src/DllBundlesControl.ts:224:32)

。。。

当我在目录中运行命令“yarn”时，它会显示以下消息：yarn install v1.0.2 [1/4] 正在解析包...成功已经是最新的。2.10 秒内完成。

我尝试谷歌搜索，有丢失其他包的错误，但没有丢失纱线本身的错误。我可以看到错误中缺少模块的位置，但我似乎无法理解为什么它无法递归地访问纱线模块，即使它已安装。

我提到了https://github.com/angular/universal-starter并且已经在angular5.server中实现了在iis中托管后无法正常工作.在localhost中可以正常工作:4000

谢谢

我有一个像这样实施的守卫:

@Injectable()
export class CustomerGuard implements CanActivate {

  constructor(
    private authService: AuthenticationService,
    private dialog: MatDialog
  ) { }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    if (this.authService.isCustomer) {
      return true;
    }
    const dialog = this.dialog.open(SigninModalComponent, {
      data: {
        errorMessage: this.authService.isLoggedIn ?
          'You don\t have access to this page, please use an appropriate account' :
          'Please authenticate to access this page'
      }
    });

    return dialog.afterClosed().pipe(
      map(() => {
        return this.authService.isCustomer;
      })
    );
  }
}

当我在浏览器的地址栏中键入未经授权的路由时,服务器端呈现显示惰性模式,然后当客户端接管时,会显示另一个工作模式,我可以成功验证并访问所请求的路由.

问题是服务器端渲染的模态永远不会消失......

是否有一个干净的解决方案,这并不意味着不显示服务器端的模式？

我们严重依赖 Angular i18n 进行本地化。通常我们会使用命令为语言环境创建一个文件夹

ng build some-project --localize

这将创建/dist/some-project/en/和/dist/some-project/de/

npm run prerender 仅在 /dist/some-project/browser/ 中输出一个，忽略 --localize 标志。我的问题是：预渲染选项是否仍处于某种测试阶段？我们现在应该避免它，还是我在这里遗漏了一些东西？

我的理解是我必须为每个区域创建单独的静态页面。

这是我的 angular.json

"prerender": {
      "builder": "@nguniversal/builders:prerender",
      "options": {
        "browserTarget": "offer:build:prod",
        "serverTarget": "offer:server:prod",
        "routes": [
          "/"
        ]
      },
      "configurations": {
        "prod": {}
      }
    }

我正在使用 Angular 10 在我的项目中应用 SSR。

我发现很多人推荐使用domino.

下面是我的server.ts文件

...

import { existsSync, readFileSync } from 'fs';
import { createWindow } from 'domino';

const scripts = readFileSync('dist/video-website-angular/browser/index.html').toString();

const window = createWindow(scripts);
global['window'] = window;

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';

...

当我运行时npm run dev:ssr，我收到错误

当我提供 SSR 产品构建服务时，我的 Angular 项目中出现以下错误。这是在我将 Angular 从 16.0 升级到 16.1 后发生的，当我恢复回来时就消失了。可能是什么问题？

TypeError: Right-hand side of 'instanceof' is not an object
    at insertElement (/angular/dist/server/main.js:1:479144)
    at insertHTMLElement (/angular/dist/server/main.js:1:478866)
    at before_head_mode (/angular/dist/server/main.js:1:516818)
    at HTMLParser.htmlparser.insertToken (/angular/dist/server/main.js:1:477890)
    at emitSimpleTag (/angular/dist/server/main.js:1:483071)
    at data_state (/angular/dist/server/main.js:1:483109)
    at scanChars (/angular/dist/server/main.js:1:474652)
    at Object.parse (/angular/server/main.js:1:472719)
    at exports2.createDocument (/angular/server/main.js:1:710626)
    at exports2.createWindow (/angular/dist/server/main.js:1:711129)

ng 版本如下：-

更新- 我从前一段时间看到了一个相关问题 - Angular universal with Domino : Getting Right-hand side of 'instanceof' is not an object 我在该问题中看到一条评论说 - there's a fork of domino with a fix(https://www.npmjs.com/package/domino-ext). …

我有一个 Angular 17 服务器端渲染应用程序，它使用 rxjs 间隔定期调用 API GET 端点。代码是这样的：

interval(5000).pipe(
        startWith('Loading...'),
        switchMap(() => this.apiService.get())

但是，当我运行此命令时，我在浏览器控制台中从 Angular 收到此错误：

NG0506：角水合作用期望 ApplicationRef.isStable() 发出true，但它没有在 10000 毫秒内发生。角度水合逻辑取决于应用程序变得稳定作为完成水合过程的信号。欲了解更多信息，请访问https://angular.io/errors/NG0506

我已经尝试过多种解决方案，例如：

• 将间隔包裹起来isPlatformBrowser()
• afterNextRender()在我的组件的构造函数中
• inject(NgZone).runOutsideAngular()在构造函数中

然而，他们都没有给出我想要的结果（每 5 秒调用一次）以及每次我收到水合错误时。那么，什么是最好的方法，什么时候需要使用哪种方法？

在运行“ng test”命令时将 angular 7 项目转换为 angular Universal，错误为“ Incomplete: No specs found, , randomized with seed 48751”。尝试了不同的方式提及 stackoverflow，但对我来说没有任何作用。

ERROR in ./src/polyfills.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: ../src/polyfills.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (../node_modules/@ngtools/webpack/src/packages/ngtools/webpack/src/angular_compiler_plugin.ts:1024:15)
    at plugin.done.then (../node_modules/@ngtools/webpack/src/packages/ngtools/webpack/src/loader.ts:49:29)
    at process._tickCallback (internal/process/next_tick.js:68:7)
 @ multi ./src/polyfills.ts ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/jit-polyfills.js polyfills[0]

预期输出为 ng test 命令正常运行而不会出现任何问题，以便我的单元测试用例执行。