Angular подключить js файл

Обновлено: 07.07.2024

Я попытался добавить в свой typings.d.ts

а затем импортируйте библиотеку с помощью

когда я пытаюсь запустить свой код, который, я считаю, является другой библиотекой, которая просматривает встроенные в файл client/libquassel.js .

Как я могу использовать эту библиотеку?

Изменить: я отвечу на все вопросы здесь:

Моя настройка - это простой проект angular -cli. Никаких причудливых вещей, просто ng new proj1 , а затем npm install libquassel --save .
У моего index.html нет ничего, что ng new не размещалось там.
Я попытался импортировать библиотеку с import * as Quassel from 'libquassel' и var Quassel = require('quassel') (и их перестановками) без ведома (ошибки варьируются от unknown function 'require' до can't find module lib|quassel ).

Шаги по воспроизведению моего проекта:

Затем добавьте QuasselService в массив providers в app.module.ts . Это было бы хорошей демонстрацией моей проблемы, а именно, как импортировать libquassel в мой QuasselService .

ОТВЕТЫ

Ответ 1

Есть очень веская причина, почему это не работает в вашем коде: потому что я солгал вам. Итак, вот мой настоящий чит на случай, если вы еще не "разобрались" в нем.

Мне все еще нужно require libquassel 2 раза, но первый раз выполняется не вызовом require , который бесполезен, но добавив его в angular-cli.json в раздел scripts :

Это важно, потому что "client/libquassel.js" объявляет свой собственный require , но явно не экспортирует его, если вы делаете

libquassel custom require остается застрявшим внутри анонимного пространства имен, и вы не можете получить к нему доступ. Добавив его в раздел scripts , с другой стороны, пусть libquassel.js загрязняет глобальное пространство имен (т.е. window ) своим require и тем самым заставляет его работать.

Итак, действительные шаги для его работы:

Добавьте клиент /libquassel.js в скрипты section из angular-cli.json
Используйте дополнительный require для фактического загрузки модуля Quassel

Вот моя попытка. Похоже, вам нужно require "quassel" 2 раза: первый раз загрузить JS из "../node_modules/libquassel/client/libquassel.js" и второй раз, чтобы разрешить переопределенное require от этого JS фактически разрешает "quassel". Вот трюк, который, похоже, работает для меня в 'main.ts':

Обратите внимание, что после этой настройки мое приложение по-прежнему не удалось выполнить ошибку времени выполнения в некоторых AJAX, потому что для просмотра libquassel.js , похоже, требуется прокси-сервер, настроенный на стороне сервера, по адресу URL, например /api/vm/net/connect , и это, вероятно, то, что на стороне сервера net-browsify должен делать, но я не пытался его настроить.

Ответ на комментарии

Похоже, вы используете старую версию Angular -CLI, и если вы обновляете все, то все должно работать нормально.

Вот что ng --version говорит мне на моей оригинальной машине

Когда я попытался скопировать исходный проект на другой компьютер, у меня также появилась ошибка компиляции require , но когда я обновил Angular -CLI до

он скомпилирован и работает одинаково. Я только что выполнил инструкцию

Пакет "angular -cli" устарел и переименован в "@ angular/cli".

Чтобы избежать проблем, выполните следующие действия:
" npm uninstall --save-dev Angular -cli"
" npm install --save-dev @angular/cli @latest"

а затем обновить angular-cli.json в соответствии с инструкциями ng serve

Ответ 2

Работает как шарм:

Глядя на папку libquassel в node_module, понял, что в корневом каталоге нет index.js .

Если нет index.js , вы не можете сделать это:

Просто потому, что node не знает, что вам нужно, поэтому вам нужно указать точный путь, который в этом случае не так уж плох.

Кроме того, обратите внимание, что лучше перемещать declare var require; в файл с образцами, расположенный под папкой src, потому что вам может потребоваться его снова объявить, поэтому лучше быть там.

ИЗМЕНИТЬ: Вот что я нашел после попытки создать экземпляр Quassel, как рев:

И вот мой консольный журнал:

Но, сказав это, я понял, что внутри libquassel.js есть проблема, как ниже:

в строке 10, они делают это:

И, глядя на их package.json, нет такой вещи, как net и есть net-browserify-alt ;

Итак, если они меняют этот импорт на:

Все будет работать.

Сказав это, очевидно, что вы не хотите редактировать свой node_module, но я действительно удивлен тем, как это работает даже за пределами angular и webpack, потому что ясно, что они упомянули неправильный узел_модуль, который, если вы google, есть только один пакет с именем net , который у меня был, и он пуст и фиктивный.

Что именно нужно сделать:

1- запустить ng eject

который будет генерировать webpack.conf.js внутри вашего корневого каталога.

2- внутри найдите свойство resolve и добавьте:

поэтому ваше решение, вероятно, будет выглядеть следующим образом:

3- импортировать и использовать его:

Взглянув на конфигурацию webpack, похоже, что webpack любит переопределить пару модулей:

Я точно не знаю, почему, но этот список находится в конфигурации webpack и, кажется, делает net undefiend (empty) и поэтому нам нужно создать псевдоним.

Ответ 3

Angular -cli использует webpack

вам нужно будет добавить JS файл в приложения [0].scripts в ваш файл angular -cli.json, который затем упаковывается, как если бы он был загружен тегом.

Если вы это сделаете, вы можете получить его, добавив declare var Quassel :any; в свой src/typings.d.ts или компонент.

Ответ 4

Ключевой проблемой является браузерная библиотека libquassel содержит внутри нее глобальную функцию require . Это противоречит стандартной функции require .

Существует много способов решения этой проблемы, но одно решение - скопировать /libquassel/client/libquassel.js (и мини-версию) в каталог /src/app/ .

Затем запустите поиск и замените в этих файлах, чтобы изменить ВСЕ вхождения от require до _quasselRequire_

Вы сделаете это как для libquassel.js , так и libquassel.min.js .

Чтобы использовать это, вы сделаете что-то вроде этого в quassel.service.ts :

Это само по себе приводит к ошибке:

Но, как я понимаю, это довольно нормально, если у меня нет Express и т.д.

Для начала работы установите на свой компьютер node.js не ниже 8 версии.

Далее установите глобально в системе @angular/cli :

@angular/cli - это интерфейс командной строки для работы с Angular, его использование значительно облегчает процесс разработки. Например, одной командой можно сгенерировать полностью сконфигурированное работающее приложение или создать новую сущность (модуль, сервис, компонент и т. д.) в существующем приложении. Более подробно здесь.

Конечно, можно сделать все самостоятельно, но это гораздо сложнее и ни к чему, когда имеется готовый инструмент. Поэтому здесь и далее будет использоваться интерфейс командной строки, на этом этапе установка Angular может считаться завершенной.

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

Запуск команды ng new создает базовое приложение в папке my-app .

e2e - директория с интеграционными тестами;
node_modules - установленные npm-модули;
src - исходные файлы;
angular.json - описание конфигурации;
package.json - метаинформация и список необходимых npm-модулей;
README.md - описание ПО;
tsconfig.json - общая конфигурация typescript;
tslint.json - настройка tslint.

app - модули, компоненты, сервисы, директивы и т. д.;
assets - статический контент (изображения, аудио);
environments - конфигурации для каждой среды запуска;
favicon.ico - иконка, отображаемая в верхней части вкладки браузера;
index.html ;
karma.conf.js - конфигурация protractor (для e2e-тестов);
main.ts - необходим для запуска в режиме разработки, использует JIT-компиляцию;
polyfills.ts - список модулей, подключаемых для поддержки кроссбраузерности;
styles.css - описание действующих глобально стилей;
test.ts - отвечает за поиск и загрузку тестов при их запуске;
tsconfig.app.json - настройка typescript;
tsconfig.spec.json - настройка typescript при запуске unit-тестов.

angular.json¶

Следующий шаг после установки Angular и изучения структуры "скелета" приложения - настройка. angular.json - главный конфигурационный файл так называемого Angular Workspace (директория my-app), сгенерированного с использованием @angular/cli и объединяющего в себе множество проектов (само приложение и созданные библиотеки для него).

version - версия Angular Workspace;
newProjectRoot - указывает, где будут располагаться внутренние приложения и библиотеки, по умолчанию projects;
projects - описание конфигураций для каждого из элементов Angular Workspace. По умолчанию вместе с основным генерируется проект с интеграционными тестами. Опции:
root - определяет директорию с файлами, включая конфигурационные, всего проекта;
sourceRoot - определяет директорию с исходными файлами;
projectType - тип проекта, может быть только application или library ;
prefix - префикс, который будет использоваться при именовании компонентов и директив;
schematics - позволяет задавать отличную от по умолчанию конфигурацию сущностей Angular, например, можно для всех создаваемых компонентов переопределить работу механизма Change Detection;
architect - используется для настройки запуска или сборки.
defaultProject - имя проекта, который будет использоваться при использовании команд Angular CLI (по умолчанию основной).

Рассмотрим подробно в angular.json параметр build свойства architect . Здесь нас интересуют options и configurations .

В options указываются следующие опции:

outputPath - путь, где будет находиться "собранный" проект (подробно о сборке здесь);
index - путь к index.html ;
main - путь к main.ts ;
polyfills - путь к polyfills.ts ;
tsConfig - путь к tsconfig.app.json ;
assets - массив с указанием путей к статическому контенту, могут быть папки или отдельные файлы;
styles - массив с указанием путей к стилям, причем стили распространяются на все приложение;
scripts - массив с указанием путей к javascript-файлам, обычно здесь подключаются сторонние библиотеки, не являющиеся модулями Angular, например, jQuery.

Всегда подключайте сторонние скрипты и стили не в index.html , а в angular.json .

В configurations указываются настройки, связанные со средой окружения (environment, далее СО) работы приложения.

Каждое свойство объекта configurations - название СО с объектом настроек среды в качестве значения.

СО указывается при запуске (сборке) в качестве параметра --configuration (краткая запись -c ).

В объекте настроек СО множество параметров, назначение большинства которых понятно из их названия. Остановимся на fileReplacements .

В директории environments по умолчанию находятся два файла: environment.ts и environment.prod.ts . В них указываются параметры, зависящие от СО, например, адрес сервера, с которого будут запрашиваться данные. По умолчанию используется environment.ts .

Объект, используемый в качестве значения fileReplacements , позволяет переопределить источник для указанной СО.

Можете открыть angular.json и найти соответствующий код.

Директория app¶

Теперь разберем подробно содержимое src/app .

Минимально каждое приложение должно состоять из одного корневого модуля, содержащего обособленные функциональные части - компоненты. Также корневой модуль может обращаться к компонентам других модулей.

Архитектура детально описана в следующей главе.

Объявление корневого модуля находится в src/app/app.module.ts .

Здесь импортируются все модули и компоненты приложения.

Декоратор @NgModule() создает корневой модуль, которому передается объект конфигурации со свойствами:

imports - используемые второстепенные модули Angular;
declarations - все компоненты приложения;
bootstrap - основной компонент, отвечающий за загрузку.

Название может быть любым, но общепринято использовать AppModule .

Основной компонент приложения - AppComponent .

За объявление компонента отвечает декоратор @Component() из @angular/core . Принимаемый объект:

selector - название компонента;
template ( templateUrl ) - HTML-разметка в виде строки (путь к HTML-файлу);
styles - массив путей к CSS-файлам, содержащим стили для создаваемого компонента.

Это не все свойства декоратора @Component() , полное описание здесь.

Хорошей практикой считается вынесение HTML-разметки в отдельные файлы.

Чтобы убедиться в работоспособности происходящего, из папки my-app необходимо выполнить:

Во время разработки проектов мы полюбили AngularJs. Но также мы встретили некоторые трудности в борьбе за чистоту модульности, с которой AngularJs справляется хорошо, но все же порой ему чего-то не хватает. RequireJs оказывается полезным там, где AngularJs оставляет желать лучшего, но использование их вместе — не совсем тривиальная задача.

Итак, опишем наш взгляд на решение проблемы.

Для чего?

Работая с AngularJs вы обязательно задумаетесь о правильной организации кода. Конечно уже существуют отличные примеры решения проблемы. Например можно изучить теоретический пост Брайана Форда или практическое руководство Клиффа Мейерса. Я же поделюсь способом организации кода в приложениях AngularJs с использованием RequireJs.

Данный подход будет полезен, если вы хотите:

перестать беспокоиться о подключении скриптов в правильном порядке;
загружать javascript код асинхронно;
иметь возможность скомпилировать код в один минифицированный JS-файл;

Для кого?

Предполагается, что вы уже знаете основы AngularJs, а так же по крайней мере знакомы с подходом AMD и библиотекой RequireJs. Чтобы проиллюстрировать подход, я сначала подключу RequireJs для Angular Seed и опишу вносимые изменения. Angular Seed структурирует код, разделяя файлы по назначению. Таким же образом поступлю и я.

Angular Seed Project

Давайте познакомимся со структурой кода в Angular Seed. Взгляните на код примера на github:

app.js файл используется для инициализации загрузки и конфигурирования приложения.
сами файлы приложения — контроллеры (controllers), директивы (directives), фильтры (filters), сервисы (services).
index.html с подключенными JS-файлами в нужном порядке.
или index-async.html , который использует angular-loader.js или сторонние загрузчики, для загрузки зависимостей асинхронно.

Добавляем RequireJs

Взгляните на пример в браузере или на github.

Установка зависимостей

Для этого я использовал bower. Код bower.json :

Положите файл .bowerrc рядом с bower.json и запустите bower install . Теперь все необходимые зависимости находятся в директории libs .

Разрушение будет хорошим началом! Откройте index.html и удалите все теги . Выглядит чище, не так ли? Теперь подключите один скрипт перед закрывающим тегом , который будет загружать библиотеку RequireJs, и поручит ей искать конфигурацию в файле js/main.js , указанном в атрибуте data-main тега

Это все что нам необходимо. Закройте файл index.html , поскольку он нам больше не потребуется.

Приступим к конфигуации RequireJS.

Что только что произошло?

В блоке paths мы устанавливаем псевдонимы используемых библиотек и плагинов. Далее указываем что AngularJs должен быть виден в глобальной области видимости (для этого используется блок shim). Так же указыавем, что для запуска приложения должен быть загружен bootstrap.js .

bootstrap.js

Сейчас нам нужно настроить AngularJs, именно для этого используется файл bootstrap.js (обратите внимание, что вам больше не нужно использовать ng-app в HTML коде приложения). Первым делом нам потребуется routes.js , который содержит конфигурацию маршрутов приложения, поэтому добавим его в список зависимостей.

Заметьте, что в этом модуле мы почти не имеем дело с асинхронной загрузкой, и цепочка подключения скриптов всегда будет
angular->app->routes так как они зависят от друг друга: AngularJs необходим до создания модуля приложения (app) который уже должен существовать при конфигурировании маршрутов (routes).

Мы используем модуль domReady , чтобы пред запуском приложения убедиться, что DOM загружен. Также обратите внимание, что для запуска необходимо загрузить зависимость app.js , которая является основой приложения.

app.js содержит определение модуля верхнего уровня и загружает зависимости его подмодулей.

Мы условились использовать четыре основных модуля: контроллеры (controllers), директивы (directives), фильтры (filters), сервисы (services). Указываем, что эти модули должны быть загружены до определения основного модуля.

Конфигурация маршрутов (routes) осуществляется в этом файле. Кроме того возможно указывать маршруты для каждого модуля в отдельности (этот случай выходит за рамки данной статьи).

Модули состоят из трех частей:

объявление модуля
компонент
загрузчик

Объявление модуля controllers/module.js

Этот файл будет использоваться компонентами модуля для назначения самих себя (см. следующую часть)

Загрузчик модуля controllers/index.js

Это просто пустой блок define, который включает в себя все компоненты модуля. Здесь не нужно упоминать файл module.js так как он будет запрошен самими компонентами (в данном случае контроллерами). Загрузчик подключается как зависимость верхнего уровня модуля приложения. Благодаря ему RequireJs знает какие файлы загружать.

Компонент модуля controllers/my-ctrl-1.js

В случае с модулем контроллера app.controllers компонентами будут отдельные контроллеры приложения. Пример определения контроллера:

Обратите внимание, что мы использовали ссылку на ./module.js для того чтобы получить модуль и присоединить компонент к модулю.

Вот и все. Теперь мы имеем рабочее AngularJs приложение основанное на RequireJs. Вы можете наслаждаться разработкой не обращая внимания на порядок подключения ваших скриптов, а также этот подход позволит вам с легкостью минифицировать и объединить все файлы приложения в один.

и в соответствующем файле шаблона добавьте

Но это не работает, drawGauge не может быть найден.

Какие правильные шаги для импорта внешнего js файла в angular2?
так как я использую webpack, можно ли это сделать в webpack? Я ссылаюсь на question, решение для webpack, которое не работает для меня в результате .ensure , не может быть разрешено.

В идеале вам нужно иметь .d.ts файл для типирования, чтобы Linting работал.

Но похоже, что d3gauge не имеет одного, вы можете попросить разработчиков предоставить и надеяться, что они будут слушать.

В качестве альтернативы вы можете решить эту проблему, выполнив это

Если вы используете его в нескольких файлах, вы можете создать файл d3gauage.d.ts с содержимым ниже

и ссылайтесь на него в файле boot.ts (bootstrap) вверху, например

После того, как вы потратили много времени на поиск своего решения, я нашел один. Для вашего удобства я использовал полный код, который вы можете заменить весь свой файл.

Это общий ответ. Скажем, вы хотите импортировать файл с именем testjs.js в свой компонент angular 2. Создайте testjs.js в папке с вашими ресурсами:

активы > testjs.js

включить testjs.js в ваш index.html

index.html

Вместо того чтобы включить расширение файла js в index.html , вы можете включить его в файл .angular-cli-json .

Вот шаги, которые я выполнил, чтобы заставить это работать:

Сначала включите ваш внешний файл js в assets/js
В .angular-cli.json - добавьте путь к файлу под скриптами: [../app/assets/js/test.js]
В компоненте, где вы хотите использовать функции из файла js .

Вверху укажите, куда вы хотите импортировать файлы, как

После этого вы можете получить доступ к его функциям, как, например, Test.add()

Следующий подход работал в Angular 5 CLI.

Для простоты я использовал похожую демонстрацию d3gauge.js, созданную и предоставленную oliverbinns - которую вы легко найдете на Github.

Итак, во-первых, я просто создал новую папку с именем externalJS на том же уровне, что и папка активов. Затем я скопировал 2 следующих файла .js.

Затем я удостоверился, что обе основные директивы объявлены в основном index.html.

Вот простой способ, которым я сделал это в своем проекте.

Допустим, вам нужно использовать clipboard.min.js а в качестве примера давайте скажем, что внутри clipboard.min.js есть функция, которая называется test2() .

Для использования функции test2() вам необходимо:

сделайте ссылку на файл .js внутри вас index.html.
импортируйте clipboard.min.js в ваш компонент.
объявите переменную, которая будет использовать вас для вызова функции.

Вот только соответствующие части из моего проекта (см. комментарии):

index.html:

Вы также можете попробовать это:

и просто new drawGauge(this.opt); в вашем тс-коде. Это решение работает в проекте с angular-cli, встроенным в laravel, над которым я сейчас работаю. В моем случае я пытаюсь импортировать библиотеку poliglot (кстати, очень хорошо для переводов) из node_modules:

Это решение хорошо, потому что мне не нужно копировать файлы из node_modules :).

