angular - SSR 不适用于 Angular 11 的项目构建
问题描述
在我的应用程序中，我从 API 获取 HTML 数据并呈现它，但是当我尝试在构建项目后查看源代码时。我无法在其中看到该页面内容。为此尝试了多种方法，但没有奏效。
我该怎么办？在这里我附上了 angular.json 和 package.json 让我知道是否有任何更改。
角.json
{"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"Siteuser": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular": {
"component": {
"inlineStyle": true,
"spec": false
},
"module": {
"spec": true
}
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": true,
"outputPath": "dist/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/assets",
"src/sitemap.xml",
"src/robots.txt"
],
"styles": [
"src/scss/style.scss",
"node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
]
},
"staging": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
],
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
]
},
"qa": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.qa.ts"
}
],
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "bundle",
"name": "main",
"maximumWarning": "110kb",
"maximumError": "120kb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "Siteuser:build",
"port": 5067,
"host": "0.0.0.0"
},
"configurations": {
"production": {
"browserTarget": "ng:build:production"
},
"staging": {
"browserTarget": "ng:build:staging"
},
"qa": {
"browserTarget": "ng:build:qa"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "Siteuser:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/scss/style.scss"
],
"scripts": [],
"assets": [
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"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": true
},
"staging": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
],
"sourceMap": false,
"optimization": true
}
}
}
}
},
"Siteuser-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ng:build:serve"
},
"configurations": {
"production": {
"devServerTarget": "ng:build:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "Siteuser",
"cli": {
"analytics": "e959a028-a0c4-47b5-b213-83c1fc414871"
}
}
包.json
{
"name": "siteuser",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start-scanner": "ng serve && sonar-scanner",
"start": "ng serve",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"prod": "ng build --prod && ng run Siteuser:server:staging && node dist/server/main.js",
"staging": "ng build --configuration=staging && ng run Siteuser:server:staging && node dist/server/main.js",
"qa": "ng build --prod --configuration=qa --aot --buildOptimizer --commonChunk --vendorChunk --optimization --progress",
"compile:server": "webpack --config webpack.server.config.js --progress --colors",
"serve:ssr": "node dist/server",
"optimizecss": "gulp --gulpfile optimize-css.gulpfile.js",
"build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
"build:client-and-server-bundles": "ng build --prod && ng run Siteuser:server:production --bundleDependencies all"
},
"private": true,
"dependencies": {
"@angular-devkit/build-angular": "~0.1102.5",
"@angular-devkit/schematics": "^11.2.5",
"@angular/animations": "11.2.6",
"@angular/cdk": "11.2.6",
"@angular/common": "11.2.6",
"@angular/compiler": "11.2.6",
"@angular/core": "11.2.6",
"@angular/forms": "11.2.6",
"@angular/material": "11.2.6",
"@angular/platform-browser": "11.2.6",
"@angular/platform-browser-dynamic": "11.2.6",
"@angular/platform-server": "11.2.6",
"@angular/router": "11.2.6",
"@ng-select/ng-select": "^3.7.3",
"@ng-toolkit/universal": "^1.1.21",
"@nguniversal/express-engine": "^11.2.1",
"@schematics/angular": "^11.2.5",
"@types/jquery": "3.3.22",
"@types/node": "10.1.4",
"axios": "^0.21.1",
"bootstrap": "4.3.1",
"classlist.js": "1.1.20150312",
"core-js": "3.1.3",
"crypto-js": "^4.0.0",
"font-awesome": "^4.7.0",
"gulp": "^4.0.2",
"gulp-brotli": "^3.0.0",
"gulp-clean": "^0.4.0",
"gulp-filter": "^6.0.0",
"gulp-gzip": "^1.4.2",
"gulp-imagemin": "5.0.3",
"gulp-purify-css": "^0.1.0",
"jquery": "3.4.1",
"js2xmlparser": "^4.0.1",
"jsontoxml": "^1.0.1",
"line-awesome": "1.0.2",
"moment": "^2.29.1",
"ngx-avatar": "^4.0.0",
"ngx-bootstrap": "^4.3.0",
"ngx-image-cropper": "^3.3.5",
"ngx-skeleton-loader": "^2.0.0",
"ngx-ui-loader": "^8.0.0",
"popper.js": "1.14.6",
"promise-polyfill": "^8.2.0",
"rxjs": "^6.6.6",
"rxjs-compat": "^6.6.6",
"sweetalert2": "7.33.1",
"ts-loader": "4.2.0",
"tslib": "^2.0.0",
"tslint-sonarts": "1.9.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1102.5",
"@angular/cli": "11.2.5",
"@angular/compiler-cli": "11.2.6",
"@angular/language-service": "11.2.6",
"@nguniversal/builders": "^11.2.1",
"@types/express": "4.17.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "2.0.3",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"source-map-explorer": "^2.5.2",
"ts-loader": "^5.2.0",
"ts-node": "7.0.1",
"tslint": "~6.1.0",
"typescript": "4.0.7",
"webpack-cli": "^3.1.0"
}
}
解决方案
将 api 调用放在路由解析器中应该适用于您的情况。但缺点是加载时间增加。
参考：https ://dzone.com/articles/understanding-angular-route-resolvers-by-example
推荐阅读
- php - 访客和用户表评论的 Laravel 结构
- android - 尝试在空对象引用上调用接口方法 com.google.firebase.auth.FirebaseAuth$AuthStateListener.onAuthStateChanged'
- c# - 如何从多个类中获取所有相同的属性？
- hazelcast - 填充 ReliableTopic 的支持 RingBuffer
- java - 如何解决此错误：无法为 org.gradle.api.Project 类型的项目 ':expansionpanel' 获取未知属性 'COMPILE_SDK'
- c++ - 带有布尔的 C++ 变体转换构造函数
- c# - json 属性中的默认值空列表
- python - 使用网格数据绘制轮廓时只看到 NAN
- javascript - Vue.js 注意mounted不保证所有子组件也都已经挂载了？
- c# - 如何创建 IList 的实例？