发表新帖
发表新帖

How Import JS File in angular 6?

前端 未结
关注
4 1401
忘了有多久
忘了有多久 2021-02-10 09:30

how can I import a js file in angular 6. I tried to implement a navbar and it contains js functions. thanks!!!

I Add my js file called nav.js

 \"scripts
相关标签:
4条回答
  • 情深已故
    2021-02-10 09:39

    Angular 6 has a dedicated place to declare js files within the dedicated arrays of your angular.json, under 

     /projects/$(youProjectName)/architect/build/options/scripts[]

    and 

     /projects/$(youProjectName)/architect/test/options/scripts[]

    As an example: 

    npm install fast-levenshtein --save

    will install a js library under node-modules

    The path relative to the project of the js lib file is declared like this:

    "scripts": [
   "node_modules/fast-levenshtein/levenshtein.js"
]

    Then declare in your component the variable(s) to use, either as described by the npm documentation or by @LuaXD

    0 讨论(0)
  • 深忆病人
    2021-02-10 09:42

    I suggest some workaround if you can grasp the functions within the script. So You either put them in your component.ts code as functions ,or if you can't/don't want to , you will just have to export/import them . for example

    myscript.js

      function a(){ ...}
    function b(){...}


    module.exports.a=a
    module.exports.b=b

    mycomponent.component.ts

    ..
import a from './path/../myscript.js';
import b from './path/../myscript.js';

..
constructor(){
...
a.a()
b.b()
...
}

    ps:many times you will find function anonymous so you just have to rename them , for example

    myscript.js

    function(){..}();

    will be

    myscript.js

    function myCustomName(){..};
module.exports.customName=myCustomName
    0 讨论(0)
  • 南笙
    2021-02-10 09:50

    first, you should install your library with npm. then the library is being added to your node_modules folder, in your project.

    now:

    if you want to import js files into the angular project, first you should check the version of angular, if you are using version 2 and 4 , you should write like this :

          "scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

    and if you are using version upper than 4, like 5,6 or 7 you should write like this :

          "scripts": [ "./node_modules/jquery/dist/jquery.min.js" ]

    in this example i import jquery into the angular project. i hope, it works

    0 讨论(0)
  • 南旧
    2021-02-10 09:55

    You should include on index.html, e.g: 

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
   <title>A random project</title>
   <base href="/">

   <meta name="viewport" content="width=device-width, initial- 
    scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
   <link rel="stylesheet" href="https://cartodb- 
  libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" 
/>
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.core.js"></script>

<app-root></app-root>
</body>
</html>

    On this case I included cartodb.js library, then for use cartodb.js on any component, or service I use:

    declare var cartodb: any;

    At the beginning of any file (Component, Service, etc).

    Note change cartodb by the name of the library you will use, for example for jquery is:

    declare var jquery:any;
declare var $ :any;

    You should have something like this:

    import { Injectable } from '@angular/core';
// Other imports...

declare var cartodb: any;
@Injectable()
export class ARandomService {
}

    P.s Search if the code you want to use doesn't exist in npm.

    0 讨论(0)
 看不清?
提交回复
热议问题