External typescript files in global scripts are not bundled to scripts.js during Angular 9 production build

Question

Angular 8 with angular-devkit/[email protected] can able to compile external typescript files to js and bundle them to scripts.js after ng build. And functions of the scripts.js can be accessed from the global scope.

e.g. I have a typescript file named custom.ts in src/assets/js directory.

function hello(): void {
  alert('Hello!!!');
}

And also a custom.js file in src/assets/js directory which is used to prevent unusable compiler message on compile error

/*
 * DO NOT DELETE!
 * This dummy file exists in order to prevent unusable compiler message on compile error.
 * When a compile error happened before back-to-top.ts is transpiled into javascript, webpack
 * complains that this file does not exist, instead of outputting the actual error
 */

The hello() function is called from main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';


if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

// hello() from scripts.js
hello(); // show hello in console.log

and tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": ["node"]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts",
    "src/test/**/*.*"
  ]
}

angular.json contains the following build configuration

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/trp",
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "src/tsconfig.app.json",
      "assets": [
        "src/favicon.png",
        "src/assets"
      ],
      "styles": [
        "src/styles.css"
      ],
      "scripts": [
        "src/assets/custom.js",
      ]
    },
    "configurations": {
      "production": {
        "fileReplacements": [{
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "aot": true,
        "extractLicenses": true,
        "vendorChunk": true,
        "buildOptimizer": true
      }
    }
  }

After running both ng build and ng build --prod, this custom.ts file is compiled to custom.js javascript file and bundled it into scripts.js and the function is accessible from the global context.

But the problem is - after upgrading to Angular 9 with angular-devkit/[email protected] external typescript script files cannot be compiled to javascript and bundled into scripts.js. I used the same build configuration described above but after compile and build, scripts.js file is empty.

Am I missing something in Angular 9 or Angular 9 doesn't support this feature anymore? Please help. Thanks in advance.

Lashan Fernando · Accepted Answer · 2020-11-23 20:52:14Z

0

It works for me custom.js in es6 format

I assumed you need to import external js file to here, other wise if need to import ts file you could import directly

custom.js in src/assets/js directory.

const hello = () => {
  alert('Hello!!!');
};

and main.ts

declare function hello(): void;

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';


if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

// hello() from scripts.js
hello(); // show hello in console.log

answered Nov 23, 2020 at 20:52

Lashan Fernando

1,2651 gold badge9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

External typescript files in global scripts are not bundled to scripts.js during Angular 9 production build

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related