1

package.json

@@ -15,21 +15,23 @@
   "dependencies": {
     "@angular/animations": "^18.0.0",
     "@angular/cdk": "^17.0.0",
-    "@angular/common": "^18.0.0",
+    "@angular/common": "^18.2.13",
     "@angular/compiler": "^18.0.0",
-    "@angular/core": "^18.0.0",
+    "@angular/core": "^18.2.13",
+    "@angular/fire": "^18.0.1",
     "@angular/forms": "^18.2.13",
     "@angular/material": "^17.0.0",
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
-    "@angular/router": "^18.0.0",
+    "@angular/router": "^18.2.13",
     "@capacitor/app": "6.0.2",
     "@capacitor/core": "6.2.0",
     "@capacitor/haptics": "6.0.2",
     "@capacitor/keyboard": "6.0.3",
     "@capacitor/status-bar": "6.0.2",
-    "@ionic/angular": "^8.0.0",
+    "@ionic/angular": "^8.4.1",
     "chart.js": "^4.4.7",
+    "firebase": "^11.1.0",
     "ionicons": "^7.2.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

src/app/app-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+import { LoginPage } from './login/login.page'; // 确保导入 LoginPage
+import { RegisterPage } from './register/register.page'; // 确保导入 RegisterPage
+import { HomePage } from './home/home.page'; // 确保导入 HomePage
+
+const routes: Routes = [
+  { path: '', redirectTo: 'login', pathMatch: 'full' },
+  { path: 'login', component: LoginPage }, // 确保使用 component 而不是 loadChildren
+  { path: 'register', component: RegisterPage }, // 确保使用 component
+  { path: 'home', component: HomePage }, // 确保使用 component
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

src/app/app.component.ts

@@ -1,12 +1,10 @@
 import { Component } from '@angular/core';
-import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-root',
-  templateUrl: 'app.component.html',
-  standalone: true,
-  imports: [IonApp, IonRouterOutlet],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true, // 确保这里是 standalone: true
+  imports: [] // 如果需要，可以在这里导入其他模块
 })
-export class AppComponent {
-  constructor() {}
-}
+export class AppComponent {}

src/app/app.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicModule } from '@ionic/angular';
+import { AppRoutingModule } from './app-routing.module';
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(),
+    AppRoutingModule,
+    FormsModule // 确保 FormsModule 被导入
+  ],
+  providers: [],
+  // 不再需要 bootstrap 数组
+})
+export class AppModule {}

src/app/app.routes.ts

@@ -8,5 +8,19 @@ export const routes: Routes = [
   {
     path: 'countdown',
     loadComponent: () => import('./countdown/countdown.page').then(m => m.CountdownPage)
-  }
+  },
+  {
+    path: 'login',
+    loadComponent: () => import('./login/login.page').then( m => m.LoginPage)
+  },
+  {
+    path: 'register',
+    loadComponent: () => import('./register/register.page').then( m => m.RegisterPage)
+  },
+  {
+    path: 'home',
+    loadComponent: () => import('./home/home.page').then( m => m.HomePage)
+  },
+  
+    
 ];

src/app/auth.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { initializeApp } from 'firebase/app';
+import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from 'firebase/auth';
+import { environment } from '../environments/environment'; // 确保这个路径是正确的
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private auth;
+
+  constructor() {
+    const app = initializeApp(environment.firebase);
+    this.auth = getAuth(app);
+  }
+
+  async register(email: string, password: string) {
+    return await createUserWithEmailAndPassword(this.auth, email, password);
+  }
+
+  async login(email: string, password: string) {
+    return await signInWithEmailAndPassword(this.auth, email, password);
+  }
+
+  async logout() {
+    return await this.auth.signOut();
+  }
+}

src/app/home/home.page.html

@@ -0,0 +1,13 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>home</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">home</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

src/app/home/home.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HomePage } from './home.page';
+
+describe('HomePage', () => {
+  let component: HomePage;
+  let fixture: ComponentFixture<HomePage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/home.page.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
+  standalone: true, // 将此属性设置为 true
+  imports: [CommonModule, FormsModule, IonicModule] // 导入所需的模块
+})
+export class HomePage {}

src/app/login/login.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular'; // 导入 IonicModule
+import { LoginPage } from './login.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule // 添加 IonicModule
+  ],
+  declarations: [LoginPage]
+})
+export class LoginPageModule {}

src/app/login/login.page.html

@@ -0,0 +1,20 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>登录</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <form (submit)="login()">
+    <ion-item>
+      <ion-label position="floating">邮箱</ion-label>
+      <ion-input type="email" [(ngModel)]="email" name="email" required></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="floating">密码</ion-label>
+      <ion-input type="password" [(ngModel)]="password" name="password" required></ion-input>
+    </ion-item>
+    <ion-button expand="full" type="submit">登录</ion-button>
+  </form>
+  <ion-button routerLink="/register">注册</ion-button>
+</ion-content>

