Angular - building apps without modules

#webdev #javascript #programming #beginners

Building Angular applications without modules is not recommended as modules play an important role in organizing and structuring the code in an Angular app. Modules provide a way to encapsulate related components, services, pipes, and directives into a cohesive unit that can be easily reused and imported into other parts of the application.

However, it is possible to build small, standalone Angular applications without modules, by using the Angular CLI to create a new project with a minimal setup and writing all the components, services, and other functionality directly in the app component. This approach is useful for small projects or for understanding the basics of Angular before moving on to more complex applications.

Here's an example of how you could build a standalone Angular application without modules:

Create a new Angular project using the Angular CLI:
Use the ng new command to create a new Angular project with a minimal setup.

ng new my-standalone-app

Remove the unnecessary modules:
Navigate to the app.module.ts file and remove the unnecessary imports, including the CommonModule and the FormsModule.

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

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

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

Write the components and services directly in the app component:
Write the components, services, pipes, and other functionality directly in the app.component.ts file. You can use the component decorator to define the component and its template.

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

@Component({
  selector: 'app-root',
  template: `
    <h1>Hello, Angular!</h1>
  `
})
export class AppComponent { }

Run the application:
Use the ng serve command to run the application and see the results in a browser.

ng serve

This is a basic example of how to build a standalone Angular application without modules. However, as your application grows in size and complexity, it's important to structure your code using modules for better organization and maintainability. Additionally, modules make it easier to reuse code and manage dependencies in your application.