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

Struggling to transfer array data from service to component

I am currently working on passing an array from service.ts to a component. My goal is to display the array elements in a dialog box. However, I encountered a Typescript error TypeError: Cannot read property 'departmentArr' of undefined. I am str ...

angulartypescriptangular-material

Issues with Jquery Autocomplete feature when using an Input Box fetched through Ajax requests

When a user selects an option from the drop-down list, an input box is dynamically added to the page using AJAX. document.getElementById("input_box").innerHTML ="<input id='ProjectName'/>"; However, there seems to be an issue with jQuery ...

javascriptphpjqueryajax

The longevity of JQuery features

As I work on setting up an on-click callback for an HTML element to make another node visible, I encountered a surprising realization. The following two statements appeared to be equivalent at first glance: $("#title").click($("#content").toggle); $("#tit ...

javascriptjquery

A beginner's guide to crafting a knex query with MySQL language

Within MySQL Workbench, I currently have the following code: USE my_db; SELECT transactions.created_at, price FROM transactions JOIN transactions_items ON transactions.id = transactions_items.transaction_id JOIN store_items ...

javascriptmysqlknex.js

The information from AngularJS is not appearing in the table

I am currently developing a web application that utilizes AngularJS for SQL connectivity. While working on my project, I encountered an issue where the data for the "Regional Partner Manager" user is not displaying properly in my table, whereas the data f ...

javascriptangularjshtml-tableasmx

I am encountering difficulties importing the React-hexgrid library

Although I have verified that the library path is correct, I am still encountering an error. Here is the code snippet: "react-hexgrid": "2.0.1", "react": "18.2.0" "next": "13.4.3" Click here to v ...

javascriptreactjsnext.jsreact-hooksimport

Steps for compiling SCSS to CSS using Angular-CLI and moving it to the assets directory

I am currently working on an Angular 5 project with an assets folder where I store my common CSS file and reference it in index.html. I now plan to create a new folder called "sasstyles" and place some .scss files there. When I compile or run the project ...

cssangularjsangularsass

An unexpected problem with text redirection that should not be happening

I am facing an issue with my HTML text field and post button on my website. Whenever I click the post button to make a post, it redirects to a separate PHP file called post.php which handles PHP and MySQL code for posting. However, I want to avoid this red ...

javascriptphphtml

What is the best way to eliminate a specific value within a flatmap?

This is the flatMap: const choices = names.flatMap( (item) => item.name + " - " + item.size + "- " + item.category ); console.log(choices): https://i.stack.imgur.com/MO4b1.png If the item.category is equal to S-XL, how can ...

javascriptreactjs

What is the process of generating enum values using ES6 in Node.js?

Can JavaScript support enumerations with assigned integer values, similar to how other programming languages handle it? In C#, for instance, I can define an enum as follows: enum WeekDays { Monday = 0, Tuesday =1, Wednesday = 2, Thursday ...

javascriptnode.js

Employing the power of JavaScript to enable the seamless toggle of an overlay

I have a div named "navbar_menu". On clicking this div, I want the visibility of the div named "nav_overlay" to fade in. Upon another click, I want it to fade back and become invisible again. Currently, I have set the div 'nav_overlay" to have ' ...

javascriptjqueryhtmlcss

Implementing a Vue.js Scrollable Table

I am currently working on a table that is populated using the vue.js v-for method: <table> <tr><th>Name</th><th>Surname</th></tr> <tr v-for="user in users"><td>@{{user.name}}</td><td>@{ ...

javascriptjqueryhtmlcssvue.js

A schema already exists with the key or ID "http://json-schema.org/draft-06/schema"

While attempting to include the Material library in my Angular project using npm install --save @angular/material @angular/cdk, I encountered some issues as described in this question: Error TS2315: Type 'ElementRef' is not generic material angul ...

angularangular-cli

Incorporating <span> elements into a comma-separated list using Jquery on every other item

When I receive a comma-separated list of items from a database and insert them into a table cell, I want to apply alternating styles to make it easier for users to distinguish between them. For example: foo, bar, mon, key, base, ball I'm looking to ...

javascriptjquerycss

What is the best way to conceal an element solely in live production environments?

Is there a way in my Angular code to specifically target the PROD environment? <div *ngIf="environment !== 'prod'" class="col-6"> <button class="btn btn-primary text-white add-photo" (cli ...

javascriptangular

Passing parameters to an external function in order to display a message is proving difficult. An error of type TypeError is being encountered, specifying that the Class constructor AlertMessage cannot be called without using the

Every time I attempt to pass a message as an argument to the showAlert() function, an error is triggered: Error: An instance of the AlertMessage class cannot be created without using 'new' image: I am simply trying to send the message as a para ...

javascriptreactjsnext.js

Setting up TypeScript to function with Webpack's resolve.modules

Imagine having a webpack configuration that looks like this: resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'], modules: ['my_modules', 'node_modules'], }, You have a ...

typescriptwebpackmodulenode-modules

Discover how to initiate an ajax request from a tailored module when the page is loaded in ActiveCollab

When trying to initiate an AJAX call on the project brief page by adding a JavaScript file, I encountered some issues. My goal is to display additional information along with the existing project brief. I included a JavaScript file in a custom module and f ...

javascriptajaxloadactivecollab

What is the process for creating accurate types for my package?

Currently, I am in the process of creating an npm package to be used by other developers within my company. While most aspects are functioning smoothly, I am facing challenges with getting the declarations right. I have experimented with various methods f ...

typescriptrollupjsnpm-package.d.ts

Tips for uploading a file using Axios in a form

When uploading a file to a Flask server, I can access files from the flask request global by using raw HTML with the following code: <form id="uploadForm" action='upload_file' role="form" method="post" enctype=multipart/form-data> < ...

javascriptajaxfile-uploadaxios