要将Angular 7与IdentityServer4的oidc集成，您可以按照以下步骤进行操作：

步骤1：创建Angular项目

首先，您需要创建一个Angular项目。您可以使用Angular CLI来创建一个新的Angular项目。打开终端并运行以下命令：

ng new angular-oidc-demo

步骤2：安装oidc-client库

在Angular项目的根目录下，运行以下命令来安装oidc-client库：

npm install oidc-client --save

步骤3：创建AuthService

在Angular项目的src/app目录下，创建一个名为auth.service.ts的新文件，并添加以下代码：

import { Injectable } from '@angular/core';
import { UserManager, User } from 'oidc-client';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private userManager: UserManager;

  constructor() {
    const settings = {
      authority: environment.identityServerUrl,
      client_id: environment.clientId,
      redirect_uri: environment.redirectUrl,
      response_type: 'code',
      scope: 'openid profile email',
      post_logout_redirect_uri: environment.postLogoutRedirectUrl
    };

    this.userManager = new UserManager(settings);
  }

  login() {
    return this.userManager.signinRedirect();
  }

  logout() {
    return this.userManager.signoutRedirect();
  }

  completeLogin() {
    return this.userManager.signinRedirectCallback().then(user => {
      localStorage.setItem('user', JSON.stringify(user));
    });
  }

  completeLogout() {
    return this.userManager.signoutRedirectCallback().then(() => {
      localStorage.removeItem('user');
    });
  }

  getUser(): Promise {
    return this.userManager.getUser();
  }
}

在上面的代码中，我们创建了一个AuthService类，它使用oidc-client库来处理用户身份验证和授权。

步骤4：配置环境变量

打开Angular项目的src/environments目录，并编辑environment.ts文件，添加以下代码：

export const environment = {
  production: false,
  identityServerUrl: 'https://your-identity-server-url',
  clientId: 'your-client-id',
  redirectUrl: 'http://localhost:4200/callback',
  postLogoutRedirectUrl: 'http://localhost:4200'
};

请替换上面代码中的占位符，将它们替换为您的IdentityServer4实例的URL、您的客户端ID以及重定向URL。

步骤5：创建AuthGuard

在Angular项目的src/app目录下，创建一个名为auth.guard.ts的新文件，并添加以下代码：

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.authService.getUser()) {
      return true;
    }

    this.authService.login();
    return false;
  }
}

在上面的代码中，我们创建了一个AuthGuard类，它实现了CanActivate接口，并用于保护需要身份验证的路由。如果用户已经登录，它将返回true，否则将重定向到登录页面。

步骤6：使用AuthGuard保护路由

在Angular项目的src/app目录下，打开app-routing.module.ts文件，并使用AuthGuard来保护需要身份验证的路由。例如：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] }
];

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

在上面的代码中，我们使用AuthGuard来保护了/profile路由。

步骤7：创建登录和回调组件

在Angular项目的src/app目录下，创建名为login.component.ts和callback.component.ts的两