要创建一个Angular单页面应用的导航图，可以使用Angular的路由模块来管理不同页面之间的导航。

首先，需要在Angular应用中引入路由模块。可以在app.module.ts文件中添加以下代码：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 在这里添加路由配置
];

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

接下来，可以在routes数组中定义应用的不同页面和它们之间的导航。每个页面可以用一个对象来表示，包含路径和组件的映射关系。例如：

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' }, // 默认导航到home页面
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];

在这个示例中，当访问根路径时，会重定向到home页面。然后，可以使用路径'/home'、'/about'和'/contact'来导航到对应的页面。

然后，在Angular应用的主组件（通常是app.component.ts）中，可以使用Angular的router-outlet指令来显示当前导航到的页面。例如：

最后，需要在应用的根模块（通常是app.module.ts）中导入和配置AppRoutingModule。例如：

import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    // 其他导入...
    AppRoutingModule
  ],
  // 其他配置...
})
export class AppModule { }

这样，就可以在Angular单页面应用中实现导航图了。通过点击链接或使用路由导航器导航到不同的页面，然后在router-outlet中显示相应的组件。

希望以上解决方法对你有帮助！