标签: angular-universal

我正在尝试在角度通用中使用isBrowser函数,但是当我构建时我仍然遇到相同的错误.我确实安装了angular-universal的npm包

npm i angular2-universal --save

'ng build -prod -aot'

 ERROR in Illegal state: symbol without members expected, but got {"filePath":"C:/dir/universal/website/node_modules/@angular/platform-browser/platform-browser.d.ts","name":"__platform_browser_private__","members":["BROWSER_SANITIZATION_PROVIDERS"]}.

    ERROR in ./src/main.ts
    Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'C:/dir/universal/website\src'
     @ ./src/main.ts 4:0-74
     @ multi ./src/main.ts

这是我的app.module.ts:

//modules
import { HomeModule } from './home/home.module';
import { IntakeFormulierModule } from './intake-formulier/intake-formulier.module';
import { BrowserModule } from '@angular/platform-browser';
import { UniversalModule } from 'angular2-universal/browser';

import { NgModule } from '@angular/core';

//routing
import { routing } from "./app.routing";

//pages
import { …

我的应用程序利用了 Angular Universal，我想url在 Angular 组件中获取当前的完整路径。我想我必须window在可能需要注入窗口的地方使用该对象，或者更好的选择是简单地检查它是否在浏览器中。是否有使用 Angular 的 API 的更清洁的解决方案？

  url: string;

  constructor(private router: Router) { }

  ngOnInit() {
    this.router.events.subscribe((val) => {
      this.url = `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
    });
  }

编辑：我要问的问题是如何以url符合 Angular Universal 的方式获得完整

当我将导入从lodash替换为lodash-es时，Angular Universal 服务器会中断。但是当我跑步时ng serve，一切都很好。我想使用 lodash-es，这样我就可以在我的 Angular SPA 中挑选 lodash 函数并缩小包的大小。

我采取的步骤： npm 卸载了lodash， npm 安装了lodash-es，并像这样替换了我的导入：

从： import { find as _find } from "lodash";

要：import { find as _find } from "lodash-es";

这是我收到的服务器错误：

/usr/src/app/node_modules/lodash-es/lodash.js:10
export { default as add } from './add.js';
^^^^^^
SyntaxError: Unexpected token export
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:599:28)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3) …

Angular 4.4.6
Angular CLI 1.3.2
Node 6.x.x
NPM 3.10.10
Webpack 3.4.1

在 Angular Universal 应用程序中，当服务器视图切换到客户端视图时，屏幕会出现闪烁，因为在服务器端渲染中调用的所有 API 也在客户端渲染中调用，因为存在闪烁。

为了消除这种闪烁，我实现了 Angular Universal Transfer Module，它private _map = new Map<string, any>();在服务器端渲染时将数据存储在地图缓存 ( ) 中，并将其传输到客户端，因此客户端不需要再次调用 api 并立即从缓存中获取数据。

转移是通过该提供商进行的。

{
    provide: APP_BOOTSTRAP_LISTENER,
    useFactory: onBootstrap,
    multi: true,
    deps: [
        ApplicationRef,
        TransferState
    ]
}

export function onBootstrap(appRef: ApplicationRef, transferState: TransferState) {
    return () => {
        appRef.isStable
        .filter(stable => stable)
        .first()
        .subscribe(() => {
            transferState.inject();
        });
    };
}

这样闪烁消失了，但应用程序性能下降了，在对应用程序进行负载测试时，闪烁的结果比非闪烁的应用程序更快，这是为什么？

可能是因为在负载测试或机器人访问网站的情况下，没有浏览器所以缓存永远不会被清除，它只是用缓存内存填充服务器并且服务器变慢，有什么解决方案可以解决这个问题，要么创建机器人和真实用户的不同实例，通过在 nginx 级别识别请求，oe 还有一些我在 angular Universal 中缺少的东西。

任何人都可以帮助我修复锤子错误

})(window, document, 'Hammer');
^
 ReferenceError: window is not defined
at Object._MAP.8 (/Users/ks89/git/universal-starter/dist/server.js:126460:4)

在角度通用。

我正在尝试开发要部署在 Google App Engine NodeJS 标准环境中的 Angular Universal 应用程序。

该应用程序通过运行在本地正常工作node server.js。

但是，在部署到 GAE 时，页面不断加载，最终失败。在 Google Cloud Console 日志查看器中，我看到以下消息：Process terminated because the request deadline was exceeded. (Error code 123)。

在package.jsonstart 命令中是"node server.js"，而在 app.yaml 中我只声明以下内容：runtime: nodejs8.

服务器代码（在 TS 中，使用 WebPack 打包为 JS）：

import { enableProdMode } from '@angular/core';
import * as ngUniversal from '@nguniversal/express-engine';
import * as compression from 'compression';
import * as express from 'express';
import * as path from 'path'; …

问题

我目前正在尝试使用 Karma 测试我的 Angular 6 应用程序，但我不断遇到如下错误：

Can't bind to 'ngModel' since it isn't a known property of 'mat-select'.

当我在这个单个组件中导入它时它确实有效，但是在另一个组件中我必须再次导入它..

现在带有导入的测试文件之一的示例：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { AdminOverviewComponent } from './admin-overview.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule, MatTableModule, MatSelectModule } from '@angular/material';

describe('AdminOverviewComponent', () => {
  let component: AdminOverviewComponent;
  let fixture: ComponentFixture<AdminOverviewComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ AdminOverviewComponent ],
      imports: [FormsModule, ReactiveFormsModule, MatFormFieldModule, MatTableModule, MatSelectModule]
    })
    .compileComponents();
  }));

  beforeEach(() => { …

我已经安装了这个包@ngx-lite/json-ld。试图使我的 SEO schema.org 动态化。在导入本教程中指定的模块时，我收到此错误：

src/app/app.module.ts(18,21) 中的错误：错误 TS2339：“typeof NgxJsonLdModule”类型上不存在“forRoot”属性。

这是我的 app.module

import { NgtUniversalModule } from "@ng-toolkit/universal";
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

// Third Party library
import { NgxJsonLdModule } from "@ngx-lite/json-ld";

import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app-routing.module";
@NgModule({
  declarations: [AppComponent],
  imports: [
     AppRoutingModule,
     NgtUniversalModule,
     NgxJsonLdModule.forRoot()
  ],
  providers: []
})
export class AppModule {}

我正在使用 angular 6.1.9 和 Angular Universal。

我在server.ts 中添加了“domino” ，甚至将webpack.server.config.js更新为：

module: {
    rules: [
              { test: /\.(ts|js)$/, loader: 'regexp-replace-loader', options: { match: { pattern: '\\[(Mouse|Keyboard)Event\\]', flags: 'g' }, replaceWith: '[]', } },
              { test: /\.ts$/, loader: 'ts-loader' }, 
           ]
}

但仍然收到相同的错误：“ReferenceError - KeyboardEvent 未定义”。

我在终端中运行这些命令

$npm 运行构建：ssr

$npm 运行服务：ssr

在package.json 中定义的命令为：

"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:ssr": "node dist/server.js",
"build:client-and-server-bundles": "ng build --prod && ng run angular.io-example:server",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors"

有没有人有想法，如何摆脱这个错误？

如何在不使用angular 7的情况下获取完整的当前URL window.location.href？

例如，假设我当前的网址是 http://localhost:8080/p/drinks?q=cold&price=200

如何获得完整的URL而不仅仅是完整的URL /p/drinks?q=cold&price=200？

我已经尝试过使用this.router.url此命令，但/p/drinks?q=cold&price=200不能提供完整的主机名。

我不想使用的window.location.href原因是它导致ng-toolkit / universal中的渲染出现问题

我尝试遵循此解决方案，这似乎与我存在相同的问题，并且也进行了更新

如何在Angular2中获取服务域名

这是我的代码

windowProvider.js

import { InjectionToken, FactoryProvider } from '@angular/core';

export const WINDOW = new InjectionToken<Window>('window');

const windowProvider: FactoryProvider = {
  provide: WINDOW,
  useFactory: () => window
};

export const WINDOW_PROVIDERS = [
  windowProvider
];

在app.module.ts中

@NgModule({
    .......
    providers:[
    .......
    windowProvider
   ]
})

在我的必填页面中：

import {WINDOW as WindowFactory} from '../../factory/windowProvider';
......
 constructor(private router: Router, private helper: Helpers, …