This is the second part of my “Modify and add auto-generated code to existing TypeScript, HTML and JSON files with angular schematics” series. If you didn’t read that yet, I recommend you to do as I will start from where I left off in the first part.
As promised, this part will be about how to auto-generate code into existing JSON and HTML files which is something that I struggled personally to figure out due to the lack of documentation and online content. I wanted to share with you because of the same reason. So, now enough talk, let’s get into the real deal.
How to add auto-generated code into an existing HTML file
Assuming that you already read the first part, you now have a schematic that is calling one rule to add an object to an array in a TypeScript file. Let’s say now we want to add another rule to add an HTML element to an existing one when running the same schematics.
In order to do this, we have to (I am sure you’ve guessed it already) create another rule.
But before that, let’s create the HTML file that we want to add the generated code into.
<p> CODE: https://gist.github.com/aziz-haddad/0eee60591a12f08e60e41d49605a2c30.js </p>
Now, we have to start on how to create our rule to generate another list element. In order to do this, we have to use an HTML parser which will make our lives a lot easier because we can access DOM elements, for this example, we will use cheerio. So, make sure you install it by running the following commands:
npm i cheerio
npm i @types/cheerio --save
Our rule should read the file as a string, parse it to HTML, append the new bullet to the list element with class “people-list” and then simply overwrite the file with the modified HTML
<p> CODE: https://gist.github.com/aziz-haddad/81656dfd95ee4833fa0c1b74291a454d.js </p>
Now, we have to add this rule to the chain function that we already created in the previous part under src/tutorial-schematic/index.ts. The final tutorialSchematic function will look like this:
<p> CODE: https://gist.github.com/aziz-haddad/50ef28f71b357ffd5f123b26cf5b3941.js </p>
When running the schematic now, both objects should be added to the array in people.ts and the bullet point should be added to the <ul> element in people.html file.
How to add auto-generated code into an existing JSON file
To create a rule to update a JSON file is the easiest part, you just have to parse the JSON file -> do the changes -> overwrite the file with the stringified updated JSON -> BAM! Easy isn’t it?
Let’s say we want to update this JSON file and add another entry to the people array.
<p> CODE: https://gist.github.com/aziz-haddad/5b36b99570755fae18f7b57d8194ad82.js </p>
What makes our life easier is that there are a lot of utility functions that are already done by the angular team which you can find in the @angular/dev-kit package. One of them does exactly what we want — update a JSON file. So, I copied from there and call it in our rule which will end up to be like this:
<p> CODE: https://gist.github.com/aziz-haddad/39436878cfc866abb41dab9edc063f00.js </p>
The final step is as always to add the created rule to the index.ts file of the schematics. Our final index.ts file will look like this.
<p> CODE: https://gist.github.com/aziz-haddad/e3aa6d2c695012e92bdb6c49e44d94a2.js </p>
Now, just run your schematics and enjoy the power of auto-code generation.
In these articles, I tried to cover some of the common use cases of using schematics to update existing files, shared my learnings and tried to demystify a little bit more on what I think is an amazing tool which is unfortunately very poorly documented. Schematics can actually do a whole lot more than this and hopefully, we will get an official documentation soon for all of that.
