Angular custom module cannot be loaded

Question

Probably obvious for most, but I still cannot find it out myself.

I have an angular application and the following relevant files

app/app.module.ts
app/dashboard/dashboard.component.html
app/dashboard/stats-tile/stats-tile.component.html

I generated the stats-tile component with ng generate so in the app.module.ts its imported and also in the declarations:

//app.module.ts
declarations: [
AppComponent,
TournamentSearchComponent,
DashboardComponent,
StatsTileComponent
],

Now I want to show the stats-tile component

//dashboard.component.html
<app-dashboard-stats-tile></app-dashboard-stats-tile>

I get:

Error: Template parse errors:
'app-dashboard-stats-tile' is not a known element:

What am I doing wrong. I am able to use another component i generated in the app component. is there some difference when I generate it in a subfolder? I am a bit new to angular but my understanding is that everything imported/declared in app.module.ts is available to the whole app.

Could you please provide more snippets for app.module, Host component and stats-tile component? — DT sawant
– DT sawant, Commented May 9, 2020 at 9:50

Yarden Fishler · Accepted Answer · 2020-05-09 09:53:45Z

1

My guess, based on the names of the files, is that you have used the wrong name here:

<app-dashboard-stats-tile></app-dashboard-stats-tile>

The name of this component .ts file would be "dashboard-stats-tile.ts".

You might want to replace this line with:

<app-stats-tile></app-stats-tile>

answered May 9, 2020 at 9:53

Yarden Fishler

713 bronze badges

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

1 Comment

solaire Over a year ago

Correct, just saw it too. I thought the selector was always kind of the path and i didnt know I find it in the component.ts selector: 'app-stats-tile',

Collectives™ on Stack Overflow

Angular custom module cannot be loaded

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related