DEV Community

codexknight7
codexknight7

Posted on

First Angular app problem

Hello all.
I am a complete novice to Angular and just started to learn.
So, I begun with First Angular app.
Lesson 1 went well. I could display Hello World.
After that, at lesson 2, there is a big problem.
I am following exactly the steps as they are, but my application does not compile.
It says:

Error: src/app/app.module.ts:9:5 - error NG6008: Component AppComponent is standalone, and cannot be declared in an NgModule. Did you mean to import it instead?

Here is my app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

Here is home.components.ts

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

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule,],
  template: `
    <p>
      home works!
    </p>
  `,
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
}
Enter fullscreen mode Exit fullscreen mode

And here app.components.ts

import { Component } from '@angular/core';
import { HomeComponent } from './home/home.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  imports: [HomeComponent,],
})
export class AppComponent {
  title = 'homes';
}
Enter fullscreen mode Exit fullscreen mode

I tried to download the code provided in tutorial, but it does not work, seems like it is from the Old version of Angular.

Is it me who made mistake somewhere, or is it the tutorial?

PS: I have the latest versions of Angular and Node.js installed.
I work with VS COde.

Thank you

Top comments (1)

Collapse
 
specialbackend profile image
Backend Specialist

I faced the same error *yesterday * and solved it by deleting the declarations set of components.

I just removed declaration in the @NgModule

declaration : [
...
]