Question

我试图在我的angular 6应用程序中使用js文件。我遵循的步骤如下：

1。已创建testfile.js文件：

var testa = function () {
   function testMethod() {
        console.log('hello');
    }
}
var testmodule = new testa();
module.exports = testmodule;

2。在angular.cli.json中。出于测试目的，tesfile.js与angular.cli.json位于同一位置：

 "scripts": [
              "testfile.js"
            ],

3。在types.d.ts文件中，将其声明为：

declare var testmodule: any;

4。在ts文件中，尝试将其用作：

 public ngOnInit() {
        testmodule.testMethod()
    }

但是当使用角度分量时，控制台中的警告为：

Uncaught ReferenceError: testmodule is not defined

我尝试了另一种选择，例如将.ts文件中的js文件导入为：

import * as mymodule '../../testfile.js'
"allowJs": true 但这也不能识别testmodule或testfile。

我在这里做什么错？

Answer 1

我做了一个演示：https://codesandbox.io/s/4jw6rk1j1x，就像这样：

testfile.js

function testa() {}
testa.prototype.testMethod = function testMethod() {
  console.log("hello");
};
var testmodule = new testa();

export { testmodule };

在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";

import { testmodule } from "./testfile";

testmodule.testMethod();

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

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

您可以在控制台标签上看到“你好”文字

请注意，我在testfile.js

中进行了一些更改

Answer 2

在angular-cli.json文件中提供对脚本的引用。

"scripts": [
    "../path_of_script" 
 ];

然后添加types.d.ts

declare var testModule : any;

将其导入您要使用的位置

import * as myModule from 'testModule';

Answer 3

您可以在 angular.json

中导入外部JS

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "import "../../../assets/js/counter"
            ]

如果您要导入特定html组件的JS文件，则可以导入您的 yourComponent.ts

中的js文件。

就像：

import { Component, OnInit } from '@angular/core';
import "../../../assets/js/counter";

您可以在这里看到我已经在特定的HTML页面中导入了 counter.js 。

此行中的“ ../../../ assets / js / counter ” counter 是一个js文件名。您无需在文件名后添加 .js 。

请确保您仔细设置路径 ../../ ..

您可以将所有外部js文件存储在 assets / js 文件夹中。然后，您可以将特定的js文件导入特定的component.ts中。

这对我来说在角度6上是完美的。

在angular 6组件中使用外部js文件

3 个答案: