【发布时间】：2018-07-06 11:15:36
【问题描述】：
我是 Angular 新手，并开始从 tutorial 学习 angular5。
我正在将普通的 HTML 模板转换为 Angular5 版本，当我将外部 JS 文件添加到 angular5 项目时遇到困难。
我在 angular.json 文件中的 Angular 项目中包含了 Javascript 文件，但我的 javascript 文件似乎无法正常工作。
有人可以帮忙吗？ 通过在 main.js 文件上编写自定义 jquery 代码，我是否以正确的方式进行？
我是说现在使用 jQuery 代码工作，请参阅下面的示例代码。
/**
* Typing effect Not working
*/
jQuery('.typing__module').each(function (index) {
var self = jQuery(this),
_wrapper = jQuery('.typed', self)[0],
optData = eval('(' + self.attr('data-options') + ')'),
optDefault = {
stringsElement: self.find('.typed-strings')[0],
typeSpeed: 50,
backSpeed: 500,
fadeOut: true,
loop: true
},
options = jQuery.extend(optDefault, optData);
var typed = new Typed(_wrapper, options);
});/*angular.json*/
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"minimus-master": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/minimus-master",
"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": [
"src/assets/vendors/jquery/jquery.min.js",
"src/assets/vendors/imagesloaded/imagesloaded.pkgd.js",
"src/assets/vendors/isotope-layout/isotope.pkgd.js",
"src/assets/vendors/jquery-one-page/jquery.nav.min.js",
"src/assets/vendors/jquery.easing/jquery.easing.min.js",
"src/assets/vendors/jquery.matchHeight/jquery.matchHeight.min.js",
"src/assets/vendors/magnific-popup/jquery.magnific-popup.min.js",
"src/assets/vendors/masonry-layout/masonry.pkgd.js",
"src/assets/vendors/jquery.waypoints/jquery.waypoints.min.js",
"src/assets/vendors/swiper/swiper.jquery.js",
"src/assets/vendors/menu/menu.js",
"src/assets/vendors/typed/typed.min.js",
"src/assets/js/main.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "minimus-master:build"
},
"configurations": {
"production": {
"browserTarget": "minimus-master:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "minimus-master:build"
}
},
"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"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"minimus-master-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "minimus-master:serve"
},
"configurations": {
"production": {
"devServerTarget": "minimus-master:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "minimus-master"
}【问题讨论】：
-
我们不知道“不工作”是什么意思。通过将旧的 jQuery 酒倒入新的 Angular 瓶中，您将试图完成什么对我来说也是一个谜。如果您继续沿着这条路走下去，找出脚本没有加载的原因将是您最不关心的问题。我建议扔掉旧的应用程序并用 Angular 重写它，尽可能地挽救任何代码 sn-ps 或实用程序。顺便说一句，您应该了解您正在使用的工具的名称。没有“AngularJS5”这样的东西。 “AngularJS”是一个古老的框架。我想你的意思是“Angular”。
-
“不工作”是什么意思？见stackoverflow.com/help/mcve。
ng serve会生成构建输出还是报告找不到文件？ -
在 jquery 代码方面不起作用。例如 /** * 打字效果 */ jQuery('.typing__module').each(function (index) { var self = jQuery(this), _wrapper = jQuery('.typed', self)[0], optData = eval('(' + self.attr('data-options') + ')'), optDefault = { stringsElement: self.find('.typed-strings')[0], typeSpeed: 50, backSpeed: 500, fadeOut: true, loop: true }, options = jQuery.extend(optDefault, optData); var typed = new Typed(_wrapper, options); });
-
将您遇到的错误添加到问题中。
-
我在 "ng serve" 时没有收到任何错误。但是看看我包含的 jquery 文件是正确的吗？由于我将 HTML 模板转换为角度版本，所以我必须包含所有内容。
标签： angular