I've got an app spun up in Angular 16 with Standalone Components. I'm getting two errors and I can't tell that they they are related, except that they showed up at the same time.
Error 1: this error is showing up in 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) {'
]
}
Error 2: this one is showing in the console.
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)
My 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}`]);
}
}
my 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())]
};
Can anyone see what I'm missing? Everything I'm finding for these errors are for Angular 6 or 12 or React and none of them seem to relate at all. This article: NullInjectorError: R3InjectorError(AppModule)[Router -> Router -> Router]: NullInjectorError: No provider for Router, s as close as I can get, but this doesn't seem to be an issue with my routing (that I can tell). The articles that SO is suggesting otherwise don't seem to be helping either. I don't intentionally want to create a duplicate but I'm stuck.
I've done everything I can think of (deleting package.json, node modules, etc) can someone see what I'm missing? Please let me know if there is anything additional you might need. Thank you in advance!
The import
import { Router } from "express";
in file collection-page.component.ts seems not correct. I guess you wanted to import router from angular?
Development tipp: if you see such error message, check all components for this requests. As it is runtime exception it is not needed to check all components / code. Only the components / core for the route.
In my IDE it was easy to see, because router was written in blue ... what means function ... and the router should not be injected as function.