February 9, 2018
Angular CLI: Add Sitemap.xml and Robots.txt File
As a developer you may get the task adding a Sitemap and a robot.txt to your Angular project. This is quite easy if it is being built with Angular CLI.
Copy the files next to the favicon.ico into the /src folder of your Angular project.
|
1 2 3 4 |
├── src │ ├── sitemap.xml │ ├── favicon.ico │ ├── robots.txt |
Now open up the angular.json file in the projects root folder with an editor and add the two files inside the assets section, as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "my-app": { "__________comment": "[...]", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "__________comment": "[...]", "assets": [ "src/favicon.ico", "src/robots.txt", "src/sitemap.xml", "src/assets" ], }, "__________comment": "[...]", } } } }, } |
If you have jq installed on your system you can achieve the same by executing the following one-liner without using an editor:
|
1 2 3 |
pn=`jq -r '.defaultProject' angular.json` && \ jq --arg pn "$pn" '.projects[$pn].architect.build.options.assets += [ "src/sitemap.xmp", "src/robots.txt" ]' angular.json > angular.json.new && \ mv angular.json.new angular.json |
Restart your Angular build and the files should be served directly from the root path.
If you still use version 1.x of the @angular/cli then change .angular-cli.json instead of angular.json accordingly:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
"apps": [ { [...] "assets": [ "assets", "favicon.ico", "sitemap.xml", "robots.txt" ], [...] } ], |
Another not very known feature of the CLI version 6.x is to relocate those assets. So alternatively you can leave your files beneath the /src/assets folder and relocate them using the following configuration:
|
1 2 3 4 5 6 |
"assets": [ "src/favicon.ico", "src/assets", {"glob": "robots.txt", "input": "src/assets", "output": "/"}, {"glob": "sitemap.xml", "input": "src/assets", "output": "/"} ] |
But keep in mind that these two files may be duplicated using this setting. Both files will be then available in the root and in the assets folder.
theCodeCampus
Developer at 
Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.
thank you
If I want to read a file.txt in angular cli project. How can I do? I’ve tried with FileReader. But FileReader open any file from Local. It doesn’t open a file .txt stored in assets. And how can I bind in a template a file.txt stored in assets?
How do you generate the sitemap.xml in the first place. I can not find it in the folder where the favicon.ico is located.
Hello Mikiyas,
usually in an Angular CLI project the favicon is located under project-folder/src/favicon.ico.
You have to create the file yourself.
Thank you so much! This worked for me on my Angular 7 application.
Thank you
if you are getting confused you can see the same topic here:
https://aman-g.com/blog/post/Simple-Way-to-Add-sitemap.xml-and-robots.txt-in-Angular-SPA
Thanks allot !
The sitemap plugin can make it easy to promote my site’s pages or content for search engines. A sitemap is very useful for my blog SEO because a site sitemap can provide the url of the content on my blog to be more easily reached by search engines so that it can be indexed faster.
The sitemap plugin can make it easy to promote my site’s pages or content for search engines. A sitemap is very useful for my blog SEO because a site sitemap can provide the url of the content on my blog to be more easily reached by search engines so that it can be indexed faster.