Angular Module Export Not Recognized

Question

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.

Naren Murali · Accepted Answer · 2025-09-07 03:51:58Z

0

Since you are using Angular 20, you should be using standalone components instead of module approach, which is the recommended way.

The exports of the module is meant to be used when we add this module to the imports array of another module. So add the original path as the import in the routing file.

import { Routes } from '@angular/router';

import { EventView } from './event-view/event-view';



export const routes: Routes = [

    {   

        path: '/recipient/:id',

        component: EventView

    }

];

edited Sep 7 at 3:51

answered Sep 6 at 17:52

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sinotten Sep 6 at 18:01

Is this a limitation of the routing component or are you only supposed to use modules when you want to import into other modules?

Naren Murali Sep 7 at 3:50

Routing is working as expected, we just need to use typescript imports, since the method used is for sharing between modules, plus you are using angular 20, you should use standalone components. whch is recommended.

Collectives™ on Stack Overflow

Angular Module Export Not Recognized

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related