src/app/login/login.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LoginPage } from './login.page';
+
+describe('LoginPage', () => {
+  let component: LoginPage;
+  let fixture: ComponentFixture<LoginPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/login/login.page.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { AuthService } from '../auth.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.page.html',
+  styleUrls: ['./login.page.scss'],
+})
+export class LoginPage {
+  email?: string; // 可选属性
+  password?: string; // 可选属性
+
+  constructor(private authService: AuthService, private router: Router) {}
+
+  async login() {
+    try {
+      if (this.email && this.password) { // 确保在使用前有值
+        await this.authService.login(this.email, this.password);
+        this.router.navigate(['/home']); // 登录成功后跳转
+      } else {
+        console.error('邮箱和密码不能为空');
+      }
+    } catch (error) {
+      console.error('登录失败', error);
+    }
+  }
+}

src/app/register/register.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular'; // 导入 IonicModule
+import { RegisterPage } from './register.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule // 添加 IonicModule
+  ],
+  declarations: [RegisterPage]
+})
+export class RegisterPageModule {}

src/app/register/register.page.html

@@ -0,0 +1,23 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>注册</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <form (submit)="register()">
+    <ion-item>
+      <ion-label position="floating">邮箱</ion-label>
+      <ion-input type="email" [(ngModel)]="email" name="email" required></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="floating">密码</ion-label>
+      <ion-input type="password" [(ngModel)]="password" name="password" required></ion-input>
+    </ion-item>
+    <ion-button expand="full" type="submit">注册</ion-button>
+  </form>
+  
+  <ion-button routerLink="/login" expand="full" fill="clear">
+    返回登录
+  </ion-button>
+</ion-content>

src/app/register/register.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RegisterPage } from './register.page';
+
+describe('RegisterPage', () => {
+  let component: RegisterPage;
+  let fixture: ComponentFixture<RegisterPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RegisterPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/register/register.page.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { AuthService } from '../auth.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: 'register.page.html',
+})
+export class RegisterPage {
+  email?: string; // 可选属性
+  password?: string; // 可选属性
+
+  constructor(private authService: AuthService, private router: Router) {}
+
+  async register() {
+    try {
+      if (this.email && this.password) { // 确保在使用前有值
+        await this.authService.register(this.email, this.password);
+        this.router.navigate(['/login']); // 注册成功后跳转到登录页面
+      } else {
+        console.error('邮箱和密码不能为空');
+      }
+    } catch (error) {
+      console.error('注册失败', error);
+    }
+  }
+}

src/app/user.service.ts

@@ -0,0 +1,27 @@
+// src/app/services/user.service.ts
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+  private users: any[] = []; // 存储用户的简单数组（在真实应用中应使用后端API）
+
+  constructor() {}
+
+  register(username: string, password: string) {
+    const user = { username, password };
+    this.users.push(user);
+    return user; // 返回注册的用户
+  }
+
+  login(username: string, password: string): boolean {
+    const user = this.users.find(u => u.username === username && u.password === password);
+    return !!user; // 返回是否登录成功
+  }
+
+  isUserLoggedIn(): boolean {
+    // 这里可以添加用户登录状态的检查逻辑
+    return false; // 默认返回未登录状态
+  }
+}

src/environments/environment.ts

@@ -3,9 +3,16 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  firebase: {
+    apiKey: "YOUR_API_KEY",
+    authDomain: "YOUR_AUTH_DOMAIN",
+    projectId: "YOUR_PROJECT_ID",
+    storageBucket: "YOUR_STORAGE_BUCKET",
+    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
+    appId: "YOUR_APP_ID"
+  }
 };
-
 /*
  * For easier debugging in development mode, you can import the following file
  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.

src/main.ts

@@ -1,14 +1,16 @@
+import { enableProdMode } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
-import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
-import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
+import { AppComponent } from './app/app.component'; // 确保路径正确
+import { environment } from './environments/environment';
+import { RouteReuseStrategy } from '@angular/router'; // 导入 RouteReuseStrategy
+import { IonicRouteStrategy } from '@ionic/angular'; // 导入 IonicRouteStrategy
 
-import { routes } from './app/app.routes';
-import { AppComponent } from './app/app.component';
+if (environment.production) {
+  enableProdMode();
+}
 
 bootstrapApplication(AppComponent, {
   providers: [
-    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
-    provideIonicAngular(),
-    provideRouter(routes, withPreloading(PreloadAllModules)),
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } // 添加路由重用策略
   ],
-});
+});

tsconfig.json

@@ -10,21 +10,32 @@
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "allowImportingTsExtensions": true,// 保留此选项
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "skipLibCheck": true,
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "es2022",
     "module": "es2020",
     "lib": ["es2018", "dom"],
-    "useDefineForClassFields": false
+    "useDefineForClassFields": false,
+    "noEmit": true // 添加此行
+    // 或者可以使用 "emitDeclarationOnly": true
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  }
+    "strictTemplates": true,
+    "enableIvy": true
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
 }

tsconfig.spec.json

@@ -16,3 +16,5 @@
     "src/**/*.d.ts"
   ]
 }
+
+