Create Project with App Module in Angular 17

When you try to create the Angular 17 application, you notice that the app.module.ts file is missing. Angular 17 introduces a significant change with Standalone configuration as the default in projects. But if you still want to work with the old folder structure then follow this article to the end.

Prerequisites

• Angular Basics
• Node and NPM installed

What is standalone mode?

The ability to operate an Angular application independently without requiring a server-side environment or backend services is referred to as the "standalone mode" in Angular. When Angular apps are being developed, tested, or executed in contexts where server-side rendering is not necessary, this mode is frequently utilized.

Features of Standalone Mode

• Client-Side Rendering: The user's web browser renders pages and components in a stand-alone Angular application on the client side. Angular handles rendering the user interface (UI) in response to user input and maintaining the state of the application.
• Serving Static Files: Typically, standalone Angular applications are published to a web server or content delivery network (CDN) as static files (HTML, CSS, and JavaScript). Dynamic page generation and server-side processing are not required.
• Development Server: An integrated development server that serves the Angular application locally for testing and debugging is provided by the Angular CLI during development. For a seamless development process, this server offers features like live reloading and dynamically compiles the Angular application.
• Integration of Backend Services: Standalone Angular applications don't need a backend server to render pages, but in order to retrieve and process data, they frequently need to talk to backend services or APIs. Usually, Angular's HttpClient module is used for HTTP requests during this connection.
• Flexibility in Deployment: Angular standalone applications can be set up on several hosting settings, such as CDNs, cloud platforms, or conventional web servers. Commands for creating production-ready, readily deployable application bundles are available in the Angular CLI.

Drawback of Standalone Mode

• Limited Functionality: Angular standalone apps are unable to carry out server-side tasks like database access and direct communication with other backend services. This restriction may limit the application's functionality and complexity.
• Security Concerns: If appropriate security measures are not put in place, standalone Angular applications, which run exclusively on the client side, may be vulnerable to security flaws like Cross-Site Scripting (XSS) attacks.
• SEO Challenges: Because search engine crawlers could have trouble indexing dynamic client-rendered content, search engine optimization (SEO) for standalone Angular applications can be tough. This may affect how easily search engines can find the program.
• Scalability: As an application grows, scalability may become a problem if server-side logic and data processing are not handled by a backend server. Performance problems might arise when a client-side solution is used to handle massive user and data volumes.
• Limited Offline capability: Due to their heavy reliance on client-server communication, standalone Angular applications may have limited offline capability. Users who anticipate that the program would function flawlessly even when they are offline or have spotty network connectivity may find this to be a disadvantage.
• Maintenance Challenges: Standalone Angular apps may be more difficult to manage and maintain in the absence of a backend server, particularly in terms of client-side data storage, caching, and synchronization.
• Dependency on Third-Party APIs: If some features, such as data retrieval, are dependent on third-party APIs for the standalone Angular application.

Benefits of Standalone Mode

• Single Page Application (SPA) Architecture: Angular is made specifically for creating SPAs, in which a single web page serves as the home page for the whole application. Due to the fact that only the necessary data is retrieved from the server during future interactions, this design offers a fluid and responsive user experience.
• Architecture that is both modular and component-based: Angular promotes modular development by using components. The program is simpler to scale and maintain since each component contains a portion of the user interface and its logic. Additionally, its modular architecture makes it easier for developers to collaborate and reuse code.
• Dependency Injection: Code modularity, reusability, and testability are encouraged by Angular's integrated dependency injection framework. It facilitates the loose coupling of components and services, which makes it simpler to change or replace specific application components without affecting the others.
• Support for TypeScript: TypeScript is a superset of JavaScript that enhances developer efficiency and code quality by adding features like static typing. TypeScript is used in the construction of Angular. Improved code navigation and refactoring capabilities, as well as a more robust development environment are all made possible by TypeScript.
• speed Optimization: Ahead-of-Time (AOT) compilation, lazy module loading, tree shaking, and integrated optimization tools like Angular Universal for server-side rendering are just a few of the built-in capabilities that Angular offers to optimize application speed. These functions contribute to faster load times, better runtime efficiency, and better user satisfaction all around.
• Cross-platform Development: Angular can be used by developers to create cross-platform mobile applications for iOS, Android, and the web, all from a single codebase, thanks to technologies like Ionic and NativeScript. This shortens the time and effort required for development by enabling code reuse across several platforms.

Create Project with app.module.ts file

The solution to the issue where the .module.ts file was not created when launching a new project with Angular 17 has been found. The standalone mode is now the default in projects starting with Angular version 17. Therefore, if you start a new project without specifying anything, it will not have any modules.

Use the following command to create an application based on modules:

ng new geeks17 --no-standalone

Folder Structure

Folder Structure with app.module.ts file

Dependencies

"dependencies": {
    "@angular/animations": "^17.2.0",
    "@angular/common": "^17.2.0",
    "@angular/compiler": "^17.2.0",
    "@angular/core": "^17.2.0",
    "@angular/forms": "^17.2.0",
    "@angular/platform-browser": "^17.2.0",
    "@angular/platform-browser-dynamic": "^17.2.0",
    "@angular/platform-server": "^17.2.0",
    "@angular/router": "^17.2.0",
    "@angular/ssr": "^17.2.0",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  }

Example

HTML

<!--app.component.html-->

<h1>hello geeks for geeks  {{title}}</h1>

JavaScript

//app.module.ts

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

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

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

JavaScript

//app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'geeks17';
}

Output

output