Angular 16独立组件项目遇两类错误求助：注入错误与process未定义

问题背景 #

基于Angular 16搭建了使用独立组件的项目，出现两个错误，无法判断二者是否关联。已尝试删除package.json、node_modules并重装依赖，问题仍未解决。

错误详情 #

错误1（IntelliJ内显示） #

ERROR Error [NullInjectorError]: R3InjectorError(Standalone[_AppComponent])[function(options) { -> function(options) { -> function(options) {]: 
  NullInjectorError: No provider for function(options) {!
    at NullInjector.get (/Users/3rb/workspace/learning/practice/e-commerce/e-commerce-practice/node_modules/@angular/core/fesm2022/core.mjs:5690:27)
    at R3Injector.get (/Users/3rb/workspace/learning/practice/e-commerce/e-commerce-practice/node_modules/@angular/core/fesm2022/core.mjs:6133:33)
    at R3Injector.get (/Users/3rb/workspace/learning/practice/e-commerce/e-commerce-practice/node_modules/@angular/core/fesm2022/core.mjs:6133:33)
    at R3Injector.get (/Users/3rb/workspace/learning/practice/e-commerce/e-commerce-practice/node_modules/@angular/core/fesm2022/core.mjs:6133:33)
    at ChainedInjector.get (/Users/3rb/workspace/learning/practice/e-commerce/e-commerce-practice/node_modules/@angular/core/fesm2022/core.mjs:15478:36)
    at lookupTokenUsingModuleInjector (/Users/3rb/workspace/learning/practice/e-commerce/e-commerce-practice/node_modules/@angular/core/fesm2022/core.mjs:4201:39)
    at getOrCreateInjectable (/Users/3rb/workspace/learning/practice/e-commerce/e-commerce-practice/node_modules/@angular/core/fesm2022/core.mjs:4249:12)
    at ɵɵdirectiveInject (/Users/3rb/workspace/learning/practice/e-commerce/e-commerce-practice/node_modules/@angular/core/fesm2022/core.mjs:12096:19)
    at ɵɵinject (/Users/3rb/workspace/learning/practice/e-commerce/e-commerce-practice/node_modules/@angular/core/fesm2022/core.mjs:1006:42)
    at Module.inject (/Users/3rb/workspace/learning/practice/e-commerce/e-commerce-practice/node_modules/@angular/core/fesm2022/core.mjs:1090:12) {
  ngTempTokenPath: null,
  ngTokenPath: [
    'function(options) {',
    'function(options) {',
    'function(options) {'
  ]
}

错误2（浏览器控制台显示） #

Uncaught ReferenceError: process is not defined
    at Mime.define (mime.js:25:7)
    at node_modules/send/node_modules/mime/mime.js (mime.js:87:6)
    at __require2 (chunk-X6JV76XL.js?v=0d193468:41:50)
    at node_modules/send/index.js (index.js:24:12)
    at __require2 (chunk-X6JV76XL.js?v=0d193468:41:50)
    at node_modules/express/lib/utils.js (utils.js:20:12)
    at __require2 (chunk-X6JV76XL.js?v=0d193468:41:50)
    at node_modules/express/lib/application.js (application.js:24:19)
    at __require2 (chunk-X6JV76XL.js?v=0d193468:41:50)
    at node_modules/express/lib/express.js (express.js:18:13)

相关代码 #

CollectionsPageComponent（component.ts） #

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { NavbarComponent } from "./navbar/navbar.component";

@Component({
  selector: 'app-collections-page',
  standalone: true,
  imports: [
    MatCard,
    MatIcon,
    NgOptimizedImage,
    NgForOf
  ],
  templateUrl: './collections-page.component.html',
  styleUrl: './collections-page.component.scss'
})
export class CollectionsPageComponent implements OnInit{

  public productService = inject(ProductService);
  public router = inject(Router);

  allProduct?: Product[] | undefined = [];

  ngOnInit() {
    this.productService.products.pipe(
      tap(data => console.log(data)),
    )
      .subscribe( res => {
        this.allProduct = res
      })
  }

  goToProduct(id: number) {
    this.router.navigate(['product', `${id}`]);
  }

}

ProductService（service.ts） #

import { Injectable } from '@angular/core';
import { BehaviorSubject } from "rxjs";
import { Product } from "../product";

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor() { }

  private data: Product[] = [
    {
      "name": "Fall Limited Edition Sneakers",
      "id": "V59OF92YF627HFY0",
      "description": "Donec lobortis eleifend condimentum. Cras dictum dolor lacinia lectus vehicula rutrum. Maecenas quis nisi nunc. Nam tristique feugiat est vitae mollis. Maecenas quis nisi nunc.",
      "price": 250.00,
      "markdown": 125.00,
      "ordering": 100,
      "quantity": 1,
      "inCart" : false,
      "imgURL": "./assets/image-product-1-thumbnail.jpg"
    },
// more products, I've removed most of them to make this shorter
  ]

  private products$ = new BehaviorSubject<Product[]>(this.data);
  products = this.products$.asObservable();

}

应用配置（App Config） #

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideClientHydration(), provideAnimationsAsync(), provideHttpClient(withFetch())]
};

排查建议 #

针对错误1（NullInjectorError） #

• 补充缺失的导入语句：组件中未导入OnInit、ProductService、Router、tap，Angular无法识别依赖导致注入失败。需添加：

  import { OnInit, inject } from '@angular/core';
  import { ProductService } from './path-to-your-service'; // 替换为实际服务路径
  import { Router } from '@angular/router';
  import { tap } from 'rxjs/operators';
  

• 修正Angular Material组件导入：独立组件需导入Material模块而非单个组件，比如MatCard换成MatCardModule，MatIcon换成MatIconModule，同时确保从对应路径导入：

  import { MatCardModule } from '@angular/material/card';
  import { MatIconModule } from '@angular/material/icon';
  

• 添加CommonModule到组件imports数组：NgOptimizedImage和NgForOf属于CommonModule，当前代码未导入该模块，需补上。

针对错误2（process is not defined） #

• 移除不必要的后端依赖：错误显示项目引入了express、send、mime等Node.js后端库，Angular前端项目不需要这些。检查package.json，删除相关依赖后重新执行npm install。
• 清理误导入的后端代码：排查项目中是否有导入express相关模块的语句，找到后删除。

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