我想使用 SSR 来改进我的 angular 单页应用程序的搜索引擎优化。我通过使用 Angular-Universal 启用了 SSR，它正在为静态 html 提供服务，但我的组件严重依赖异步 api 调用来构建页面上的内容。请参阅下面的示例，其中$obs在ngOnInit函数中初始化然后与管道一起使用，这些调用在客户端进行，然后加载内容。这不是我想要的，因为我需要 api 调用中的内容来生成元标记。是否可以强制 angular Universal 等待 api 调用完成，使用此数据呈现 html，然后提供静态 html？asynchtml 中管道一起使用以提取数据。我遇到的问题是 SSR 提供​​的静态 html 不包含任何使用async

@Component({
  selector: 'app-example-component',
  template: `
    <div *ngIf="(obs$ | async) as model">
      {{model.title}}
    </div>
  `
})
export class ExampleComponent implements OnInit {

  obs$: Observable<SomeModel>;

  constructor(private exampleHttpService: ExampleHttpService) {}

  ngOnInit() {
    this.obs$ = this.exampleHttpService.doSomeApiCall();
  }
}

我希望 SSR 使用来自 api 调用的标题呈现模板 html，然后提供该静态 html。

在运行“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 命令正常运行而不会出现任何问题，以便我的单元测试用例执行。

过去几周我一直在构建一个 Typescript monorepo，它可以使用 Bazel 构建并部署到 Kubernetes。但最后一块拼图是集成一个 Angular 应用程序到整个工作流程中，我真的很纠结。

该项目

 ??? WORKSPACE
 ??? BUILD.bazel
 ??? package.json
 ??? packages
 ?   ??? package1
 ?   ??? package2
 ?   ??? package3
 ??? services
     ??? service1
     ??? service2
     ??? service3
+    ??? angular-app

• WORKSPACE 根目录下的文件
• BUILD.bazel 根目录下的文件
• package.json根中只有一个
• 所有包/服务都是 Typescript 库
• 服务依赖于包
• 每个包/服务都有自己的BUILD.bazel文件

源代码

目标

最后，我希望能够k8s_object为 Angular 应用程序添加一个BUILD.bazel像这样的根文件：

 load("@io_bazel_rules_k8s//k8s:objects.bzl", "k8s_objects")
 k8s_objects(
     name = "kubernetes_deployment",
     objects = [
         "//services/service1",
         "//services/service2",
         "//services/service3",
+        "//services/angular-app"
     ]
)

它应该在我运行时将 Angular 应用程序部署到 …

我正在将 angular 7 应用程序迁移到 angular 9，它使用服务器端渲染（angular 通用）和 angular i18n 用于 2 种语言（法语和英语）。

在旧的 angular 7 流程中，由于我使用的是 AOT，因此我必须为生产进行 5 次构建：

• 2 x 客户端构建（1 个用于法语，1 个用于英语）
• 2 x 服务器构建（1 个用于法语，1 个用于英语）
• server.ts 的构建

然后，在server.ts我动态加载正确的服务器包

旧服务器.ts

