Recently, I started working with Angular and I am currently creating a clone using Firebase. While working on this project, Angular is throwing two errors at me:
The Component AppComponent is standalone and cannot be declared in an NgModule. Should it be imported instead?
The
AppComponentclass is a standalone component and cannot be included in the@NgModule.bootstraparray. You should use thebootstrapApplicationfunction for bootstrapping instead.
This is the content of app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponentComponent } from './login-component/login-component.component';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { MatFormFieldModule } from "@angular/material/form-field";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent,
LoginComponentComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MatFormFieldModule,
BrowserAnimationsModule,
provideFirebaseApp(() => initializeApp({
apiKey: "YOUR API KEY",
authDomain: "YOUR AUTH DOMAIN",
databaseURL: "YOUR DATABASE URL",
projectId: "YOUR PROJECT ID",
storageBucket: "YOUR STORAGE BUCKET",
messagingSenderId: "YOUR SENDER ID",
appId: "YOUR APP ID",
measurementId: "YOUR MEASUREMENT ID"
})),
provideAuth(() => getAuth()),
provideFirestore(() => getFirestore())
],
providers: [],
bootstrap: [AppComponent]
}
export class AppModule { }
And here is the content of app.compnent.module.ts:
import { Component } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { CommonModule } from '@angular/common';
import { RouterLinkActive, RouterOutlet, RouterLink } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet,
RouterLink, RouterLinkActive],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'zomato-clone';
}
I am really struggling to resolve these issues. Any assistance would be greatly appreciated. Thank you in advance.
I attempted to remove the AppComponent from declarations and bootstrap, which allowed the code to compile but resulted in a blank page when I expected to see the navbar that I had designed. Can someone please guide me on how to fix this?