Angular Universal和Angular Service Worker是Angular框架提供的两个用于改善应用性能和SEO的工具。

Angular Universal用于实现服务器端渲染（SSR），将Angular应用在服务器上预先渲染，以提供更快的初始加载时间和更好的SEO。下面是一个使用Angular Universal的代码示例：

1. 首先，安装Angular Universal依赖：

npm install --save @nguniversal/express-engine

2. 创建一个服务器端渲染的模块app.server.module.ts：

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    ServerModule,
    AppModule
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule { }

3. 创建一个服务器入口文件server.ts：

import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import { createServer } from 'http';
import { AppServerModule } from './src/app/app.server.module';

enableProdMode();

const port = process.env.PORT || 4000;

const server = createServer((req, res) => {
  res.setHeader('Content-Type', 'text/html');

  const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');

  const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');

  res.render('index', {
    req,
    res,
    providers: [
      provideModuleMap(LAZY_MODULE_MAP)
    ],
    document: ''
  });
});

server.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

4. 修改angular.json文件，添加server渲染的配置：

"architect": {
  "server": {
    "builder": "@angular-devkit/build-angular:server",
    "options": {
      "outputPath": "dist/server",
      "main": "src/main.server.ts",
      "tsConfig": "src/tsconfig.server.json"
    }
  },
  ...
}

5. 使用以下命令来构建和启动服务器端渲染的应用：

npm run build:ssr
npm run serve:ssr

至此，你的Angular应用就可以使用Angular Universal进行服务器端渲染了。

接下来是Angular Service Worker，它是一个用于实现离线缓存和预加载的工具。下面是一个使用Angular Service Worker的代码示例：

1. 首先，安装Angular Service Worker依赖：

ng add @angular/pwa

2. 在app.module.ts中，导入ServiceWorkerModule并添加到imports数组中：

import { NgModule } from '@angular/core';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  ...
})
export class AppModule { }

3. 在index.html中，添加service-worker脚本：

4. 构建并运行应用：

ng build --prod

以上代码示例演示了如何在Angular应用中使用Angular Universal和Angular Service Worker。在使用这些工具时，请确保按照官方文档提供的详细步骤进行操作。