I have an Angular Problem with Modules and components

Question

I'm learning Angular databinding concept and started trying out using StackBlitz.

This is my my folder structure

Here is my,

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { BindingModule } from './binding/binding.module';

bootstrapApplication(BindingModule);

binding.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { BindingComponent } from './binding.component';

@NgModule({
  imports: [CommonModule, BrowserModule],
  declarations: [BindingComponent],
  bootstrap: [BindingComponent],
})
export class BindingModule {}

binding.component.ts

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

@Component({
  selector: 'app-binding',
  templateUrl: './binding.component.html',
  styleUrls: ['./binding.component.css']
})
export class BindingComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

And I have an HTML <p> to be printed which is binding works!

But I end up with the the following error:

Error: NG0906: The BindingModule is not an Angular component, make sure it has the @Component decorator.

Please help!

Answer 1

You are mixing the old way (modules) and new way (standalone components), in standalone components there is no need to declare a module, we can remove the binding module and declare binding component with standalone and add the imports there like so.

Standalone docs

binding.component.ts

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

@Component({
  selector: 'app-binding',
  imports: [CommonModule], // <- browser module is not needed!
  templateUrl: './binding.component.html',
  styleUrls: ['./binding.component.css'],
  standalone: true,
})
export class BindingComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Then finally we can intialize the component like so

import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { BindingComponent } from './binding.component';

bootstrapApplication(BindingComponent);

stackblitz