AngularUniversal仅显示CSS导入而没有HTML内容甚至是meta标签
创始人
2024-10-29 21:00:53
0

这个问题通常是由于Angular Universal的配置错误引起的。确保正确地设置了应用程序的通用配置以确保正确渲染HTML内容和meta标签。

以下是一个可能的解决方案,使用Angular CLI中默认生成的应用程序为例:

  1. 在根目录中安装@nguniversal/express-engine和@nguniversal/builders:

    npm install --save @nguniversal/express-engine @nguniversal/builders
    
  2. 在angular.json文件中的server项目中添加Universal配置。替换项目名称和路径为你自己的。例如:

    "server": {
       "builder": "@angular-devkit/build-angular:server",
       "options": {
          "outputPath": "./dist/server",
          "main": "src/main.server.ts",
          "tsConfig": "tsconfig.server.json"
       },
       "configurations": {
          "production": {
             "fileReplacements": [
                {
                   "replace": "src/environments/environment.ts",
                   "with": "src/environments/environment.prod.ts"
                }
             ]
          },
          "universal": {
             "fileReplacements": [
                {
                   "replace": "src/environments/environment.ts",
                   "with": "src/environments/environment.universal.ts"
                }
             ],
             "optimization": true,
             "outputHashing": "all",
             "sourceMap": false,
             "extractCss": true,
             "namedChunks": false,
             "aot": true,
             "vendorChunk": false,
             "buildOptimizer": true,
             "platform": "server"
          }
       }
    }
    
  3. 在app.server.module.ts中,引入BrowserModule和ServerModule:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { ServerModule } from '@angular/platform-server';
    import { AppComponent } from './app.component';
    
    @NgModule({
       declarations: [
          AppComponent
       ],
       imports: [
          BrowserModule.withServerTransition({ appId: 'serverApp' }),
          ServerModule
       ],
       providers: [],
       bootstrap: [AppComponent]
    })
    export class AppServerModule { }
    
  4. 在environment.universal.ts中,添加以下代码:

    export const environment = {
       production: true,
       server: true
    };
    
  5. 在main.server.ts中,添加以下代码:

    import { enableProdMode } from '@angular/core';
    import { renderModuleFactory } from '@angular/platform-server';
    import { AppServerModuleNg

相关内容

热门资讯

wepoke辅助插件!wpk脚... wepoke辅助插件!wpk脚本,微扑克ai辅助器苹果版(详细辅助教程);微扑克ai辅助器苹果版软件...
可靠技巧!wepoke机制(W... wepOkE新手教程相关信息汇总(需添加指定薇757446909获取下载链接);可靠技巧!wepok...
德扑之星ai代打!德扑胜率最低... 德扑之星ai代打!德扑胜率最低的牌,德扑果然有挂(详细ai代打教程);德扑之星ai代打!德扑胜率最低...
wpk ai辅助!wpk微扑克... wpk ai辅助!wpk微扑克真的有辅助插件(Wpk)一贯真的有挂-详细透明挂教程;1、进入游戏-大...
德扑ai智能!德州游戏辅助器,... 1、德扑ai智能!德州游戏辅助器,德州扑克真是真的是有挂(详细有外 挂教程);详细教程。2、德扑ai...
wepoke辅助技巧!德扑之星... wepoke辅助技巧!德扑之星隐藏功能,wepower有辅助软件(详细辅助挂教程);(需添加指定薇7...
wepoke辅助机器人!用ai... wepoke辅助机器人!用ai外 挂打德州有用,WePoKer总是真的有挂,详细教程(有挂规律)是由...
wpk ai辅助!wpk真的有... wpk ai辅助!wpk真的有辅助,wpK的确是有挂的,详细教程,(有挂细节)1、下载好wpk辅助软...
德州微扑克辅助!德扑输赢概率计... 1、德州微扑克辅助!德扑输赢概率计算器,云扑克德州其实是真的有挂(详细有猫腻教程);代表性(透视辅助...
wpk透明挂(WPk)wpk俱... wpk透明挂(WPk)wpk俱乐部管理后台(透明挂)都是真的有挂(2025新版总结);1、游戏颠覆性...