Question 213305 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Run additional build scripts as part of angular build

I have an angular application that loads an iframe and the iframe is a basic html page (iframe.html) and a vanilla javascript file (iframe.js). I have put these 2 files in the assets folder so that they simply get copied to the dist folder when the application is built. And on the index.html I am imorting it as

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

All this works fine but now I want to convert the iframe.js file to typescript.

Now coming to building the iframe files and the application, I can have a separate tsconfig.json for it and run tsc iframe.ts && ng build.

But now assume someone new to the project just runs ng build, then the iframe wont get built.

Is there any way to modify the ng build script so that it also runs tsc iframe.ts taking into account its own tsconfig.json file?

Tags:

2

Answers


  1. 0

    You can’t modify in pacakge.json what ng build does, however, you can add a prebuild option to run before each npm task. These suffixes can be added to any NPM script and will run automatically when you run the main script. e.g.:

    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"
  }

    Albeit yes, that’s no longer shorthand CLI command ng build.

    Login or Signup to reply.
  2. 0

    Yes, We can achieve this by modifying the Angular build process to include the TypeScript compilation for our iframe.ts file along with the main application build.

    To do this, we can use the Angular workspace configuration file (angular.json) and leverage the "builder" property to customize the build process.

    Create a new tsconfig file for the iframe:
    In the root of our Angular project, create a new tsconfig.iframe.json file with the TypeScript configuration for our iframe.ts.

    tsconfig.iframe.json:

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

    Update angular.json to include the iframe build:
    Open the angular.json file and locate the projects.architect.build.options section.
    In this section, we’ll find the build options for our main Angular application.
    Add a new configuration to include the iframe TypeScript compilation.

    Example angular.json:

    {
  "projects": {
    "our-angular-app": {
      "architect": {
        "build": {
          "options": {
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
           
          },
          "configurations": {
            "iframe": { // Add a new configuration for the iframe build
              "tsConfig": "tsconfig.iframe.json",
              "assets": [
                
              ]
            }
          }
        }
      }
    }
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search