I'm diving into Angular CLI for the first time and trying to recreate a previous web project of mine. I've managed to nest and display components inside the root component successfully, but after that, I'm facing issues referencing any component in the HTML.
Here's an overview of my code:
index.html
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Testing Angular</title>
<base href="/">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FirstComponent } from './first/first.component';
@NgModule({
declarations: [AppComponent, FirstComponent],
imports: [BrowserModule, AppRoutingModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ["./app.component.css"]
})
export class AppComponent {}
app.component.html
<section id="container">
<app-first></app-first>
</section>
<router-outlet></router-outlet>
first.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SecondComponent } from './second/second.component';
@NgModule({
declarations: [SecondComponent],
imports: [CommonModule]
})
export class FirstModule { }
first.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-first',
templateUrl: './first.component.html',
styleUrls: ["./first.component.css"]
})
export class FirstComponent {}
first.component.html
<div id="first">
<app-second></app-second> <!-- This gives an error: it doesn't know whats Second Component -->
</div>
second.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [CommonModule],
declarations: []
})
export class SecondModule { }
second.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-second',
templateUrl: './second.component.html',
styleUrls: ["./second.component.css"]
})
export class SecondComponent {}
second.component.html
<div id="second">
<span>I'm second component!</span>
</div>
The
<app-second></app-second>