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
– Illorian, Commented Sep 26, 2016 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
– Mr.Moe, Commented Sep 27, 2016 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
– Mr.Moe, Commented Sep 28, 2016 at 10:32

Mr.Moe · Accepted Answer · 2016-09-29 14:19:52Z

2

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.

edited Sep 29, 2016 at 14:19

Mr.Moe

5161 gold badge5 silver badges21 bronze badges

answered Sep 28, 2016 at 14:48

Illorian

1,2122 gold badges14 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mr.Moe Over a year ago

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

Illorian Over a year ago

Do you use module.exports in custom.js?

Mr.Moe Over a year ago

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 } })

Illorian Over a year ago

@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

Mr.Moe Over a year ago

I didnt get what you mean with your last sentence, sorry.

|

Collectives™ on Stack Overflow

Including custom none npm js files into angular 2

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related