Angular添加服务后出现Module parse failed错误的解决咨询

开发电商网站时，卖家注册表单原本可正常运行并在控制台输出结果，但创建ServicesService并在点击注册按钮时调用其userSignUp方法后，出现Module parse failed错误，请求协助解决。

错误信息 #

Module parse failed: Unexpected token (41:13)
File was processed with these loaders:

• ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
• ./node_modules/@ngtools/webpack/src/ivy/index.js
  You may need an additional loader to handle the result of these loaders.

|signUp(data, Object);
| void {
>     console, : .warn(data),
|     this: .seller.userSignUp()
| };

相关代码 #

Seller-auth HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css">
</head>
<body>
    <h1>Seller Sign-Up</h1>
    <form #sellerSignUp="ngForm" (ngSubmit)="signUp(sellerSignUp.value)">
        <label for="Name">Name</label>
        <input type="text" ngModel name="Name" placeholder="Enter name">

        <label for="Email">Email</label>
        <input type="email" ngModel name="Email" placeholder="Enter email">

        <label for="Password">Password</label>
        <input type="password" ngModel name="Password" placeholder="Enter password">

        <button type="submit">Sign Up</button>
    </form>
</body>
</html>

Seller-auth TS代码 #

import { Component, OnInit } from '@angular/core';
import { ServicesService } from "./services.service";

@Component({
  selector: 'app-seller-auth',
  templateUrl: './seller-auth.component.html',
  styleUrls: ['./seller-auth.component.css']
})
export class SellerAuthComponent implements OnInit {

  constructor() { private seller:ServicesService }

  ngOnInit(): void {
  }

  signUp(data:Object):void{
    console.warn(data)
    this.seller.userSignUp();
  }

}

服务TS代码 #

userSignUp(){
    console.warn("service called");
}

修复方案 #

1. 修正构造函数依赖注入写法 #

组件构造函数的依赖注入写法不符合Angular规范，需将服务声明移至构造函数参数中：

// 错误写法
// constructor() { private seller:ServicesService }

// 正确写法
constructor(private seller: ServicesService) { }

2. 完善服务文件结构 #

服务需添加@Injectable装饰器，使Angular能够识别并注入该服务：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // 全局注入，或根据需求指定其他注入范围
})
export class ServicesService {
  userSignUp(){
    console.warn("service called");
  }
}

3. 重新编译运行 #

完成上述修改后，重新执行ng serve启动项目，即可解决Module parse failed错误，注册按钮点击后将正常调用服务的userSignUp方法。

内容的提问来源于stack exchange，提问作者Tanmoy