javascript - 如何在我的 Angular 5 (CLI) 项目中导入和使用纯 JavaScript 文件的功能

Question

我已经上下搜索并尝试了几个小时的各种解决方案，但似乎无法解决这个问题:我正在尝试使用普通的 JavaScript文件 Angular 5项目，使用 Angular CLI 创建。

我尝试过各种import方法，我已经尝试过"allowJs": true ，我试过exports和一堆其他的东西。但没有效果!

请帮助我:如何导入和使用 .js 的功能文件在我的 Angular 5 项目中吗？您能一步步列出要做什么吗？

请注意:这不是我可以通过 npm 或类似方式安装的软件包。它是一个外部库，无法通过 npm 获得。

更新:我已尝试声明我的 Xcelcious.Common.js文件在我的index.html正如人们通常所做的那样<script type="text/javascript" src="Xcelcious.Common.js"></script> ，我用过 import尝试使用该功能:

import { Xcelcious } from '../../Xcelcious.Common.js';

declare let Xcelcious: any;

但是在编译项目时出现以下错误: src/app/home/home.component.ts(4,27) 中的错误:错误 TS6143:模块 '../. ./Xcelcious.Common.js' 已解析为 'C:/Apps/CordovaApps/BoilerplateApp2/ngCordova/src/Xcelcious.Common.js'，但未设置 '--allowJs'。

我在 tsconfig.jason 中设置了 "allowJs": true，但在编译时出现此错误: 错误 TS5055 中的错误:无法写入文件 'C:/Apps/CordovaApps/BoilerplateApp2/ngCordova/src/Xcelcious.Common.js'，因为它会覆盖输入文件。 添加 tsconfig.json 文件将有助于组织包含 TypeScript 和 JavaScript 文件的项目。

这就是我的 tsconfig.json 的样子:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "allowJs":true,
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

这是我的 Xcelcious.Common.js 的示例文件:

Xcelcious = {
  ApiURL: "http://localhost:100/api",
  IsMobile: false,
  SimulateMobile: true,
  Camera: {
    PhotoFromLibrary: function (success, fail) {
      if (Xcelcious.IsMobile || Xcelcious.SimulateMobile) {
        navigator.camera.getPicture(success, fail, {
          quality: 100,
          destinationType: Camera.DestinationType.DATA_URL,
          //targetWidth: 1024,
          //targetHeight: 768,
          correctOrientation: true,
          allowEdit: false,
          sourceType: Camera.PictureSourceType.PHOTOLIBRARY
        });
      } else {
        //TODO: Add camera for browser
      }
    },
    PhotoFromCamera: function (success, fail) {
      if (Xcelcious.IsMobile || Xcelcious.SimulateMobile) {
        navigator.camera.getPicture(success, fail, {
          quality: 100,
          destinationType: Camera.DestinationType.DATA_URL,
          //targetWidth: 1024,
          //targetHeight: 768,
          correctOrientation: true,
          allowEdit: false,
          sourceType: Camera.PictureSourceType.CAMERA
        });
      } else {
        //TODO: Add camera for browser
      }
    }
 }

感谢您的帮助!

Answer 1

我不确定你使用的是 webpack 还是 systemjs。

确保您将 .js 文件链接注入(inject)到主 index.html 页面中，就像您通常将 js 文件库添加到 index.html 页面中一样。

要使用 js 文件中的函数，请执行以下操作，我将使用 jQuery 作为示例。

要使用 jQuery 中的 $，您需要添加

import { ... } from '...';

declare let $: any;

@Component({ ... })
export class MyClass { ... }

顶部的 declare let $: any; 允许您在该组件内使用 $。这也将避免任何 tslint 错误。

可以与其他库一起使用，例如 momentjs 等。

编辑:

所以您正在使用 Webpack。

在 index.html 中添加以下内容:

<script src="./path to js/Xcelcious.Common.js"></script>

在组件内部，您不需要 import { Xcelcious } from '../../Xcelcious.Common.js';。

执行 declare let Xcelcious: any; 应该允许您访问 Xcelcious 的方法，例如 Excelcious.IsMobile。