以下是一个使用Angular 9、KeyCloak、ServiceWorker和Edge浏览器的解决方案的代码示例：

1. 第一步：安装Angular CLI并创建新项目

npm install -g @angular/cli
ng new angular-keycloak-demo
cd angular-keycloak-demo

2. 第二步：安装KeyCloak并配置

npm install keycloak-js

在src目录下创建一个keycloak.json文件，包含KeyCloak的配置信息：

{
  "realm": "demo-realm",
  "auth-server-url": "http://localhost:8080/auth",
  "ssl-required": "external",
  "resource": "angular-app",
  "public-client": true,
  "confidential-port": 0
}

3. 第三步：创建一个ServiceWorker

在src目录下创建一个sw.js文件，用于注册和激活ServiceWorker，并在其注册期间缓存应用程序的静态资源。

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('static-v1').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/main.js',
        '/polyfills.js',
        '/runtime.js',
        '/styles.css'
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

4. 第四步：修改Angular项目配置

在angular.json文件中，修改build和serve配置以包含ServiceWorker的相关代码。

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/angular-keycloak-demo",
    "serviceWorker": true,
    "ngswConfigPath": "src/ngsw-config.json",
    ...
  },
  ...
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "angular-keycloak-demo:build",
    "ssl": false,
    ...
  },
  ...
},

5. 第五步：在AppComponent中添加KeyCloak代码

在src/app/app.component.ts文件中，添加KeyCloak的初始化和认证逻辑。

import { Component, OnInit } from '@angular/core';
import * as Keycloak from 'keycloak-js';

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

      
Welcome, {{ keycloak.tokenParsed.preferred_username }}
      Logout
    
    

      
Please login to continue
      Login
    
  `,
  styles: []
})
export class AppComponent implements OnInit {
  private keycloak: any;
  public authenticated = false;

  ngOnInit() {
    this.keycloak = Keycloak('/assets/keycloak.json');
    this.keycloak.init().then(authenticated => {
      this.authenticated = authenticated;
    });
  }

  login() {
    this.keycloak.login();
  }

  logout() {
    this.keycloak.logout();
  }
}

6. 第六步：运行应用程序

ng serve

现在，您可以在Edge浏览器中访问http://localhost:4200并进行测试。

这是一个基本的解决方案，您可以根据需要进行修改和扩展。请注意，KeyCloak和ServiceWorker的配置和功能取决于您的具体需求。