Angular Custom Configuration

As you know, main.ts file is the starting point of Angular application. So it doesn’t mean you can’t change it.

You can modify the configuration by changing angular.json according to your requirements.

I have modifying the starting point of my angular application like the following way.

I have created 3 files. 1. start.ts 2. start.module.ts 3. home.component.ts

Instead of using main.ts, i will use start.ts like the following way

start.ts

import './polyfills';

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { environment } from './environments/environment';
import { StartModule } from './app/start.module';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(StartModule)
  .then((ref) => {
    // Ensure Angular destroys itself on hot reloads.
    if (window['ngRef']) {
      window['ngRef'].destroy();
    }
    window['ngRef'] = ref;

    // Otherwise, log the boot error
  })
  .catch((err) => console.error(err));

i am passing StartModule inside bootstrapModule.

start.module.ts

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

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

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HomeComponent],
  bootstrap: [HomeComponent],
})
export class StartModule {}

In start module, i am taking HomeComponent as a starting component instead of AppComponent.

Now change the index.html

<home>loading</home>

Now change in angular.json. The angular.json file at the root level of an Angular workspace provides workspace-wide and project-specific configuration defaults. These are used for build and development tools provided by the Angular CLI.

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/start.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.css", "src/custom.css"],
            "scripts": []
          },

If you have any custom theme css, can pass through styles property like “styles”: [“src/styles.css”, “src/custom.css”]

Reference url : https://angular.io/guide/build