DEV Community

Cover image for Angular - building apps without modules
Ilyoskhuja
Ilyoskhuja

Posted on

3

Angular - building apps without modules

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

Enter fullscreen mode Exit fullscreen mode

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 { }

Enter fullscreen mode Exit fullscreen mode

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 { }

Enter fullscreen mode Exit fullscreen mode

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

ng serve

Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (1)

Collapse
 
naucode profile image
Al - Naucode •

Hey, that was a nice read, you got my follow, keep writing 😉

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video