Использование внешнего js-файла в угловом компоненте 6 - PullRequest
Новая
       21

Использование внешнего js-файла в угловом компоненте 6

0 голосов
/ 12 октября 2018

Я пытаюсь использовать файл js в моем приложении angular 6.Шаги, которые я выполнил, следующие:

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()
    }

Но при использовании углового компонента в консоли выводится предупреждение: 

Uncaught ReferenceError: testmodule is not defined

Iпопробовал другой вариант, например, импортировать js-файл в файл .ts как:

  1. import * as mymodule '../../testfile.js'
  2. "allowJs": true, но это также не идентифицирует testmodule или testfile.

Что я здесь не так делаю?

Ответы [ 3 ]

0 голосов
/ 12 октября 2018

Дайте ссылку на ваши скрипты в файле angular-cli.json. 

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

, затем добавьте в typings.d.ts 

declare var testModule : any;

Импортируйте его туда, где вы хотите использоватьэто 

import * as myModule from 'testModule';
0 голосов
/ 19 марта 2019

Вы можете импортировать ваш внешний JS в 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",
              "import "../../../assets/js/counter"
            ]

Если вы хотите импортировать JS-файл для определенного html-компонента, тогда вы можете import ваш файл js в вашем yourComponent.ts

Just Like: 

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

Вы можете увидеть здесь, у меня естьимпортировано counter.js на определенной странице HTML.

В этой строке " .. / .. / .. / assets / js / counter " counter - это имя файла js.Вам не нужно добавлять .js после имени файла.

Пожалуйста, убедитесь, что вы правильно указали свой путь .. / .. / ..

Вы можете хранить все внешние файлы js в папке assets / js .И затем вы можете импортировать ваш конкретный файл js в конкретный component.ts.

Это отлично работает для меня в angular 6.

0 голосов
/ 12 октября 2018

Я сделал демо: 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

...