Вы также можете посмотреть в этом СПИСОК способов, как включить libs в angular.

1) Сначала вставьте путь к файлу JS в файл index.html:

2) Импортируйте файл JS и объявите переменную в component.ts:

объявить var RunPlayer: любой;

ПРИМЕЧАНИЕ. Имя переменной должно совпадать с именем функции в файле js.

Я создаю приложение Angular, используя Angular 4 и CLI. Я пытаюсь добавить виджет поиска SkyScanner в один из моих компонентов.

Часть реализации требует добавления нового внешнего script:

Я не уверен в правильности ссылки на этот файл. Если я добавлю script в мой файл index.html, виджет не загружается, если не выполняется полное обновление страницы. Я предполагаю, что script пытается манипулировать DOM при загрузке, а элементы не существуют, когда выполняется script.

Каков правильный способ загрузки script только при загрузке компонента, содержащего виджет Skyscanner?

Попробуйте загрузить внешний JavaScript при загрузке компонента, как показано ниже:

У меня была та же проблема, но в моем случае я импортировал 10 библиотек в конце файла HTML, и у этих библиотек было много методов, слушателей, событий и т.д., И в моем случае мне не нужно было вызовите метод специально.

Пример о том, что у меня было:

Как уже упоминалось, это не сработало. Затем я нахожу то, что мне помогло: ответ Милад

