When you work on an Ionic based project or any web project having JavaScript or CSS file, at times, you will forget to add your new JavaScript or CSS file onto the page. This often results in broken page. You will spend a lot of time troubleshooting the issue, before you realize that you just forgot to add the script or CSS tag. In this post, we will see the quick and easy steps to include custom CSS and JS files in Ionic 3. This saves your time and effort to fix the page.

Let us take a context for instance: While working with external libraries and NPM packages, you sometimes need to load JS/CSS files in a way, different from how the rest of your package is already loaded.

For example, if you are using ng2-CKEditor, you need to refer the ckeditor.js file in your index.html file:

<script src=”https://cdn.ckeditor.com/4.5.11/full/ckeditor.js”></script>

Reference: https://www.npmjs.com/package/ng2-ckeditor

You can see that the above reference will be loaded from the cdn.ckeditor.com server. Following steps explain how easily we can load the external JS/CSS file from your application.

  1. Install dependencies

You need to start by installing the NPM package to your Ionic app. In this case, I used the ng2-CKEditor package to easily add a rich text box to my app:

npm install ng2-ckeditor

This will install the dependencies of ng2-ckeditor except for ckeditor.js in your node_modules folder.

  1. Create custom copy config

copy.config.js file is a custom dictionary that makes it easy to extend/override ionic build.

In Ionic, there is a default copy.config.js file in @ionic/app-scripts/config path. Check the following code:

module.exports = {
  copyAssets: {
    src: ['{{SRC}}/assets/**/*'],
    dest: '{{WWW}}/assets'
  },
  copyIndexContent: {
    src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'],
    dest: '{{WWW}}'
  },
  copyFonts: {
    src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
  },
  copyPolyfills: {
    src: [`{{ROOT}}/node_modules/ionic-angular/polyfills/${process.env.IONIC_POLYFILL_FILE_NAME}`],
    dest: '{{BUILD}}'
  },
  copySwToolbox: {
    src: ['{{ROOT}}/node_modules/sw-toolbox/sw-toolbox.js'],
    dest: '{{BUILD}}'
  }
}

The default copy.config.js will look like the above code. Here copyAssets, copyIndexContent etc. denote the name of the entry. We can specify any name here.

  • src is the path of the file where you save the CSS/JS file.
  • dest is the destination where you need to send the file. Ideally, this will be your build folder.

This config will then take care of copying your CSS/JS file into the build folder, just like your service-worker or assets are copied. We start by adding an entry to our package.json which passes a custom config to the ionic_copy hook:

"config": {
      "ionic_copy": "./config/copy.config.js"
  }

Now you need to go ahead and create this file. Create a folder config at the root of your project and name the file inside as shown below: copy.config.js.

1

In the next step, you need to edit your newly created copy.config.js file. Copy all the content in the default copy.config.js file and paste it into your newly created file.

Now you can add your custom JS/CSS in the new copy.config.js file as shown below. Here, I have added the dependency files for the ng2-ckeditor in my custom copy.config file.

copyCkEditorScript: {
        src: ['{{ROOT}}/src/script/ckeditor.js'],
        dest: '{{BUILD}}'
    },
    copyCkEditorConfigScript: {
        src: ['{{ROOT}}/src/script/config.js'],
        dest: '{{BUILD}}'
    },
    copyCkEditorEnScript: {
        src: ['{{ROOT}}/src/script/en.js'],
        dest: '{{BUILD}}/lang'
    },
    copyCkEditorStyleScript: {
        src: ['{{ROOT}}/src/script/styles.js'],
        dest: '{{BUILD}}'
    },
    copyCkEditorCss: {
        src: ['{{ROOT}}/src/style/editor.css'],
        dest: '{{BUILD}}/skins/moono'
    }

Next step is to add all the dependency files in script and style folder.

2

In above code, you can see that copyCkEditorScript is used to load the ckeditor.js from src/script to my build folder.

  1. Load in your App

We have installed the package. All the files in the copy.config.js file will be copied to the build folder. We just need to link to it and use it!

To do this last step, open your src/index.html and somewhere inside the head (for CSS/JS) add an entry like this:

<script src=”build/ckeditor.js”></script>

Always remember that the file was copied directly into the build folder, and that’s the place where our application will find it during runtime.

Conclusion

To wind up, with a little of bit of code, you can include all custom CSS and JS files into your Ionic project using the above steps. This saves a considerable amount of time that you spend for fixing the broken page. Try to follow these steps and let us know how it worked for you. We would also like to hear alternate workarounds and coding tips from you. Do comment on this post.

Posted by Surjith P

Surjith is a Senior Software Engineer at Zerone Consulting. He is an enthusiastic developer who loves to explore and write about technology. He has a vast experience in Microsoft technologies. Currently, he is focusing on Angular and Ionic frameworks.

2 Comments

  1. Hi Surjith P,

    Can I ask a question about adding javascript file into ionic project?

    I am working on a project using ionic 3. I created a Tabs app by using ionic creator. Then I made some changes in the Tab pages such as adding buttons, list, etc…

    I have another javascript file which is from the different project. I want to use the functions inside of this file to manage the buttons, list which are created in the pages folder.

    How can I do it?

    Kind regards

    Reply

  2. Hi REE WANG,

    You can add external JavaScript file into your project using my example. Usually we use typescript page that come along with the html page for managing the buttons and list in that page.

    I didn’t try any external javascript files for managing the controls in the page. I think, this will be a overhead.

    Regards,
    Surjith

    Reply

Leave a Reply