Как использовать внешние JS файлы в Angular 6

Я начал проект с Angular, но я никогда не думал, что установка самой последней версии может вызвать у меня пару проблем. Я также использую Materialize, поэтому, когда я пытаюсь "импортировать" свой файл Javascript, он не работает. Я не знаю, почему, я искал ответ с прошлой пятницы, но ничего не нашел.

Я изменил файл angular.json и ссылался на свое местоположение JS в нем, но этого недостаточно.

PD Я не должен использовать CDN для материализации JS.

Ответ 1

Проекты CLI с угловым 6- angular.json использованием используют angular.json вместо .angular-cli.json для сборки и конфигурации проекта. Это означает, что вы используете Angular 6.
Начиная с версии v6, местоположение файла изменилось на angular.json. Поскольку больше нет ведущей точки, файл больше не скрывается по умолчанию и находится на одном уровне. что также означает, что пути файла в angular.json не должны содержать ведущие точки и слэш, т.е. вы должны предоставить абсолютный путь

Установите MaterializeCSS и угловую2-материализуйте из npm

 npm install materialize-css --save 
 npm install angular2-materialize --save 
 npm install [email protected]^2.2.4 --save
 npm install hammerjs --save

После установки всех необходимых зависимостей добавьте их в стили и скрипты массива angular.json

"styles": [

      "src/styles.css",
      "node_modules/materialize-css/dist/css/materialize.css"
],
"scripts": [
      "node_modules/jquery/dist/jquery.js",
       "node_modules/hammerjs/hammer.js",
       "node_modules/materialize-css/dist/js/materialize.js"
 ]

Ответ 2

Я думаю, что ключ: правильное место в конфигурации. У нас есть два места, когда мы можем потенциально вставить пути для скриптов. (Угловой CLI: 6.1.5)

Первый из них: (projects => ваше имя приложения => arch => build)

"build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/<your app name>",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]
      },
      "configurations": { ... }
    }

Второй вариант: (projects => ваше имя приложения => architect => test) - НЕПРАВИЛЬНОЕ МЕСТО

"test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.spec.json",
        "karmaConfig": "src/karma.conf.js",
        "styles": [
          "src/styles.css"
        ],
        "scripts": [
        ],
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ]
      }
    }

После этого у вас есть что-то вроде этого в вашем браузере:

enter image description here

Я надеюсь, что это помогло;)

Ответ 3

JS всегда пишите в теге сценария с "".

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Vhls": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/Vhls",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/videogular2/fonts/videogular.css",
              "src/styles.scss"
            ],
            "scripts": [
              "src/assets/js/hls.min.js"
            ]
          },
          "configurations": {...............