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.

Zerone develops bespoke software solutions carefully customized for the needs of our clients. Contact an expert today.