CODEWITHSUNDEEP
javascriptangularangular-components
user10499930
user10499930

Reputation:

Unable to use a selector of a sub-component in Angular

I want to "insert" task.component's view into my main app.component.html (root template) as follows:

(app.module.ts)

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

import { AppComponent } from './app.component';
import { TaskComponent } from './task/task.component';

@NgModule({
  declarations: [
    AppComponent,
    TaskComponent
  ],
  imports: [
    BrowserModule
  ],
  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 {
  title = 'planner';
}

(task.component.ts)

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

@Component({
  selector: 'app-task',
  templateUrl: './task.component.html',
  styleUrls: ['./task.component.css']
})

export class TaskComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    console.log("Task comonent initialized!");
  }

}

(app.component.html)

<!--The content below is only a placeholder and can be replaced.-->
<app-task></app-task>
<div style="text-align:center">
  <h1>
    Welcome to {{ title + 1 }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

So despite the fact that I have linked the task.component to the module I do not have access to its selector. Did I forget some import/export statements. Is that in fact a misunderstanding of angular's architecture/principle of structure? The file task.component.html only consists of
<p> task works! </p> Edit:

I also received the following error from the client's console: [error screenshot]

Upvotes: 1

Views: 2229

Answers (5)

user10499930
user10499930

Reputation:

In fact restarting the server with ng serve did not solve the problem and therefore was not responsible for the missing interpolation of the component's template.

Rebuilding the app was the only (and ugliest) option for me which caused additionally work of course.

  1. Delete all files of your project (all files in the layer in which amongst others node_modules is placed)
  2. Setting up the project with ng new (...)
  3. Building clean components with terminal commands (ng g c (...) / ng generate component (...))

Upvotes: 0

roag92
roag92

Reputation: 146

I don't know what did you mean for linking components?

Following the structure that you shared it's working if you want see something, you must create the task-component.html because doesn't exist.

And the idea a component is that each component must has its logical indipendent to work.

And ways to share resources is using EventEmitters or binding properties.

This is the sceenshot that I saw and I can see the component created.

Screenshoot

Upvotes: 0

Pranesh Udumalpet Hanumanth
Pranesh Udumalpet Hanumanth

Reputation: 308

Try re-running ng serve after stopping it. Hope you added component using Angular-Cli command - ng generate component task

Upvotes: -1

SiddAjmera
SiddAjmera

Reputation: 39432

To add a New Component to the Module that you're working on (which in your case is the AppModule), you first create a component(just use AngularCLI to do this by running the command ng g c task), and Angular CLI automatically adds it to your AppModule's declarations array. Then you can simply add the selector tag to your app.component.html to load that up

Just add <app-task></app-task> to your app.component.html

UPDATE

In some cases, even when you do everything properly, Angular doesn't recognise the Component that was added recently. Try breaking your local service by Ctrl + C on Windows or Cmd + C on Mac. And then run ng serve to serve up the App again. This generally happens when a Component is Added while the Server is running.

Here's a Sample StackBlitz for your ref just to cross check if you missed something.

Upvotes: 1

Mr. Om
Mr. Om

Reputation: 258

What exactly shows in the place of the selector <app-task></app-task> that you added in app.component.html ?? What error in the console. This selector should work and be rendered to TaskComponent html view !!!!

Upvotes: 1

Related Questions