Execute supplementary build scripts during the angular build process

I've developed an Angular application that loads an iframe containing a basic html page (iframe.html) and a Vanilla JavaScript file (iframe.js). To facilitate this, I've placed these 2 files in the assets folder so that they are automatically copied to the dist folder during the application build process. In my index.html file, I simply import them as:

<iframe src="assets/iframe.html"></iframe>

Everything works smoothly up to this point, but now I have a requirement to convert the iframe.js file to TypeScript.

When it comes to building the iframe files along with the application, I can create a separate tsconfig.json for it and execute 

tsc iframe.ts && ng build
.

However, if a new developer runs just ng build, the iframe will not be built. Is there a way to modify the ng build script so that it also includes running tsc iframe.ts while considering its own tsconfig.json file?

javascriptangulartypescript

Answer №1

It is not possible to directly change the behavior of ng build in the package.json file. However, you can include a prebuild option that will run before every npm task. These prefixes can be attached to any NPM script and will automatically execute when the main script is run. For example:

npm run build

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "prebuild": "tsc iframe.ts",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }

Although it does not directly equate to the shorthand CLI command ng build.

Answer №2

Achieving this task involves tweaking the Angular build process to encompass TypeScript compilation for our iframe.ts file alongside the primary application build.

To accomplish this, we can tap into the Angular workspace configuration file (angular.json) and exploit the "builder" property to tailor the build process.

First off, generate a new tsconfig file for the iframe: Initiate a fresh tsconfig.iframe.json file within the root of our Angular project, housing the TypeScript specifications for our iframe.ts.

tsconfig.iframe.json:

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "outDir": "src/assets",
    "declaration": true,
    "strict": true
  },
  "include": [
    "src/assets/iframe.ts"
  ]
}

Subsequently, tweak angular.json to integrate the iframe build: Unfold the angular.json file and locate the projects.architect.build.options segment. Within said segment, you'll encounter the build options pertaining to our primary Angular app. Infuse a new setup to amalgamate the iframe TypeScript compilation.

Illustrative entry in angular.json:

{
  "projects": {
    "our-angular-app": {
      "architect": {
        "build": {
          "options": {
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
           
          },
          "configurations": {
            "iframe": { // Incorporate a newly crafted configuration for the iframe build
              "tsConfig": "tsconfig.iframe.json",
              "assets": [
                
              ]
            }
          }
        }
      }
    }
  }
}

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

What is the process for implementing a grid with 5 columns on larger screens and 2 columns on smaller screens using reactjs?

I am currently working on building a Grid using material UI and reactJs. I found the guidelines on this link https://mui.com/system/react-grid/. However, there seems to be an issue with creating 5 columns in the grid. I attempted to create a custom grid ...

javascriptcssreactjsmaterial-ui

Create pathways for direct access

I've been studying some code written by someone else to improve my understanding. The way they are setting up routes seems a bit unclear to me. app.use('/dist', express.static(path.join(CURRENT_WORKING_DIR, 'dist'))) // mount rou ...

javascriptexpress

Tips for sending web form data straight to Google Sheets without the need for an authentication page

Exploring the Concept I have a unique idea to develop a landing page with a form that captures visitors' email addresses in a Google Sheet. After discovering a helpful post containing a Google App script for this purpose, I followed the guidelines o ...

javascriptjqueryajaxgoogle-apps-scriptcors

Trimming Picture on User's Device

Currently, I am utilizing the jQuery ImgAreaSelect 0.9.10 plugin to crop images that are uploaded by users. The data input format being used is "multipart/form-data". Upon cropping an image with the plugin, it provides me with coordinates in pixels. Howev ...

javascriptjqueryhtmlimage

Issue with Promise rejection not being caught in Node.js with ExpressNode.js and Express are not

Within my Express web application, I've created a function that outputs a Promise object. login: function(un, pass) { result = {}; var loginOk = new Promise( function (resolve, reject) { if (result.hasOwnPr ...

javascriptnode.jsexpresspromisees6-promise

the sizing issue with three div elements

I am attempting to create 3 parallel divs in HTML. The middle div should be exactly 960px wide and centered on the page, with the left and right divs positioned on either side. The minimum width of the page is set to 1024px. When the browser width exceed ...

