问在角9生产生成过程中，全局脚本中的外部类型记录文件不绑定到scripts.js。
EN

Stack Overflow用户

提问于 2020-11-23 11:23:28

回答 1查看 586关注 0票数 0

带有angular-devkit/build-angular@0.803.29的 bundle 8可以将外部类型文件编译成js，并在ng build之后将它们绑定到scripts.js。并且可以从全局范围访问scripts.js的函数。

，例如，，我在src//js目录中有一个名为custom.ts的类型记录文件。

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

以及src/custom.js/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
 */

hello()函数从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

和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的问题是--在用升级到Range9之后，无法将外部类型记录脚本文件编译成javascript并绑定到scripts.js中。我使用了上面描述的相同的构建配置，但是在编译和构建之后，scripts.js文件是空的。

我是不是漏掉了角9或者角9不支持这个功能？请帮帮忙。提前谢谢。

javascript

angular

typescript

回答 1

Stack Overflow用户

发布于 2020-11-23 12:52:14

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

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

在src/custom.js/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