[英]Angular Server Side Rendering - What to add to angular.json?
I'm following Firebase's Tutorial for SSR with Angular .我正在使用 Angular 关注 Firebase 的 SSR 教程。 Unfortunately the Tutorial is outdated, since as for Angular 6 angular-cli.json
was replaced with angular.json
.不幸的是,教程已经过时了,因为 Angular 6 angular-cli.json
已被angular.json
How do I translate the step, you can find by using the link, to the angular.json
file?如何将步骤翻译为angular.json
文件?
For comparison, here's what my file looks like:为了比较,这是我的文件的样子:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"norebro": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/norebro",
"index": "src/index.html",
"main": "src/main.ts",
...
To answer your question, since you are using Angular 8 you can run this command to make your project use SSR:要回答您的问题,由于您使用的是 Angular 8,您可以运行此命令以使您的项目使用 SSR:
ng add @nguniversal/express-engine --clientProject norebro
After you run this command you should get everything setup properly by Angular for you.运行此命令后,您应该通过 Angular 为您正确设置所有内容。 To check if everything is working first build your project:要检查一切是否正常,首先构建您的项目:
npm run build:ssr
and then serve it (and check if everything is working correctly):然后服务它(并检查一切是否正常):
npm run serve:ssr
Specifically, the things that need to be modified inside angular.json
are:具体来说, angular.json
里面需要修改的东西是:
outputPath
like this:在 "projects"->"norebro" ( your_project_name )->"architect"->"build"->"options" 部分修改outputPath
如下: "architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/browser",
server
section like this:然后在“架构师”部分中,添加一个新的server
部分,如下所示: "server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": {
"scripts": false,
"styles": true
}
}
}
}
As for publishing an Angular SSR application to Firebase please check this answer.至于将 Angular SSR 应用程序发布到 Firebase,请查看此答案。
The key point is that we cannot deploy Angular SSR application using Firebase Hosting but we can do it by using Firebase Cloud Functions .关键是我们无法使用 Firebase 托管部署 Angular SSR 应用程序,但我们可以通过使用Firebase Cloud Functions来实现。
PS: Initially, the answer was posted here but users may not find the answer to Firebase deployment here when querying (since the OP is not about deployment to Firebase). PS:最初,答案发布在这里,但用户在查询时可能在此处找不到 Firebase 部署的答案(因为 OP 不是关于部署到 Firebase 的)。 That's why I created a separate Q&A just to address that issue.这就是为什么我创建了一个单独的问答来解决这个问题。
Hope this helps...希望这可以帮助...
Immediately under build
(but not inside) you should add the configuration for your server application.立即在build
(但不是内部)下,您应该为您的服务器应用程序添加配置。 It would look something like this:它看起来像这样:
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json",
"stylePreprocessorOptions": {
"includePaths": [
"src/styles"
]
}
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "media"
},
"dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
]
}
}
},
Note that this one has some irrelevant properties, such as stylePreprocessorOptions
.请注意,这个有一些不相关的属性,例如stylePreprocessorOptions
。 Let's focus on those relevant, which are the builder
, outputPath
, main
, and tsConfig
.让我们关注那些相关的,它们是builder
、 outputPath
、 main
和tsConfig
。 Those are the files that would potentially change between a Server Side Rendered application and a Client Side Rendered application.这些文件可能会在服务器端呈现的应用程序和客户端呈现的应用程序之间发生变化。
I have also struggled with many tutorials while I was building a project with Angular Universal, the documentation of AngularFire2 was really straightforward.在使用 Angular Universal 构建项目时,我也遇到了许多教程,AngularFire2 的文档非常简单。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.