Having trouble running ng serve or ng build due to an error message stating that 'router-outlet' is not a recognized element. The Angular application structure looks like this:
app.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomepageComponent } from './homepage/homepage.component';
import { FeaturesComponent } from './features/features.component';
import { HowItWorksComponent } from './how-it-works/how-it-works.component';
import { UploadComponent } from './upload/upload.component';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
HomepageComponent,
FeaturesComponent,
HowItWorksComponent,
UploadComponent,
],
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([]), // Import RouterModule.forRoot with an empty array
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule { }
app-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomepageComponent } from './homepage/homepage.component';
import { FeaturesComponent } from './features/features.component';
import { HowItWorksComponent } from './how-it-works/how-it-works.component';
import { UploadComponent } from './upload/upload.component';
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomepageComponent },
{ path: 'features', component: FeaturesComponent },
{ path: 'how-it-works', component: HowItWorksComponent },
{ path: 'upload', component: UploadComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html:
<router-outlet></router-outlet>
app.component.ts:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'mri-scan-analyzer';
}
Struggling with this error for some time and unable to find a suitable solution on StackOverflow. Suspecting it might have something to do with the order of imports in app.module.ts file, but being new to Angular, seeking guidance.