我正在寻找一个关于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/angular/universal-starter并且已经在angular5.server中实现了在iis中托管后无法正常工作.在localhost中可以正常工作:4000
谢谢
我有一个 Angular 6+ 应用程序，它被配置为使用Angular Universal来利用服务器端渲染。
我还使用TransferState来避免服务器和客户端应用程序上的重复 API 调用。
我的 angular 应用程序中的身份验证基于令牌。
问题出在用户第一次打开我的 Web 应用程序时，这导致为未经身份验证的用户呈现 index.html，而用户实际上已登录，但没有机会将令牌传输到服务器。因此，当客户端应用程序与服务器应用程序交换时，由于浏览器的localStorage/sessionStorage 中存在令牌，因此需要再次调用API。
我使用 node.js 和 express.js 来实现服务端渲染。
我认为解决方案是使用会话和 cookie。这需要我做很多工作，因为我不熟悉 node.js 来处理会话/cookie。有什么快速简便的解决方案吗？
我有一个像这样实施的守卫:
@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 应用程序，我正在尝试使用 Angular 通用（https://angular.io/guide/universal）进行服务器端渲染，但它似乎不起作用。我捆绑了我的应用程序并通过 express 运行它，我点击了http://localhost:4000并且它一直加载直到我从浏览器看到 ERR_EMPTY_RESPONSE
我已经尝试了几乎所有的东西，但没有运气！任何帮助将非常感激
这是我的代码的详细信息
包.json
{
"name": "my-app",
"version": "3.0.0",
"author": "N/A",
"description": "N/A",
"scripts": {
"ng": "ng",
"start": "ng serve --port 8000 --host 0.0.0.0",
"build": "ng build",
"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 my-app:server",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors",
"test": "ng test",
"lint": "tslint ./src/**/*.ts -t verbose",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@agm/core": …我有一个ngExpressEngine在 Angular 8 中使用 SSR 的大型应用程序。我运行了描述的所有升级过程，但我的server.ts文件没有正确迁移。特别是对provideModuleMap仍然的引用（Angular 9 不再支持它）。
请注意，我的路线都已正确更新，可以将新.then系统用于惰性路线。另请注意，它ng serve可以正常编译并正常工作。仅当我尝试从 express 运行 SSR 包时才会出现此问题。
我的问题可以与 Angular 8 中的这些代码行隔离开来：
// * NOTE :: leave this as require() since this file is built Dynamically
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
}));
为了尝试让它在 Angular 9 中工作，我删除了对 的调用provideModuleMap(LAZY_MODULE_MAP)并传入了LAZY_MODULE_MAP，但这不起作用，因为它似乎LAZY_MODULE_MAP不再生成了。
...因此，随着我对 Angular 9 的更改，我从尝试运行只能运行客户端的服务器端的事情中得到了您期望的典型错误。即ReferenceError: window …
migration express server-side-rendering angular-universal angular
直到今天，我有一个简单的、主要是静态的 Angular 9 应用程序，它将使用 CloudFront/S3 和一些 Lambda 函数提供服务。它运行良好，但没有服务器端渲染。今天我升级到 Angular 10 并按照说明添加了 angular 通用https://angular.io/guide/universal。我找到了 @ng-toolkit/universal 和 @ng-toolkit/serverless 选项，但这不适用于 Angular 10。https ://medium.com/better-programming/getting-started-with-serverless-angular-universal- on-aws-lambda-8754bcc4dc19。这告诉我 Lambda 是一个选项，但不确定哪一段 (server.ts) 代码应该是 lambda？
在本地主机上添加 Universal 后，TLDR 一切正常。通常，对于这个项目的 CI/CD，我有一个 AWS Codepipeline 跟踪 repo 的 master 分支，一旦我将代码合并到 master，它就会拉取和构建并将 dist 文件夹复制到 S3 和 S3 存储桶作为 CloudFront 的源发行版。在 S3 存储桶 dist 文件夹更新后，CodePipeline 自动使我的分配无效，并且新的更改在 CloudFront 上生效。
由于我添加了 Universal，我必须重新设计 CI/CD，问题是是否在 EC2 和 Lambda 上部署 SSR。
当我运行npm run build:ssrAngular 时ng build --prod && ng run proj:server:production，一切准备就绪。如果我不使用 EC2 …
假设我有一个简单的 Angular 组件：
@Component({
selector: 'app-email-content',
template: '<h1>Welcome {{username}}!</h1>'
})
export class WelcomeEmailComponent {
@Input() username: string
}
我的目标是使用这个 Angular 组件并使用 Node.Js 将其呈现为纯 HTML，以发送定制的电子邮件。
我知道使用Angular Universal绝对可以进行服务器端渲染。但我不确定如何显式呈现一个特定组件。
我有一个 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 秒调用一次）以及每次我收到水合错误时。那么，什么是最好的方法，什么时候需要使用哪种方法？