Angular Module Export Not Recognized

I am creating a new website in Angular V20. I have created a new module and added a new component to the module declarations and exports. I am exporting the component in its script. When I attempt to import the new component from the module into my app.routes.ts file, it throws the error:

No matching export in "module" for import "Component name".

Then tells me there is an error on the import of the component in my routing file. When I hover over the import in VS code, it states, "Module 'module location' declares 'component' locally, but it is not exported."

What is causing this error and why can't I use my module to import my component? Thanks for any and all help!

Component Code:

import { Component } from '@angular/core';

@Component({
selector: 'event-view',
imports: [],
templateUrl: './event-view.html',
styleUrl: './event-view.css'
})
export class EventView { }


Module code:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EventView } from './event-view/event-view';


@NgModule({
declarations: [ EventView ],
imports: [
CommonModule
],
exports: [ EventView ]
})
export class PagesModule { }



app.routes.ts:

import { Routes } from '@angular/router';
import { EventView } from '../Pages/pages-module';

export const routes: Routes = [
{
path: '/recipient/:id',
component: EventView
}
];


I have tried removing the standalone from the component but then it wouldn't go into the module without errors. I have tried checking if there is a missing attribute on my component and if there is anything missing on my module, but everything looks good.

Continue reading...