[英]How to call external Javascript function which is in separate file under assets folder in Angular component?
//Way 1 - Not working
import { LoadCarouselAndPopup } from '../../../assets/js/main.js';
LoadCarouselAndPopup();
//Way 2 - Not working
declare var System: any;
System.import('../../../assets/js/main.js')
.then(xJS => {
xJS.LoadCarouselAndPopup();
});
} }
I have tried above two ways. 我已经尝试了以上两种方法。
In first way, I cant compile the code because it throwing error like "error TS5055: Cannot write file 'main.js' because it would overwrite input file". 在第一种方式中,我无法编译代码,因为它会抛出诸如“错误TS5055:无法写入文件'main.js',因为它将覆盖输入文件”之类的错误。 In this case i have added "allowJs: true" also.
在这种情况下,我还添加了“ allowJs:true”。
In way 2, I got error like "cannot read property 'call' of undefined".. 在方式2中,出现类似“无法读取未定义的属性'call'的错误”。
Help me to solve this. 帮我解决这个问题。 Thanks in advance.
提前致谢。
As I have seen you folder structure in images I believe that you are using angular-cli for this, so you can include your external scripts by including the path of that scripts in .angular-cli.json file in scripts array 正如我看到的图像中的文件夹结构一样,我相信您正在为此使用angular-cli,因此可以通过在scripts数组中的.angular-cli.json文件中包含该脚本的路径来包含外部脚本
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "dummy-project"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": ['assets/filename.js],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
As far as I see you are using angular cli. 据我所知,您正在使用角度cli。 You have load your script in the cliconfig.
您已将脚本加载到cliconfig中。 Here is the wiki how you can accomplish: https://github.com/angular/angular-cli/wiki/stories-global-scripts
这是您可以如何完成的Wiki: https : //github.com/angular/angular-cli/wiki/stories-global-scripts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.