CODEWITHSUNDEEP
angular
seasan619
seasan619

Reputation: 13

Angular Issues Connecting Components to app.component.html

I have made a couple components but i cant get them to work and ng serve gives me errors

  1. If 'app-test' is an Angular component, then verify that it is included in the '@Component.imports' of this component.

  2. If 'app-test' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. [plugin angular-compiler]

    src/app/app/app.component.html:19:6: 19 │ ╵ ~~~~~~~~~~

Error occurs in the template of component AppComponent.

src/app/app/app.component.ts:5:15:
  5 │   templateUrl: './app.component.html',
    ╵                ~~~~~~~~~~~~~~~~~~~~~~

what am i doing wrong here? not even chatGPT can help me. here are some of my files for reference

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { CountryInfoComponent } from '../country-info/country-info.component';
import { MapComponent } from '../map/map.component';
import { ApiService } from './api.service';
import { TestComponent } from '../test/test.component';

@NgModule({
  declarations: [AppComponent, CountryInfoComponent, MapComponent, TestComponent,],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', component: AppComponent },
      { path: 'country-info', component: CountryInfoComponent },
    ]),
  ],
  providers: [ApiService], 
  bootstrap: [AppComponent], 
})
export class AppModule {}

app.component.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Interactive SVG</title>
    <style></style>
  </head>
  <body>
    <div class="content" role="main">
      <div class="text-column">
        <ul>
          <li>Country Name:</li>
          <li>Country Capital:</li>
          <li>Country Region:</li>
          <li>Income Level:</li>
        </ul>
      </div>
      <app-test></app-test>

      <div class="svg-column">
        <div class="svg-container">
          <app-map></app-map>
        </div>
      
      </div>
    </div>
  </body>
</html>

test.component.html

<p>test works!</p>

test.component.ts

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

@Component({
  selector: 'app-test',
  standalone: true,
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css'] 
})
export class TestComponent {

}

please let me know what im doing wrong. very new to angular.
my imports are correct as well but if youre wondering the path i have ill post them below my-app/src/app/test test folder my-app/src/app/app/app.component.html

Upvotes: 0

Views: 758

Answers (2)

Jineapple
Jineapple

Reputation: 685

Your test component is standalone. This is a new way of declaring components in Angular 14+. It means the component is not tied to any module. As such, you need to remove it from the declarations array.

Instead, you can import it anywhere you want to use it (e.g. in app.component.ts), with the imports array.

Alternatively, you could remove the standalone: true from your test component and use the old way of tying components to modules.

For reference: https://angular.io/guide/standalone-components

Upvotes: 0

Rahul Timbaliya
Rahul Timbaliya

Reputation: 36

Suggest You to create one another component and define in the { path: '', component: AnyOtherComponent }

AppComponent is the bootstrap component that why you didn't use as the path component
like this 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { CountryInfoComponent } from '../country-info/country-info.component';
import { MapComponent } from '../map/map.component';
import { ApiService } from './api.service';
import { TestComponent } from '../test/test.component';

@NgModule({
  declarations: [AppComponent, CountryInfoComponent, MapComponent, TestComponent,],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', component: AnyOtherComponent },
      { path: 'country-info', component: CountryInfoComponent },
    ]),
  ],
  providers: [ApiService], 
  bootstrap: [AppComponent], 
})
export class AppModule {}

Upvotes: 0

Related Questions