Javascript 如何在 Angular 6 中使用外部 JS 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50842115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use external JS files in Angular 6
提问by Ricardo Luna
I started a project with Angular but I never thought that install the most recent version of it would bring me a couple of problems. I am also using Materialize so when I try to 'import' its Javascript file it doesn't work. I don't know why, I was looking for an answer since the past Friday but I found nothing.
我用 Angular 开始了一个项目，但我从没想过安装它的最新版本会给我带来一些问题。我也在使用 Materialize，所以当我尝试“导入”它的 Javascript 文件时它不起作用。我不知道为什么，我从上周五开始就一直在寻找答案，但一无所获。
I have changed the angular.json file and referenced my JS location in it but it doesn't was sufficient.
我已经更改了 angular.json 文件并在其中引用了我的 JS 位置，但这还不够。
P.D. I must not use the CDN for materialize JS.
PD 我不能使用 CDN 来实现 JS。
采纳答案by Vikas
CLI projects in angular 6 onwards uses angular.jsoninstead of .angular-cli.jsonfor build and project configuration. That implies you are using Angular 6.
As of v6, the location of the file has changed to angular.json. Since there is no longer a leading dot, the file is no longer hidden by default and is on the same level.
which also means that file paths in angular.json should not contain leading dots and slash i.e you should provide an absolute path
angular 6 及更高版本的 CLI 项目使用angular.json而不是.angular-cli.json用于构建和项目配置。这意味着您使用的是 Angular 6。
从 v6 开始，文件的位置已更改为angular.json. 由于不再有前导点，默认情况下文件不再隐藏并且处于同一级别。这也意味着 angular.json 中的文件路径不应包含前导点和斜线，即您应该提供绝对路径
Install MaterializeCSS and angular2-materialize from npm
从 npm 安装 MaterializeCSS 和 angular2-materialize
npm install materialize-css --save
npm install angular2-materialize --save
npm install jquery@^2.2.4 --save
npm install hammerjs --save
After installing all the required dependencies add them to styles and scripts array of angular.json
安装所有必需的依赖项后，将它们添加到样式和脚本数组中 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"
]
P.SAdditonal Info: Error import javascript library in typescript
附注Additonal Info：Error import javascript library in typescript
回答by riwex
I think that key is: correct place on configuration. We have two places when we can potentially paste the paths for scripts. (Angular CLI: 6.1.5)
我认为关键是：配置的正确位置。我们有两个地方可以粘贴脚本的路径。（角 CLI：6.1.5）
The first one is: (projects => your app name => architect => 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": { ... }
}
The second one is: (projects => your app name => architect => test) - WRONG PLACE
第二个是：（项目 => 你的应用程序名称 => 架构师 => 测试） - 错误的地方
"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"
]
}
}
After that you shoud have something like this on your browser:
之后，您的浏览器上应该有类似的内容：
I hope that it helped ;)
我希望它有所帮助;)
回答by Rahi Verma
js always write in script tag with "".
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": {...............
