angularcomponentsparent-childoutlet

How to ensure component is part of module / nest component in a template?

I'm learning Angular (not AngularJS) and am having trouble getting my template to reference components properly. Currently it doesn't seem to "see" the referenced component, so I'm either not declaring/importing it in the right place, or I'm using the wrong thing to reference the component from the template, or both.

Either way, I need to know how to get my logo to show up in the layouts from a component.

I'll supply a basic version of the problem:

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { MonkeyModule } from './monkey/monkey.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(MonkeyModule)
  .catch(err => console.error(err));

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <parentComponent></parentComponent>
</body>
</html>

monkey.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { parentComponent } from './parent.component';
import { childComponent } from './child.component';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    parentComponent,
    childComponent
  ],
  providers: [],
  bootstrap: [parentComponent]
})
export class MonkeyModule { }

parent.component.ts

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

import { childComponent } from './child.component';

@Component({
  selector: 'parentComponent',
  templateUrl: './parent.component.html'
})
export class parentComponent {
}

parent.component.html

<div>
This is the Parent!
    <childComponent></childComponent>
</div>

child.component.ts

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

@Component({
  selector: 'childComponent',
  templateUrl: './child.component.html'
})
export class childComponent {
}

child.component.html

<div>
    This is the child.
</div>
Solution

  • After lots of experimentation, the entire problem seems to boil down to a capital letter in the selector.

    The following solves my monkey module problem: parent.component.html

    <div>
This is the Parent!
    <child-component></child-component>
</div>

    child.component.ts

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

@Component({
  selector: 'child-component',
  templateUrl: './child.component.html'
})
export class childComponent {
}