Angular

The Devmy CLI provides a set of predefined configurations that will allow you to start developing right away.

Get Started

To create a new Angular application, use the following Devmy CLI command:

devmy generate application angular

Variables

You can configure the initial application with the following parameters:

Application name: The name of the application
Prefix: The prefix to apply to generated selectors for the project.
Port: Port to listen on.

Advantages

Environment

Environment management no longer requires the use of constants like Environment and is now handled externally via .env.vault. To switch environments, you just need to toggle using dotenv. Environment variables can be accessed in the application through import.meta.env. For example:

const appName = import.meta.env.APP_NAME;

Environment variables are filtered at build time using a prefix. If the application is named FRONTEND and you want to define the variable APP_NAME, it must be declared in the .env file as FRONTEND_APP_NAME. All variables without the prefix will be ignored.

⚠️ WARNING: Do not reference environment variables directly. This makes your functionality untestable. For example, if a function directly accesses an environment variable, a unit test might fail since the .env file may not be available in CI/CD environments, causing compilation errors.

The correct approach depends on the context:

For functions that are not called by services or components and are not involved in tests (including child components of the tested component or functions imported in test files), such as those invoked exclusively in the main, direct access to environment variables can be acceptable. For components or services requiring isolated tests, environment variables must be accessed indirectly, for example, using an InjectionToken or a provider.

Example implementation using createInjectionToken:

export const [injectAppName, provideAppName] = createInjectionToken(
  () => import.meta.env.FRONTEND_APP_NAME,
);
 
class MyService {
  appName = injectAppName();
}

In this case, using a factory within createInjectionToken prevents accidental access to import.meta.env.FRONTEND_APP_NAME. If it were implemented as follows:

export const [injectAppName, provideAppName] = createInjectionToken(import.meta.env.FRONTEND_APP_NAME);

and imported into a component under test, a runtime error would occur. Without a valid .env file, FRONTEND_APP_NAME would be undefined, leading to unexpected issues.

In some cases, it is possible to mock the environment directly using:

jest.mock('import.meta.env', () => ({
FRONTEND_APP_NAME: 'TestApp',
}));

However, it is always preferable to use alternative solutions whenever possible.

Ngrx

The Angular application created with the Devmy CLI comes with NgRx (opens in a new tab) preinstalled and configured, including the Store, DevTools, and Effects. NgRx is a state management library inspired by Redux, which simplifies state management in complex Angular applications.

Lodash

The Angular application includes lodash-es (opens in a new tab) as a preinstalled dependency, a JavaScript utility library. Lodash-ES is a modular version of Lodash, designed to be used with ECMAScript (ES) modules.

I18n

The Angular application created with the Devmy CLI comes with preconfigured support for internationalization (i18n) using ngx-translate (opens in a new tab) and the @larscom/ngx-translate-module-loader (opens in a new tab) plugin. This advanced setup allows for flexible and highly configurable translation management, organizing translation files into folders and using separate namespaces to avoid conflicts between translation keys.

With this configuration, translation files should be organized into folders by module or feature. For example, the folder structure could be:

/assets
  /i18n
    /common
      /en.json
      /it.json
    /feature1
      /en.json
      /it.json
    /en.json
    /it.json

Test

The Angular application created with the Devmy CLI is preconfigured to use Jest as the unit testing framework, replacing Karma and Jasmine. Jest is a modern and versatile testing library that offers superior performance, simpler setup, and advanced features like snapshot testing.

Why Jest?

Using Jest provides numerous advantages over Karma and Jasmine:

Speed: Jest is known for its speed and reliability, thanks to its ability to run tests in parallel and built-in support for watch mode.
Simplicity: Jest offers straightforward and immediate setup, with zero configuration required for many common functionalities.
Snapshot Testing: Jest supports snapshot testing, allowing for easy and precise verification of component output.
Broad Compatibility: Jest is compatible with TypeScript and offers specific presets for Angular support.

Ngxtension

The Angular application created with the Devmy CLI includes support for NgxTension, a versatile library that provides a set of advanced extensions and modules to enhance Angular application development. NgxTension offers ready-to-use solutions for common needs such as authorization management, advanced form configuration, and more, significantly simplifying the creation of complex applications.

Sentry

Also included is a preconfigured setup for Sentry (opens in a new tab), a tool for error monitoring and management. Sentry helps detect, diagnose, and resolve issues in applications in real-time, thereby improving code quality and user experience.

The Sentry configuration has been integrated into the project and uses the following environment variables:

[ApplicationName]_SENTRY_DNS
[ApplicationName]_SENTRY_TRACE_SAMPLE_RATE
[ApplicationName]_SENTRY_REPLAY_SAMPLE_RATE
[ApplicationName]_SENTRY_REPLAY_ON_ERROR_SAMPLE_RATE
[ApplicationName]_SENTRY_TRACE_PROPAGATION_TARGETS
[ApplicationName]_BASE_API_URL
[ApplicationName]_FORCE_UPDATE_INFORMATION_PARAM

Once you've created the Angular application with the Devmy CLI, it's essential to properly configure the environment variables to integrate Sentry and monitor errors and performance.

Router

A configuration for routing has also been included in the app.config.ts file by adding withComponentInputBinding() and withViewTransitions() as providers to the router.

Retrieving Information from the Router

Through the withComponentInputBinding() provider, you can retrieve information directly from the router parameters and pass them as inputs into components.

// app.routes.ts
{ path: 'heroes/:id', component: HeroDetail },
 
 
// hero-detail.component
@Input()
set id(heroId: string) {
  this.hero$ = this.service.getHero(heroId);
}

Transition Animations between Pages

To further enhance the user experience, the withViewTransitions() provider has been added, introducing transition animations between pages during navigation. This makes interaction with the application smoother and visually appealing.

This provider enables view transitions in the Router by executing the route activation and deactivation inside of document.startViewTransition.

Addons

TailwindCSS

Both during the creation phase of the Angular application and afterwards, it will be possible to add TailwindCSS.

The addon will take care of installing the necessary dependencies and initializing the library so that it is ready to use immediately.

Vercel

Both during the creation phase of the Angular application and afterwards, it will be possible to add Vercel deploy configuration.

The addon will take care of installing the necessary dependencies and initializing the CDCI so that it is ready to use immediately.

Vercel Cypress