我正在设置一个角度6.x通用项目,以利用其SSR(服务器端呈现)功能.在我的应用程序中,我正在使用RxJs进行websocket通信.
更具体地讲,我是,使用WebSocketSubject和webSocket在我的角度普遍6.x的项目,该项目在浏览器平台上正常工作.但是,在运行节点Web服务器(包含SSR内容(服务器端呈现))时,会引发错误:
ReferenceError:未定义WebSocket
示例代码:
// not actually code from the reproduction repo
import { WebSocketSubject, webSocket } from 'rxjs/webSocket';
const socket: WebSocketSubject<any> = webSocket('wss://echo.websocket.org');
socket.subscribe(msg => doSomething(msg));
请注意,应用程序的浏览器版本不会出现错误(即ng serve不会抛出错误),但只有在编译SSR内容并运行快速Web服务器之后.要重现错误,必须首先运行构建:
# install dependencies
npm install
# build angular bundles for browser and server platforms
npm run build:client-and-server-bundles
# build the webserver
npm run webpack:server
# start the webserver
npm run serve:ssr
# the app is now being served at http://localhost:8081/
# …我正在使用 AngularCLI 和一个 Angular v8。关于 Angular Universal，我遇到了一个问题，在我运行这些命令后，这些命令是设置的准备步骤：
ng generate universal --clientProject <project_name>
npm install @nguniversal/module-map-ngfactory-loader
npm install @nguniversal/express-engine
Add ModuleMapLoaderModule on AppServerModule
或者
ng add @nguniversal/express-engine --clientProject <project_name>
npm run build:ssr && npm run serve:ssr
当我运行ng build --configuration staging甚至运行时ng build --prod，构建成功且没有错误。
但是当我运行ng run app:server:stagingor 时ng run app:server:production，我会遇到如下错误：
ERROR in Module build failed (from ./node_modules/sass-loader/lib/loader.js):
@import 'base/colors';
Can't find stylesheet to import.
....
我angular.json有以下 SCSS 配置：
"schematics": {
"@schematics/angular:component": {
"styleext": …在将 Angular Universal 添加到我们的应用程序时，我们必须initialNavigation="enabled"在路由器上设置标志，以避免闪烁。
现在这给我们带来了两个问题：
APP_INITIALIZERs 加载，所以无法加载受保护的路由，因为守卫总是假设用户未经授权，因为检查发生在APP_INITIALIZER我发现了几个与此相关的 Github 问题（即https://github.com/angular/universal/issues/1623），但没有一个真正提供了解决方案。
如何使用initialNavigation="enabled"while 同时等待APP_INITIALIZERs 执行？
编辑（01/02/2021）：在 Angular 11 中，措辞已更改，该选项现在称为enabledBlocking。然而这里提到的问题并没有涉及到这一点。
运行时ng deploy我收到以下错误：
An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID
See "C:\Users\theoh\AppData\Local\Temp\ng-Nv0wMh\angular-errors.log" for further details.
错误的完整日志如下：
[error] Error: NOT SUPPORTED: keyword "id", use "$id" for schema ID
at Object.code (D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\vocabularies\core\id.js:6:15)
at keywordCode (D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\compile\validate\index.js:454:13)
at D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\compile\validate\index.js:222:17
at CodeGen.code (D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\compile\codegen\index.js:439:13)
at CodeGen.block (D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\compile\codegen\index.js:568:18)
at iterateKeywords (D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\compile\validate\index.js:219:9)
at groupKeywords (D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\compile\validate\index.js:208:13)
at D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\compile\validate\index.js:192:13
at CodeGen.code (D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\compile\codegen\index.js:439:13)
at CodeGen.block (D:\code\brain-consulting\bbc\node_modules\@angular\cli\node_modules\ajv\dist\compile\codegen\index.js:568:18)
我ng add @angular-eslint/schematics@next按照这里的建议进行了尝试，但没有成功。我使用的版本如下：
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1300.3
@angular-devkit/build-angular 13.0.3
@angular-devkit/core 13.0.3
@angular-devkit/schematics 13.0.3 …当我查看源代码时,我从apis获取http请求的任何工作人员都有问题,看起来工作人员没有从服务器上来.
所以我可以在源代码中看到静态html,但http请求中没有任何内容.
任何人都知道什么是问题？
我在用 universal-cli
编辑:
这是我的http调用示例showcode.service.ts:
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { environment } from '../../environments/environment';
@Injectable()
export class ShowcodeService {
constructor(private http: Http) { }
getCode(id): any{
return this.http.get(environment.baseUrl + 'code/show/' + id)
.map((response: Response) => response.json());
};
}
这是现场的例子:http://pushsc.com/show/code/58bc83760a58d602a0b99d14检查html的源代码...它渲染evertying期待来自http的东西......
所以我升级到角度4+只是为了让我可以利用通用包进行服务器端渲染以实现搜索引擎优化目的.我在现有的angular 2+项目中实现了这一点,将其升级为angular 4+并从https://github.com/evertonrobertoauler/cli-universal-demo/commit/a2610286bd3db5d4f4cce4318d7c220c11963eb6完成了所有必要的配置.
我使用ng-bootstrap https://ng-bootstrap.github.io/#/home(v1.0.0- alpha.22)只有一个区别.但是当我使用npm run start-u-dev运行节点服务器时,我在ng-bootstrap中的import关键字出现了这个错误.
app-ui@0.0.0 start-u-dev /Users/giric/Projects/apnaDoctor/webapp/appUI
ts-node src/server.ts
/appUI/node_modules/@ng-bootstrap/ng-bootstrap/accordion/accordion.module.js:1
(function (exports, require, module, __filename, __dirname) { import { NgModule } from '@angular/core';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/appUI/dist/ngfactory/src/app/app.server.module.ngfa
ctory.ts:18:1)
at Module._compile (module.js:571:32)
at Module.m._compile (/appUI/node_modules/ts-node/src/index.ts:406:23)
at Module._extensions..js (module.js:580:10)
at Object.require.extensions.(anonymous function) [as …我有一个使用ngExpressEngine服务的Angular 5应用程序(遵循Angular Universal启动项目).我的应用程序有一个组件,它发出HTTP请求以显示一些数据.一切正常,但当我使用fetch作为谷歌机器人时,它返回渲染的页面,但没有数据.是否有任何使ngExpressEngine服务器在将页面呈现给用户之前等待HTTP请求？
我们正在迁移一个混合的Angular6和AngularJS 1.6项目.在这个过程中,我们还想引入服务器端渲染(SSR).
问题是,SSR在节点环境中运行,因此运行SSR/prerendering会收到以下错误:
Run Code Online (Sandbox Code Playgroud)npm-run ts-node ./prerender.ts [..]/node_modules/angular/index.js:2 **module.exports = angular;** **ReferenceError: angular is not defined** at Object.<anonymous> ([..]/node_modules/angular/index.js:2:18) at Module._compile (module.js:652:30) at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Function.Module._load (module.js:497:3) at Module.require (module.js:596:17) at require (internal/module.js:11:18) at Object.angular ([..]/dist/server/webpack:/external "angular":1:1) at _webpack_require_ ([..]/dist/server/webpack:/webpack/bootstrap:19:1)
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import {renderModuleFactory} from '@angular/platform-server';
import {writeFileSync} from 'fs';
const globalAny:any = global;
const Window = require('window');
let window = new Window();
globalAny.window = window;
globalAny.document = window.document;
const {AppServerModuleNgFactory} = …我正在尝试使用从Web服务检索的数据来更新Angular 6(更新:现在的Angular 7)Universal应用程序(使用Meta和Title)中的元数据.我专门为Twitter和Facebook卡做这个.我知道他们的抓取工具不执行JavaScript,这就是我使用Angular Universal在服务器端设置元数据的原因.我正在使用Facebook共享调试工具来检查结果.
我尝试了几种不同的方法,并且我已经找到了示例,但是我没有找到一个在设置元数据之前从对Web服务的异步调用中检索数据的方法.(请注意,我在Angular Universal 4应用程序中成功使用此服务与Web服务.)
使用下面的代码,"og:url"标记被正确设置为不需要Web服务调用来获取数据.但是,标题未正确设置.如果我将"setTitle"调用移动到ngOnInit并提供一个字符串,那就可以了 - 但是从Web服务获取数据却没有.
我尝试使用服务来收集数据,然后设置元数据,但这也不起作用.我从解析器获取数据,但它没有解决Facebook/Twitter问题.
ngOnInit() {
const metaUrl = 'https://www.test.com' + this._router.url;
this._metaService.updateTag({ property: 'og:url', content: metaUrl });
this._sub = this._route.params.subscribe(params => {
const code = params['person'];
this.getInfo(code);
});
}
getInfo(code: string) {
this._myWebService.getPerson(code).subscribe(
data => {
this._person = data;
// set dynamic metadata
const metaTitle = this._person.name + ' | site description';
this._titleService.setTitle(metaTitle);
this._metaService.updateTag({ name: 'twitter:title', content: metaTitle });
});
}
更新:我还尝试使用解析器首先获取数据,以便我可以在onInit中使用它.它不起作用.
{ path: 'view/:person', component: ViewComponent,
resolve: { person: …我需要一些关于使用angular 2+和.net core渲染服务器的指导,我一直在对它进行一些调查并找到一些有用的信息:Angular universal是这个问题的项目:
我找到了一个关于如何在此repo上应用angular universal和.net core的一个很好的例子:MarkPieszak存储库.请查看控制器并实现方式.
另一方面,我发现了另一种使用MVC视图在服务器端渲染的方法,如MVP Damien发布的那样:
博客:使用WEBPACK在ASP.NET核心视图中使用ANGULAR
回复:damienbod/AspNetCoreMvcAngular
两者都使用webpack和.net核心.我只想问哪种方法更好更清洁.各自的优缺点.我觉得基于控制器代码实现Damien方法更容易,但是我认为没有角度通用实现可能会有一些后退.
angular ×10
node.js ×3
typescript ×2
angular13 ×1
angular7 ×1
angularjs ×1
asp.net-core ×1
metadata ×1
ng-bootstrap ×1
webpack ×1