Copying external files to build folder

Ionic Framework ionic-v3
1

I created a basic ionic2 application a few weeks ago (still using beta11) and it all worked fine. I was using a .json file with hardcoded json as a datasource. This json file was copied to the /build folder using the app-bundle task located in the gulptasks folder.

Now, I have just created a new ionic2 application and asides from the folder structure that is quite different, gulp seems to be gone completely.

So how should I copy files to the /build folder ? Do I have to install gulp and create every taks myself ? I’m not very familiar with using gulp (in the previous app I created, gulp was already there and I just hacked the app-bundle task).

1 Like
2

If your datasource is public, you can copy your file in assets folder.
And then, during the build, all the assets folder is imported in www.

3

ah ok, good to know, thank you.

Now, that will work for that particular file. What if I want to use a third-party library like angular-chart.js, should I put that file in the assets folder too ? Currently it is in the node_module folder under its plugin subfolder. Eventually, all js files would end up in the assets folder, which may become messy…

4

For 3rd-party library, it’s better to keep them in the node_module folder and import what you need in your components/providers/etc…

5

sure, but importing them in my component is not enough. For example ng2-chart requires to add the following code to index.html:

<script src="node_modules/chart.js/src/chart.js"></script>

obviously this will break and needs to be replaced with

<script src="build/chart.js"></script>

but how do I tell ionic to copy that file to build folder ? I used to do it with gulp, however now that ionic uses rollup.js, I’m a bit lost.

6

Oh okay.

Yes you need to put your js in assets/third-parties/ or wherever you want in assets but i don’t know if it’s the right approach.

7

hum… I think I might have found the right way. In the “Providing Custom Build Configuration” section of the documentation ( https://ionicframework.com/docs/v2/resources/app-scripts/) it says that we can configure rollup deployment. I’m going to look into this.

3 Likes
8

so that was it. I’ve added a new copy.config.js file to specify which files should be copied over by rollup. It works fine.

9

I am trying to add an external javascript file (Auth0 SDK). With the custom copy.config.js I am able to move the file into www build or assets folder, but the problem is the script link in the index.html is getting wiped off during the build. Any idea how to prevent this?