CODEWITHSUNDEEP
javascriptangularjsangular
Mr.Moe
Mr.Moe

Reputation: 507

Including custom none npm js files into angular 2

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

Upvotes: 3

Views: 306

Answers (1)

Illorian
Illorian

Reputation: 1212

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.

Upvotes: 2

Related Questions