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

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

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

P. D. Я не должен использовать CDN для материализуются в JS.

7
angular angularjs javascript

2 ответов

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

установить MaterializeCSS и angular2-материализуются из npm

 npm install materialize-css --save 
 npm install angular2-materialize --save 
 npm install jquery@^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"
 ]
7

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

первый: (проекты => ваше имя приложения = > архитектор = > сборка)

"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": { ... }
    }

второй: (проекты => ваше имя приложения = > архитектор = > тест) - неправильное место

"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

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

0