javascriptjquerycsswidthoverflow

The creation of a fresh child instance in Typescript using rest parameters

My goal is to create a parent class that allows children to generate new instances of the same child type. When I specify the number of parameters, everything functions correctly: abstract class AClass { protected sameTypeWithSingle ( x: any ): t ...

typescript

What is the best practice for Angular: running production build before or after testing?

When developing a Java application for production, I typically set up the build process to create the production artifacts first and then run tests against those artifacts. Recently, I joined an Angular project and noticed that the build process is struct ...

angulartypescript

Unable to assign dynamic key to Vue 3 directive for object property

Currently, I am utilizing the maska npm package to mask input fields in Vuetify. Within my setup, I have an array of masks that I make use of: export const Masks = { hour: { mask: "##:##", eager: true }, host: { mask: "#00.#00.#00.# ...

typescriptvuejs3vuetify.js

transferring information from Facebook to a web address through ZAPIER

Looking for guidance on sending data from Zapier to FB lead fetch. Is there a direct way to do this or is an external PHP file necessary? I need to extract name and email and send it to my CRM that is not supported by Zapier, but can receive data through U ...

javascripturlsendzapier

Is the runTest.ts class in the vscode-test setup ever utilized in the project? Its purpose remains unclear even in the example project

Being a novice to Typescript, JavaScript, and VScode Extensions I have set up a vscode-test following the guidelines provided here: https://code.visualstudio.com/api/working-with-extensions/testing-extension#custom-setup-with-vscodetest Based on the hel ...

javascripttypescriptvisual-studio-codevscode-extensionsvscode-debugger

What is the best way to choose the final index value in a drop-down menu?

Is there a way to read and select the last index value in a drop-down using JavaScript? Here is an example of the HTML code: <select name="unqiue"> <option value="number:1" label="1">1</option> <option value="number:2" label="2" ...

javascriptdomdrop-down-menu

Is it possible to initiate a series of node tasks in a predetermined sequence?

I have developed a framework that currently requires 4 user inputs to install, which is quite cumbersome. I am looking for a way to streamline the process to just one input. Essentially, I am seeking a solution to execute those 4 commands with only one in ...

javascriptnode.jsnpm

What do you think of the unique JSON syntax found in the React-Redux-Firebase documentation? Valid or not?

The React-Redux-Firebase documentation showcases a sample code snippet. import { compose } from 'redux' import { connect } from 'react-redux' import { firebaseConnect, populate } from 'react-redux-firebase' const populates = ...

javascriptjsonreactjsreact-reduxreact-redux-firebase

What is the method for integrating fingerprint recognition into a web application using either Laravel or Django?

For a school project, I've been tasked with creating a web application that can fingerprint users or visitors. This means gathering details about their device such as OS, browser, IP address, country, city, and more. The app needs to be modern and re ...

javascriptphphtmldjangolaravel

How can one define a getter within an interface?

One of my classes is structured like this (only showing a portion here): export class LinkedListNode<t> extends windward.WrObject implements ILinkedListNode<t> { public get next(): LinkedListNode<t> { return this._next === thi ...

typescripttypescript1.5

How can one determine the completion of a chunked download request in Angular's HTTP client?

Currently, I am utilizing angular's HttpClient to retrieve an arraybuffer. The server is transmitting the data along with the following headers: *To avoid any confusion, the download route essentially retrieves a chunk file stored in the cloud. Howev ...

javascriptangularexpress

Implementing a function trigger upon selection in JavaScript

I'm currently studying JavaScript and working on a basic project that involves generating random strings of different lengths. If you're interested, feel free to check out my codepen code [here][1]. My question revolves around the functionality ...

javascripthtmlcss

When the user clicks on an organizational chart, a new organizational chart will appear in a modal popup

Currently, I am developing a project with Highcharts where I have a specific requirement to display a modal popup when a node on an org chart is clicked. The popup should also contain another org chart. Below is the code snippet I am working with: [link to ...

javascripthtmljqueryhighchartsorgchart

Using a string as the key in a setState call in React: A beginner's guide

One challenge I'm facing involves calling a state value in React through a string. For example, if the string is "greeting" and the state value is greeting: "hello world", I encounter difficulties. When trying to call this.state.greeting using the st ...

javascriptreactjs