Including custom none npm js files into angular 2

Question

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

Are you shore that path is correct? The file path shoud work relatively to the root path set in angular-cli.json — Illorian, Sep 26 '16 at 16:35
@Illorian yeah I'm sure. the folder structure is `src/app/assets/custom.js` the defined root is `src` and the import path in the `angular-cli.json`'s scripts array is `./app/assets/custom.js` but still i get a 404 — Mr.Moe, Sep 27 '16 at 13:59
@Illorian this results in an angular-cli error: `Error: Can't resolve currently/used/path/to/custom.js in path/to/angular-cli/models` — Mr.Moe, Sep 28 '16 at 10:32

score 2 · Accepted Answer · edited Sep 29 '16 at 14:19

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.

I got that part and it seams to work as the component itself is displaying and not throwing any errors. But how can I use this script? I tried to use a hack where I `declare var customJsObject: any` in the component but whenever I want to use a method on that object it just replies with `EXCEPTION: Uncaught (in promise): Error: Error in customComponent caused by: customJsObject is not defined` — Mr.Moe, Sep 29 '16 at 07:19
No. As it is a compiled file as described above it's a structure like `var Custom;` `(function(Custom){ Custom.prototype.foo = function() { this.bar = baz } })` — Mr.Moe, Sep 29 '16 at 07:35
@Mr.Moe, try to add this script into index.html.If you still have an error then problem in file. Otherwise you should to export your data from file — Illorian, Sep 29 '16 at 07:40
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/124503/discussion-between-mr-moe-and-illorian). — Mr.Moe, Sep 29 '16 at 07:49

Including custom none npm js files into angular 2

1 Answers1