В ngOnInit() используйте метод для добавления библиотек, например:

Это функционирует для меня. Я использую Angular 6, надеюсь, это поможет.

Я сделал этот фрагмент кода

А потом назови это так

РЕДАКТИРОВАТЬ: С новым рендерер Api это может быть написано так

добавьте loader.js в папку с вашими активами, а затем в angular-cli.json

затем добавьте это в свой typings.d.ts

и вы сможете использовать его

Вы можете создать свою собственную директиву для загрузки script, как показано ниже

И вы можете использовать его в любом месте вашего шаблона компонентов ниже

Например, чтобы динамически загружать JQuery в ваш компонент, вставьте ниже код в свой шаблон компонента

Вы можете сделать одну вещь

если у вас есть angular -cli.json

то вы можете объявить script

И затем объявите skyscanner в своем компоненте

Надеюсь, что эта помощь вам поможет.

Примечание: это специально для внешних ссылок js! Шаг 1. Рекомендуем добавить свой угловой скрипт в файл index.html внизу вашего тела! Я пробовал все другие способы, но не смог.

а затем внутри вашего класса вызовите метод, который вам нужен. Например

и это должно запустить ваш код! Другой способ, который может работать в более старой версии. Я не проверял!

Если вы не получаете мой код, попробуйте эту ссылку тоже.

Надеюсь это поможет!

Тогда в моем компоненте я мог бы сделать что-то вроде:

Испытано в Angular 6/7

Читайте также: