javascript - 在 Angular 9 生产构建期间，全局脚本中的外部打字稿文件未绑定到 scripts.js

Question

带有angular-devkit/build-angular@0.803.29的Angular 8可以将外部 typescript 文件编译为 js并在ng build. 并且可以从全局范围访问 scripts.js 的功能。

例如 ，我在src/assets/js目录中有一个名为custom.ts的打字稿文件。

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

还有一个位于src/assets/js目录中的custom.js文件，用于防止在编译错误时出现不可用的编译器消息

/*
 * 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
 */

从main.ts调用该hello()函数

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

和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包含以下构建配置

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

在同时运行ng build和之后ng build --prod，这个custom.ts文件被编译为custom.js javascript 文件并将其捆绑到scripts.js中，并且可以从全局上下文中访问该函数。

但问题是- 在使用angular-devkit/build-angular@0.901.12升级到Angular 9后，外部 typescript 脚本文件无法编译为 javascript 并捆绑到scripts.js中。我使用了上述相同的构建配置，但是在编译和构建之后，scripts.js文件为空。

我是否遗漏了 Angular 9 中的某些内容或 Angular 9 不再支持此功能？请帮忙。提前致谢。

标签： javascriptangulartypescript

Answer 1

它适用于我的 es6 格式的 custom.js

我假设您需要将外部js文件导入到这里，否则如果需要导入ts文件您可以直接导入

src/assets/js 目录中的custom.js。

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

和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