Client-side source code

The client-side source code is in the src/main/webapp folder, as we saw earlier. The structure is as follows:

The most noteworthy pieces of information are as follows:

app: This folder holds the Angular application's Typescript source code, which is organized with a folder per feature:
- app.main.ts: This is the main file for the Angular app. This bootstraps the Angular application. Notice that it uses platformBrowserDynamic, which lets the application work with Just-in-Time (JIT) compilation in the browser. This is ideal for development:

platformBrowserDynamic()
  .bootstrapModule(StoreAppModule, { preserveWhitespaces: 
    true })
  .then(success => console.log(`Application started`))
  .catch(err => console.error(err));

app.module.ts: This is the main module for the Angular app. It declares app-level components and imports other modules for the application. It also bootstraps the main application component:

@NgModule({
  imports: [
    BrowserModule,
    StoreSharedModule,
    StoreCoreModule,
    StoreHomeModule,
    // jhipster-needle-angular-add-module JHipster will 
    // add new module here
    StoreEntityModule,
    StoreAppRoutingModule
  ],
  declarations: [JhiMainComponent, ..., FooterComponent],
  bootstrap: [JhiMainComponent]
})
export class StoreAppModule {}

account: This module consists of account-related features such as activate, password, password-reset, register, and settings. Each typical component consists of component.html, component.ts, route.ts, and service.ts files.
admin: This module consists of admin-related features such as audits, configuration, docs, health, logs, metrics, tracker, and user-management. Each typical component consists of component.html, component.ts, route.ts, and service.ts files.
core: This module contains all core services (auth, tracker, user, login, language) and configures shared providers for the application.
blocks: This folder consists of HTTP interceptors and other configs that are used by the application.
entities: This is where entity modules will be created.
home: The home page module.
layouts: This folder has layout components such as the navbar, footer, error pages, and so on.
shared: This module contains all shared components (login, auth, alert), entity models required for the application, and utilities required for the application.
content: This folder contains static content such as images, CSS, and SASS files.
i18n: This is where i18n JSON files live. Each language has a folder with numerous JSON files organized by modules.
swagger-ui: This folder contains the Swagger UI client that's used in developing API documentation.
index.html: This is the web application's index file. This contains very minimal code for loading the Angular application's main component. It is a single-page Angular application. You will also find a simple loading page and some commented out utility code such as a Google analytics script and service worker scripts on this file. These can be enabled if required:

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
    ...
</head>
<body>
    ...
    <jhi-main>
      ...
    </jhi-main>
    <noscript>
        <h1>You must enable javascript to view this page.</h1>
    </noscript>
    ...
</body>
</html>

To enable PWA mode using service workers, just uncomment the corresponding code in src/main/webapp/index.html to register the service worker. JHipster uses Workbox (https://developers.google.com/web/tools/workbox/), which creates the respective service worker and dynamically generates service-worker.js.

Now that we have learned everything about the application code let's start the application.