Cause the production build to fail while maintaining successful builds in development mode

I am in the process of developing an Angular application and have a question regarding ensuring the build fails in production but not during local development.

Specifically, I have a complex login logic that I would like to bypass while working on it. To achieve this, I simply need to add a single line in app.component.ts:

ngOnInit(): { 
  this.userservice.mockLoginUser(); 
  ... 
}

Is there a way to ensure this line runs during development mode but causes a failure if overlooked in the production build? For example, is there a command that only triggers an error with ng build --prod (but not with ng serve)?

I do not wish to use environment.ts as I want to avoid cluttering the codebase; I aim to physically delete it along with the mockLoginUser method since it's only required occasionally. Another thought was creating a tslint rule to prevent it from reaching production, although I haven't found any suitable options yet.

angulartypescript

Answer №1

Reasons for avoiding unit tests?

Within a project I am currently involved in, there is a micro-frontend application that poses challenges with authentication when running independently (outside of a container).

As a workaround, I often manually include a never-ending JWT token in the ngOnInit function:

ngOnInit() {
    this.authService.setJwt('ey....');
}

To ensure I do not overlook this temporary code snippet, I have implemented a straightforward unit test:

it('should not set the JWT on component initialization', () => {
    const authService = TestBed.inject(AuthService);
    spyOn(authService, 'setJwt');

    fixture.detectChanges();

    expect(authService.setJwt).not.toHaveBeenCalled();
});

This practice helps me avoid leaving unnecessary code in my projects and ensures a clean codebase. Additionally, since our gitlab pipeline automatically runs tests, I cannot even push code with these development lines included.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My code is ready, but unfortunately, it is not retrieving the data as expected from my JSON file

I'm encountering an issue with my code where it's not fetching data from my JSON file. I keep getting 0 arguments and I'm unsure of what I'm doing wrong. Can someone provide assistance? This project is built using Angular. I have my ...

jsonangularfetch

Having trouble with the service connection in Stackblitz?

Objective: I am trying to establish a connection with the Data service in StackBlitz. Issue: Unfortunately, my attempts are not successful. Can anyone pinpoint what I am overlooking? Project Link: https://stackblitz.com/edit/angular-mpy6pr Many th ...

angulartypescriptstackblitz

The front end is displaying an empty object, although it is showing up when logged in the console using ngFor

I'm currently enrolled in a tutorial course and I've hit a roadblock at this stage. I want to display the properties of the Product on both the console.log and the web page. Strangely, the console.log is showing the product correctly, but the fro ...

node.jsangulartypescriptmongodbmongoose

Integrate a formcontrol within a specialized directive

I am looking to develop a directive that can alter a host element when a form control is invalid. Here's an example in code: <div [appFormControlValidate]="email"> <!-- email is the form control I want to use --> <input type="email" ...

angularangular2-formsangular-reactive-forms

Validator using asynchronous methods in Angular 2

Currently, I am in the process of incorporating asynchronous custom validation into my project. Below is the structure of my validation class: export class CustomValidators{ _auth_service; constructor(auth_service:AuthService){ this._auth_service = au ...

typescriptangular

Access the API URL from a JSON file stored locally within the app.module file

I'm currently working on an Angular project that will be deployed in various addresses, each with a different API link. Instead of manually changing and configuring the apiUrl provider in app.module for every address, I want to store these links local ...

angularangular8

What is the best way to declare an array for use within a computed property?

Looking for a method to create a ref that can hold an array in my Vue 3 app built using composition API and typescript. The array will be utilized in a computed property where objects will be pushed. However, I encountered an issue when trying to push obj ...

typescriptvue.js

Is the calling of Angular template functions triggered each time the user interface is updated?

I created this demonstration and I want to verify my understanding of the dynamics involved. In this demo, whenever a checkbox is selected, it triggers a merge of observable checkbox events. This trigger leads to the update of an array containing instanc ...

javascriptangulartypescriptrxjsangular-material

Exploring Recursive Types in TypeScript

I'm looking to define a type that can hold either a string or an object containing a string or another object... To achieve this, I came up with the following type definition: type TranslationObject = { [key: string]: string | TranslationObject }; H ...

javascripttypescriptreduce

Preventing nested prototype methods from being transferred between objects in a WebWorker

My challenge is to reserialize an object from a WebWorker while maintaining the same definitions. However, upon receiving the message, all of the prototype functions are lost. The current solution I have only works for first level prototype functions, bu ...

javascripttypescriptweb-worker

Setting the initial navigation theme based on route parameters from an external source, not within the StackNavigator

Is there a way to set the initial navigation theme based on the current route params without rendering the NavigationContainer and causing a flash of content with the default theme? Can the route be accessed from outside of the NavigationContainer without ...

typescriptreact-nativereact-native-navigation

Managing HTTP Responses in Angular 2 Component

I am relatively new to Angular 2 and facing some challenges in understanding certain concepts. My current roadblock lies in the interaction between my login service and login component. Essentially, I have set up a login service that sends a request from t ...

httpangular

Tips for resolving the 'No Spec Found' issue with TypeScript

Encountering a 'No Specfound error' while attempting to run test cases. Utilized the existing protractor methods wrapped in custom helper methods with async await. Tried relocating the spec file and experimenting with different naming convention ...

angulartypescriptjasmineprotractore2e-testing

What could be causing the issue with my React Native app's release version not opening on a physical Android device?

I encountered an issue while trying to install the Release version of my application. In order to test both the debug and release versions on my physical and virtual devices, I utilized the following commands: ./gradlew assembleDebug, ./gradlew assembleRel ...

androidtypescriptreact-nativerelease

Simple ways to simulate Axios requests in tests

My implementation includes the use of axios with a custom HttpClient class export default class HttpClient { constructor(baseUrl: string) { const axiosInstance = axios.create({ validateStatus(status: number) { return status === 200 || s ...

typescriptaxiosjestjsts-jest

How to minimize scaffolding with Redux, React, and Typescript?

Is there a way to avoid the process of instrumenting my Redux-Aware components? The level of scaffolding required seems excessive. Take, for instance, the minimal code necessary to define a redux-aware component: class _MyActualComponent extends React.Co ...

reactjstypescriptredux

What steps can I take to ensure TypeScript compiler approves of variance in calling generic handlers, such as those used in expressJS middleware?

disclaimer: I am a bit uncertain about variance in general... Here is the scenario I am facing: // index.ts import express from 'express'; import {Request, Response} from 'express'; const app = express(); app.use(handler); interface ...

typescriptexpresscovariancecontravariance

Improve the presentation of Array<T> as T[]

I am currently working on a project using React TypeScript, and I have been utilizing Prettier to help me format the code. Within my TS files, I have several interfaces that utilize Array<T>, but I would like to reformat it to T[]. Is there a way fo ...

typescripteslintprettier

Creating synchronous behavior using promises in Javascript

Currently, I am working with Ionic2/Typescript and facing an issue regarding synchronization of two Promises. I need both Promises to complete before proceeding further in a synchronous manner. To achieve this, I have placed the calls to these functions in ...

javascriptsqlitetypescript

Troubles with Type Inference in Typescript Conditional Types

Explore the Unique Playground Given a specific type: export declare type CustomFilter<T> = { [P in keyof T]?: (P extends keyof T ? T[P] : any); }; Encountering an issue when defining the filter as follows: update.$setOnInsert.createdAt = new Date ...

typescripttypescript-typingstypescript-generics