Currently I'm working on an Angular TicTacToe project using Angular version 17.0.4. I encountered a Range Error stating "Maximum call stack size exceeded." In order to resolve this issue, I replaced all instances of AppComponent with SquareComponent. Previously, I had an error message indicating that the module 'app.component' had no exported member 'AppComponent'.
✘ [ERROR] TS2305: Module '"./app/app.component"' has no exported member 'AppComponent'. [plugin angular-compiler]
src/main.server.ts:2:9:
2 │ import { AppComponent } from './app/app.component';
╵ ~~~~~~~~~~~~ ✘ [ERROR] TS2305: Module '"./app/app.component"' has no exported member 'AppComponent'. [plugin angular-compiler]
src/main.ts:3:9:
3 │ import { AppComponent } from './app/app.component';
╵ ~~~~~~~~~~~~ ✘ [ERROR] No matching export in "src/app/app.component.ts" for import "AppComponent"
src/main.server.ts:2:9:
2 │ import { AppComponent } from './app/app.component';
app.component.ts
from ....
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-square',
standalone: true,
imports: [CommonModule, RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class SquareComponent {
title = 'TicTacToeApp';
}
To address this issue, I attempted to follow a suggested solution of renaming all AppComponents to SquareComponent and adjusting the selector to app-square while also changing app-root to app square.