app.engine('html', (_, options: any, callback) => {

  const isFR= options.req.url.indexOf('site-fr') >= 0 ;
  const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = isFR ? require('./dist/server/fr/main') : require('./dist/server/en/main');

// Our index.html we'll use as our template
  const template = readFileSync(join(DIST_FOLDER, 'browser', isFR ? 'fr' : 'en', 'index.html')).toString();
  renderModuleFactory(AppServerModuleNgFactory, {
    // Our …

我有一个 Angular 项目，我想使用Application Insights进行日志记录。
我试过这个教程，它工作得很好，但不是在 SSR 模式下。

当我在 SSR 模式下运行应用程序时，我收到此错误：

RerefenceError: XmlHttpRequest is not defined

我找到了这个SO post，这似乎与我的问题相同。按照它的一个答案，我已经安装了XMLHttpRequest库并将这一行添加到server.ts：

(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;    

不为我工作。Angular Universal 尚未响应http 请求。另外，我尝试使用“xhr2”库而不是“xmlhttprequest”，它也不起作用。

如何获得应用程序洞察以在 Angular SSR 模式下工作？

更多详情

这就是我将应用程序洞察添加到我的项目的方式。

monitoring.service.ts：aiAPI的包装器：

RerefenceError: XmlHttpRequest is not defined

然后像这样调用aiat的初始化代码app.component.ts：

(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;    

更新：

我把它通过周围的所有相关应用的见解API的方法调用，如工作trackException()和this.appInsights.loadAppInsights()一个if statememt内：

import { ApplicationInsights } from "@microsoft/applicationinsights-web";

class MonitoringService …

我在 Angular 9 和 Angular Fire 6 中使用 Angular 通用。

我设法预渲染我的应用程序，npm run prerender没有任何错误。
我的路线得到预渲染，index.html文件看起来不错。

除了命令本身，它永远不会完成。
我得到的最后几行：

...
Prerendering 4 route(s) to {{projekt URL}}\browser
CREATE {{projekt URL}}\browser\index.html (66857 bytes)
CREATE {{projekt URL}}\browser\home\index.html (66857 bytes)
CREATE {{projekt URL}}\browser\edit\index.html (66857 bytes)
CREATE {{projekt URL}}\browser\login\index.html (66857 bytes)

我有一个 Angular Web 应用程序（客户端 - Angular 9，服务器 - Java），现在我想添加要Express-engine使用Angular universal.

我的目标是继续在浏览器中正常运行所有应用程序，并且只有新组件的特定模块才会在服务器上呈现。网站应照常加载，并且当路由到应用程序的特定部分时，它将从服务器加载预渲染模块。

是否可以在服务器上仅渲染部分网页？

谢谢！

编辑： 正如@izmaylovdev建议的那样，我尝试server.ts使用以下内容进行编辑get：

// All regular routes use the Universal engine
server.get('*', (req, res) => {     
  res.sendFile(distFolder + '\\' + indexHtml);   
}); 
// Specific route
server.get(matcherForSpecificRoutes, (req, res) => {     
  res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });   
});

但我怎样才能看到不同的行为呢？我只能在不同的 URL 上看到不同的日志。

我知道 google 引用错误出现的原因是因为在服务器上执行的 sever.js 没有在其范围内定义 google 。我正在寻找解决方案来修复此错误。

运行后npm run serve:ssr得到这个

task: ZoneTask {
    _zone: Zone {
      _parent: [Zone],
      _name: 'angular',
      _properties: [Object],
      _zoneDelegate: [ZoneDelegate]
    },
    runCount: 0,
    _zoneDelegates: null,
    _state: 'notScheduled',
    type: 'microTask',
    source: 'Promise.then',
    data: ZoneAwarePromise [Promise] {
      __zone_symbol__state: 0,
      __zone_symbol__value: ReferenceError: google is not defined
          at new exports.ListingsComponent (/home/abhishek/projects/website/dist/server.js:50760:350264)
          at createClass (/home/abhishek/projects/website/dist/server.js:79119:20)
          at createDirectiveInstance (/home/abhishek/projects/website/dist/server.js:78988:20)
          at createViewNodes (/home/abhishek/projects/website/dist/server.js:87348:36)
          at createRootView (/home/abhishek/projects/website/dist/server.js:87262:5)
          at Object.createProdRootView [as createRootView] (/home/abhishek/projects/website/dist/server.js:87774:12)
          at ComponentFactory_.create (/home/abhishek/projects/website/dist/server.js:78467:29)
          at RouterOutlet.activateWith (/home/abhishek/projects/website/dist/server.js:183250:40)
    },
    scheduleFn: undefined,
    cancelFn: …

我正在使用 Angular Universal 10，我想预渲染我的网站。

我对生产环境的正确构建过程感到困惑。

Angular 给出了这两个命令：

"build:ssr": "ng build --prod && ng run my-app.spa:server:production",
"prerender": "ng run my-app.spa:prerender"

仅仅这样做就足以获得生产就绪的输出吗？

npm run prerender

或者我需要同时运行这两个？

npm run build:ssr
npm run prerender

有什么不同？