web-dev-qa-db-fra.com

Utilisation d'un fichier js externe dans le composant angular 6

J'essaie d'utiliser un fichier js dans mon angular 6. Les étapes que j'ai suivies sont les suivantes:

1. Créé testfile.js fichier:

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

2. Dans angular.cli.json. À des fins de test, tesfile.js se trouve au même emplacement que angular.cli.json est:

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

. Dans le fichier typings.d.ts, déclaré:

declare var testmodule: any;

4. Dans le fichier ts, j'ai essayé de l'utiliser comme:

 public ngOnInit() {
        testmodule.testMethod()
    }

Mais lorsque angular est utilisé, l'avertissement dans la console est:

Uncaught ReferenceError: testmodule is not defined

J'ai essayé une autre alternative, comme importer un fichier js dans un fichier .ts comme:

  1. import * as mymodule '../../testfile.js'
  2. "allowJs": true mais cela n'identifie pas non plus le module de test ou le fichier de test.

Quel mal fais-je ici?

javascriptangularimportangular6
4
shrekDeep

J'ai fait une démo: https://codesandbox.io/s/4jw6rk1j1x , comme ceci:

testfile.js

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

export { testmodule };

Et dans le 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));

Vous pouvez voir sur l'onglet console le texte 'bonjour'

Notez que j'ai apporté quelques modifications dans le testfile.js

3
Nguyen You

Donnez une référence à vos scripts dans le fichier angular-cli.json.

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

puis ajoutez dans typings.d.ts

declare var testModule : any;

Importez-le où vous voulez l'utiliser

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

Vous pouvez importer votre JS externe dans angular.json

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

Si vous souhaitez importer un fichier JS pour le composant html spécifique, vous pouvez importer votre fichier js dans votre yourComponent.ts

comme:

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

Vous pouvez voir ici que j'ai importé counter.js dans la page HTML spécifique.

Dans cette ligne "../../../ assets/js/counter" counter est un nom de fichier js. Vous n'avez pas besoin d'ajouter . Js après le nom du fichier.

Veuillez vous assurer de bien définir votre chemin ../../ ..

Vous pouvez stocker tous vos fichiers js externes dans le dossier assets/js. Et puis vous pouvez importer votre fichier js spécifique dans component.ts spécifique.

Cela fonctionne parfaitement pour moi dans angular 6.

1
Anoop Singh