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

Question

У меня есть несколько файлов JavaScript, которые мне нужно включить в свое приложение, но они не являются угловым кодом. Скрипты добавляют функциональность для пользовательских модалов, аккордеоноподобных элементов и т. Д. При первоначальном написании JavaScript-кода я использовал Webpack и babel-preset-env.

Я скопировал все файлы в папку assets моего приложения Angular и попытался добавить ее в массив scripts в .angular-cli.json:

...
"scripts": [
    ...
    "assets/scripts/javascript/main.js"
]
...

и непосредственно с тегом script в index.html.

Однако ни один из этих методов не работает. Скрипт загружен, но есть ошибки. Например, если вы попробуете import {something} from 'file';, возникнет ошибка Unexpected Token. Или даже если я попытаюсь const something = require('file');, будет ошибка ReferenceError: require is not defined.

Что мне нужно сделать, чтобы включить эти сценарии в приложение?

Answer 1

Вы получаете ошибки «Неожиданный токен» и «Требуется не определено», потому что вы используете

a) Синтаксис модуля ES6 (import ...) или

b) Синтаксис модуля CommonJS (require())

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

Вы можете включить все внешние .js скрипты, которые вам нужны, в свой проект, включив их все в виде отдельных файлов в массив scripts, просто убедитесь, что они добавлены в правильном порядке. Это то же самое, что включить их в теги <script> в index.html.

Проверьте эту ссылку: https://github.com/angular/angular-cli/wiki/stories-global-scripts