在某个项目中写下了创建登录页面所执行的命令等的备忘录。

项目创建和配置文件创建

首先，创建一个Angular项目。

ng new olympic-tokyo

严格类型检查：是
Angular 路由：是
样式表：SCSS

(ng 新建 my-app –路由 –样式=scss)

添加材料

ng add @angular/material

预置主题：自定义
全局 Angular Material 字体样式：不使用
浏览器动画：是

如果你能做到这一点，首先启动并确认一下。

ng serve

打开浏览器，在localhost:4200上检查屏幕。

如果您想添加图像，请使用以下链接方便地进行操作：https://via.placeholder.com/728×90.png?text=访问WhoIsHostingThis.com购买指南

在这个时候启动VSCode

code . 

首先需要创建一个登录模块。

ng g m login

同时在应用程序下创建login文件夹，并创建login.module.ts。

创建适用于该模块的组件。

ng g c login/login-form -m login.module

这个命令会在login/login-form文件夹中创建一个名为login-form的组件，并将该组件注册到login模块中。

ng g c login/select-menu -m login.module

使用相同的方法创建一个select-menu组件。

ng g s login/login 

在这个命令中，创建一个位于登录下的登录服务。

制作图像

首先，在app.component.html中删除除了”以外”的所有内容。

使用mat-，运用Material元素进行设计。

路由器的定义

在主模块中定义方法（LazyLoad）

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// import { LoginModule } from './login/login.module';

const routes: Routes = [
  { 
    path: '', 
    loadChildren: () => import('./login/login.module').then(m => m.LoginModule),
  }
];

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

在子模块中的定义方式。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { LoginFormComponent } from './login-form/login-form.component';
import { SelectMenuComponent } from './select-menu/select-menu.component';

const loginRoutes: Routes = [

  { path: 'login', component: LoginFormComponent }, 
  { path: 'menu', component: SelectMenuComponent }, 
  { path: '**', component: LoginFormComponent },

];

@NgModule({
  declarations: [
    LoginFormComponent,
    SelectMenuComponent
  ],
  imports: [
    CommonModule, 
    RouterModule.forChild(loginRoutes),
  ]
})

将源代码部署到Google Firebase。

登录

firebase login

查看项目列表

firebase projects:list 

在进行初始化之前，首先需要访问Firebase并创建Firestore（否则在下面的 firebase init 过程中会报错）。

在本次拍摄中，我们选择了Asia-north1（日本·东京）作为拍摄地点。

如果能够创建成功，就执行以下的初始化操作。

初始化

firebase init

根据需要选择服务，如Firestore、Functions、Hosting、Remote Config等。

随后选择项目并完成一系列设定。

这样，就会生成一个public文件夹，然后将编译后的文件放在那里进行部署，这样就可以访问了。

ng build --prod 

把dist文件夹中的内容复制到public文件夹，并使用下面的命令进行部署。

firebase deploy --only hosting

安装Akita状态管理

添加Akita

ng add @datorama/akita

添加命令行

全局安装 npm install @datorama/akita-cli -g

参考：
Angular命令行界面
Firebase命令行界面