[Solved] app-routing.module.ts and app.module.ts files are missing in Ionic project – Angular

The Problem:

Upon creating an Ionic project using the ‘ionic start’ command with the Angular framework and a blank project, it was discovered that the ‘app-routing.module.ts’ and ‘app.module.ts’ files were missing from the project. Previously, these files were present in Ionic projects, but their absence in the latest project raises concerns about changes in the Ionic framework and how to retrieve these missing files.

The Solutions:

Solution 1: Standalone Component Paradigm

After the release of Angular 14, Ionic supports using Angular 14+. With Angular 14+, Angular introduced the concept of standalone components. Standalone components specify their dependencies directly instead of getting them from **NgModule**. This eliminates the need for `app-routing.module.ts` and `app.module.ts` files in Ionic projects.

In the new paradigm, you can mark Angular classes as standalone using standalone: true. Standalone classes do not need to be declared in an NgModule, and the Angular compiler will report an error if you try.

To migrate your existing projects to use this new standalone component paradigm, you can use the Angular migration tool, which automates the transition for old projects.

Solution 2: Angular Standalone Component Routing

In Ionic 5.5 and above, a new approach called "Standalone Component Routing" has been introduced. This eliminates the need for app-routing.module.ts and app.module.ts files. Instead, each component’s routing is now declared within the component itself using the @Component decorator’s standalone: true option.

This new approach aims to simplify routing configurations and reduce the boilerplate code associated with traditional Angular modules.

Solution 3: Using Angular CLI

If both `app-routing.module.ts` and `app.module.ts` files are missing, use the Angular CLI to create them. Run the following command:

ng new testAng --no-standalone --routing --ssr=false

This command will create a new Angular project with the necessary files, including app-routing.module.ts and app.module.ts.

Solution 4: Import modules directly into components

In the latest version of Ionic, `app-routing.module.ts` and `app.module.ts` are no longer automatically generated when creating a new project. Instead, modules should be imported directly into their respective components.

To do this, add the standalone option and set it to true in the component decorator. Then, you can import the required modules into the component.

For example:

@Component({
  selector: 'example',
  templateUrl: './example.component.html',
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [MatIconModule, FormsModule]
})

Video Explanation: