The application I build at the moment runs in an angular 2.0.0 final environment using typescript. Furthermore it uses the angular-cli 1.0.0-beta.15.
As the whole application is produced by several different developers (all using typescript) I get some .js files that are compiled from typescript and should be included and used in my angular 2 app.
My problem however is, that I can't seem to find a way to integrate the .js file and use it in e.g. a component.
I allready checked this SO question as well as this question in the official repo but neither of these answers worked for me.
I even tried a workaround where I include the .js file globally in the angular-cli.json like this:
"scripts": [
"../path/to/custom.js"
]
How can I (generally and specifically for this scenario) include custom .js files which do not come as e.g. npm module or have any d.ts files.
EDIT:
The including itself by using the angular-cli.json seems to work well but for now I still could not find a way to use the scripts methods. Whenever I do
declare var customJsObject: any;
It throws an
EXCEPTION: Uncaught (in promise):
Error: Error in CustomComponent caused by: customJsObject is not defined
From my project:
{
"project" : {
"version": "1.0.0-beta.15",
"name" : "my-project"
},
"apps" : [
{
"root" : "src",
"outDir" : "dist",
"assets" : "assets",
"index" : "index.html",
"main" : "main.ts",
"test" : "test.ts",
"tsconfig" : "tsconfig.json",
"prefix" : "",
"mobile" : false,
"styles" : [
"sass/application.scss",
"assets/fonts/bebas/bebasneue.css"
],
"scripts" : [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/fastclick/lib/fastclick.js",
"../node_modules/jquery.cookie/jquery.cookie.js",
"../node_modules/jquery-placeholder/jquery.placeholder.js",
"../node_modules/foundation-sites/dist/foundation.js",
"../node_modules/jquery-ui/ui/version.js",
"../node_modules/jquery-ui/ui/plugin.js",
"../node_modules/jquery-ui/ui/widget.js",
"../node_modules/jquery-ui/ui/widgets/mouse.js",
"../node_modules/jquery-ui/ui/widgets/draggable.js",
"assets/rollbar.js"
],
"environments": {
"source": "environments/environment.ts",
"dev" : "environments/environment.ts",
"prod" : "environments/environment.prod.ts"
}
}
],
"addons" : [],
"packages": [],
"e2e" : {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test" : {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt" : "scss",
"prefixInterfaces": false
}
}
Solution Edit:
For this specific problem there was a naming issue which caused the problem. In general the provided answer "entering the script in the angular-cli.json" was correct.
The only thing one need to do afterwards is
declare var customJsObject: any;
in the component you want to use the custom.js in.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With