CODEWITHSUNDEEP
javascriptangularcomponents
Leichtos
Leichtos

Reputation: 1

Angular-AppComponent error. How solve it?

I have a problem with my Angular project. In my app.module.ts the code is below:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BmiModule } from './bmi/bmi.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BmiModule
  ],
  providers: [],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

My app.component.ts is below:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent {
  title = 'WP4_HF_004';
}

My app.component.html:

<h1>BMI kalkulátor</h1>
<p>Ez egy BMI kalkulátor. A lenti 4 gomb segítségével lehet módosítani a súly- és magasságparamétereket.
    <app-bmi-calculator></app-bmi-calculator>
</p>

I got an error in app.module.ts:

Component AppComponent is standalone, and cannot be declared in an NgModule. Did you mean to import it instead?

If I didn't import my AppComponent in app.module.ts I get an error in app.component.html:

'app-bmi-calculator' is not a known element:

  1. If 'app-bmi-calculator' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
  2. If 'app-bmi-calculator' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.ngtsc(-998001) app.component.ts(4, 5):

Error occurs in the template of component AppComponent.

I searched the problem on the internet but I didn't find the solve.

Upvotes: 0

Views: 1016

Answers (2)

mbirali
mbirali

Reputation: 66

In fact you can use just the standalone components with no modules, but you can try this:

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { BmiModule } from './bmi/bmi.module';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [BmiModule,],
  template: `
    <h1>BMI kalkulátor</h1>
    <p>Ez egy BMI kalkulátor. A lenti 4 gomb segítségével lehet módosítani a súly- és magasságparamétereket.
    <app-bmi-calculator></app-bmi-calculator>
</p>
  `,
})

export class AppComponent {
  title = 'WP4_HF_004';
}

I have no idea what's in the BmiModule, i hope it will not cause any issue.

Edit: you can try just to delete this line standalone: true, since you imported in the declaration array.

Upvotes: -1

Pawel Twardziak
Pawel Twardziak

Reputation: 804

Standalone app component must be bootstrapped in a different way.

Check this out :) https://angular.io/guide/standalone-components

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig).catch((err) =>
  console.error(err)
);

app/app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(appRoutes) /* ... other providers */],
};

app/app.routes

import { Route } from '@angular/router';

export const appRoutes: Route[] = [/* route declarations */];

Upvotes: -1

Related Questions