进度更新
如果我将 <base href="/"> 更改为 <base href="/gdp">，则 gdp 页面内容会出现，但其他内容不会。仍然不确定如何解决问题。
原帖
我正在尝试使用 angular Universal 预渲染我的应用程序。不幸的是，除了网站的主页（即应用程序应该打开的第一条路线）之外，没有呈现任何路线。我有以下angular.json。
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"cli": {
"analytics": false
},
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ourworldincrypto2": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ourworldincrypto2/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": ["src/favicon.ico", "src/assets", "src/sitemap.xml"],
"styles": [
"src/styles.scss",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./src/assets/vendors/owl/mdi/css/materialdesignicons.min.css",
"./src/assets/vendors/owl/aos/dist/aos.css/aos.css",
"./src/assets/vendors/owl/owl.carousel/dist/assets/owl.carousel.min.css",
"./src/assets/vendors/owl/owl.carousel/dist/assets/owl.theme.default.min.css",
"./src/assets/css/owl/style-owl.css",
"./src/assets/css/bootstrap-slider.min.css",
"./node_modules/bootstrap-icons/font/bootstrap-icons.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./src/assets/js/jquery.color.js",
"./src/assets/js/bootstrap-slider.min.js",
"./node_modules/popper.js/dist/umd/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js",
"./src/assets/vendors/owl/owl.carousel/dist/owl.carousel.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [{
"type": "initial",
"maximumWarning": "5mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "5mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "ourworldincrypto2:build"
},
"configurations": {
"production": {
"browserTarget": "ourworldincrypto2:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ourworldincrypto2:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.scss"],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json", "tsconfig.server.json"],
"exclude": ["**/node_modules/**"]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ourworldincrypto2:serve"
},
"configurations": {
"production": {
"devServerTarget": "ourworldincrypto2:serve:production"
}
}
},
"deploy": {
"builder": "angular-cli-ghpages:deploy",
"options": {}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/ourworldincrypto2/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"production": {
"outputHashing": "media",
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
"sourceMap": false,
"optimization": true
}
}
},
"serve-ssr": {
"builder": "@nguniversal/builders:ssr-dev-server",
"options": {
"browserTarget": "ourworldincrypto2:build",
"serverTarget": "ourworldincrypto2:server"
},
"configurations": {
"production": {
"browserTarget": "ourworldincrypto2:build:production",
"serverTarget": "ourworldincrypto2:server:production"
}
}
},
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"browserTarget": "ourworldincrypto2:build:production",
"serverTarget": "ourworldincrypto2:server:production",
"routes": [
"/",
"/gdp",
"/billionaires",
"/athletes",
"/cars",
"/houses",
"/snp500",
"/crypto",
"/wealthy",
"/nba",
"/pres-candidates",
"/btcppr"
]
},
"configurations": {
"production": {}
}
}
}
}
},
"defaultProject": "ourworldincrypto2"
}
注意主 index.html 渲染成功。其余的路线不是。其中一条路线的结果内容。
<body>
<app-root _nghost-sc117="" ng-version="11.2.9">
<router-outlet _ngcontent-sc117=""></router-outlet>
<!---->
</app-root>
<script src="runtime.7b63b9fd40098a2e8207.js" defer=""></script>
<script src="polyfills.00096ed7d93ed26ee6df.js" defer=""></script>
<script src="scripts.e59b277616b2b3c913c8.js" defer=""></script>
<script src="main.8547f840d1e13bfbc738.js" defer=""></script>
</body>
主 index.html 的结果内容。
<body>
<app-root _nghost-sc117="" ng-version="11.2.9">
<router-outlet _ngcontent-sc117=""></router-outlet>
<app-home _nghost-sc116="">
<div _ngcontent-sc116="" class="container-scroller">
<div _ngcontent-sc116="" class="main-panel">
<header _ngcontent-sc116="" id="header">
<div _ngcontent-sc116="" class="container">
<nav _ngcontent-sc116="" class="navbar navbar-expand-lg navbar-light">
等等...
我正在使用的 prerender 命令。
ng run website:prerender
我不太确定问题出在哪里，因为构建总是成功的。
运行预渲染时的控制台输出
> ourworldincrypto2@0.0.0 prerender /home/mywork/ourworldincrypto2
> ng run ourworldincrypto2:prerender
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.
Initial Chunk Files | Names | Size
main.8547f840d1e13bfbc738.js | main | 601.84 kB
styles.611a2c13e272c1600ee9.css | styles | 424.73 kB
scripts.e59b277616b2b3c913c8.js | scripts | 254.49 kB
polyfills.00096ed7d93ed26ee6df.js | polyfills | 35.98 kB
runtime.7b63b9fd40098a2e8207.js | runtime | 1.45 kB
| Initial Total | 1.29 MB
Build at: 2021-06-11T15:15:35.305Z - Hash: 3112fa892b3d16001d76 - Time: 30957ms
Warning: /home/mywork/ourworldincrypto2/src/app/services/helper.service.ts depends on 'millify'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
✔ Server application bundle generation complete.
Initial Chunk Files | Names | Size
main.js | main | 3.85 MB
| Initial Total | 3.85 MB
Build at: 2021-06-11T15:15:37.487Z - Hash: d3637b1c658cbd8e1cae - Time: 28837ms
✔ Prerendering routes to /home/mywork/ourworldincrypto2/dist/ourworldincrypto2/browser complete.
路由文件
const routes: Routes = [
{
path: 'gdp',
component: ComparisonsComponent,
},
{
path: 'billionaires',
component: ComparisonsComponent,
},
{
path: 'athletes',
component: ComparisonsComponent,
},
{
path: 'cars',
component: ComparisonsComponent,
},
{
path: 'houses',
component: ComparisonsComponent,
},
{
path: 'snp500',
component: ComparisonsComponent,
},
{
path: 'crypto',
component: ComparisonsComponent,
},
{
path: 'wealthy',
component: ComparisonsComponent,
},
{
path: 'nba',
component: ComparisonsComponent,
},
{
path: 'pres-candidates',
component: ComparisonsComponent,
},
{
path: '',
component: HomeComponent,
},
{
path: 'btcppr',
component: ComparisonsComponent,
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
initialNavigation: 'enabled',
}),
],
exports: [RouterModule],
})
export class AppRoutingModule {}