web-dev-qa-db-ja.com

angular 6コンポーネントでの外部jsファイルの使用

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。 typings.d.tsファイルで、それを宣言しました：

declare var testmodule: any;

4。 tsファイルで、それを次のように使用しようとしました：

 public ngOnInit() {
        testmodule.testMethod()
    }

しかし、angularコンポーネントが使用されている場合、コンソールの警告は次のようになります。

Uncaught ReferenceError: testmodule is not defined

.tsファイル内のjsファイルを次のようにインポートするなど、別の方法を試しました。

  1. import * as mymodule '../../testfile.js'
  2. "allowJs": trueですが、これもtestmoduleまたはtestfileを識別していません。

ここで何が悪いのですか？

javascriptangularimportangular6
4
shrekDeep

私はデモを作成しました： 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に変更を加えたことに注意してください

3
Nguyen You

Angular-cli.jsonファイル内のスクリプトへの参照を提供します。

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

次にtypings.d.tsを追加します

declare var testModule : any;

使いたいところにインポート

import * as myModule from 'testModule';
1
Sarthak Aggarwal

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",
              "../../../assets/js/counter"
            ]

特定のhtmlコンポーネントのJSファイルをインポートする場合は、importyourComponent.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にインポートできます。

これは私にとってangular 6。

1
Anoop Singh