首先

我会将其留作备忘录。
本文是假设已经创建了一个Web项目来撰写的。

事先准备

我們將創建一個用於登錄的畫面組件，並對該組件進行路由配置。

import 'package:angular/angular.dart';

@Component(
  selector: 'signin',
  templateUrl: 'signin_component.html',
  directives: [coreDirectives],
)
class SigninComponent {
}

<h1>SignIn</h1>

1. 在pubspec.yaml文件中写入angular_router。

dependencies:
  angular: ^5.2.0
  angular_router: ^2.0.0-alpha+19 #追加

$ pub get

编辑main.dart

import 'package:angular/angular.dart';
import 'package:personal_web/app_component.template.dart' as ng;
import 'package:angular_router/angular_router.dart';
import 'main.template.dart' as self;

const useHashLS = false;
@GenerateInjector(
  routerProvidersHash,
)
final InjectorFactory injector = self.injector$Injector;

void main() {
  runApp(ng.AppComponentNgFactory, createInjector: injector);
}

新建了一个名为routes.dart的文件。

import 'package:angular_router/angular_router.dart';
import 'signin/signin_component.template.dart' as signinComponent;

class RoutePaths {
  static final signIn = RoutePath(path: 'signin');
}

class Routes {
  static final all = <RouteDefinition>[
    RouteDefinition(
      routePath: RoutePaths.signIn,
      component: signinComponent.SigninComponentNgFactory,
    ),
  ];
}

在中文中重新表达上述内容：
据说不存在名为signin_component.template.dart的文件，但在构建时会生成一个称为组件工厂的东西。参考文献在这里。

4. 更改 app_component.dart 和 app_component.html 文件

如果URL发生变化，将改变以便显示各自的页面。

import 'package:angular/angular.dart';
import 'package:angular_router/angular_router.dart'; //追加
import 'src/routes.dart'; //追加

@Component(
  selector: 'app-component',
  templateUrl: 'app_component.html',
  directives: [routerDirectives], //追加
  exports: [RoutePaths, Routes] //追加
)
class AppComponent {}

<router-outlet [routes]="Routes.all"></router-outlet>

只需要执行这个了
你可以通过访问http://localhost:8080/#/signin来实现。