在Angular Universal中，可以通过创建一个应用程序外壳并只预渲染外壳来实现。以下是一个解决方案，包含了代码示例：

1. 首先，创建一个用于预渲染的组件，例如ShellComponent：

import { Component } from '@angular/core';

@Component({
  selector: 'app-shell',
  template: `
    

      
      
这是应用程序的外壳
       
    
  `,
})
export class ShellComponent {}

2. 在应用程序的路由配置中，将ShellComponent作为应用程序的根路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ShellComponent } from './shell.component';

const routes: Routes = [
  {
    path: '',
    component: ShellComponent, // 使用ShellComponent作为根路由
    children: [
      // 其他子路由
      // ...
    ],
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

3. 在服务器端代码中，使用Angular Universal的renderModuleFactory方法来预渲染应用程序的外壳。以下是一个示例：

import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import { renderModuleFactory } from '@angular/platform-server';
import { AppServerModuleNgFactory } from './path-to-app-server-module-ngfactory';
import * as fs from 'fs';

enableProdMode();

const indexHtml = fs.readFileSync('./dist/browser/index.html', 'utf-8'); // 加载编译后的index.html文件

renderModuleFactory(AppServerModuleNgFactory, {
  document: indexHtml,
  url: '/',
})
  .then((html) => {
    fs.writeFileSync('./dist/browser/index.html', html, 'utf-8'); // 将预渲染的html写入index.html文件中
  })
  .catch((error) => {
    console.error('预渲染错误:', error);
  });

通过上述步骤，你可以创建一个应用程序外壳，并在预渲染时将其内容添加到index.html文件中。这样，在服务器端渲染时，浏览器可以直接显示外壳内容，从而提高应用程序的性能和用户体验。