Include Other Files In Angular Build

When building an Angular application, the assets folder and favicon.ico file are copied over by default to a dist/project-name folder. Did you know that you could include other files when building an Angular application? Let’s learn how!

Include Other Files Within Angular Src

By default, the assets folder and favicon.ico file are included in an Angular build, but why? When you run the ng build command, Angular looks to its angular.json file for instructions on what to include when building, specifically under the architect/build section. Within that section, there is an option called assets. It defines folders and files you want to include when building your application.

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      ...
      "assets": [
        "src/favicon.ico",
        "src/assets"
      ],
      ...
}

In a recent project, I needed to include a 404.html file in my Angular build. The 404.html file was located within the src folder of my Angular project.

• node_modules
• src
  • app
  • assets
  • environments
  • 404.html
  • favicon.ico
  • index.html

To include it in the build, all I had to do was add it as an asset in angular.json!

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      ...
      "assets": [
        "src/favicon.ico",
        "src/assets",
        "src/404.html"
      ],
      ...
}

After running the build, the 404.html file was included in the dist/project-name folder! By the way, the dist/project-name folder is also a default and can be changed in angular.json using the outputPath option!

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/project-name",
      "assets": [
        "src/favicon.ico",
        "src/assets",
        "src/404.html"
      ],
      ...
}

Include Other Files Outside Angular Src

In another recent project, I needed to include an app.yaml file in my Angular build. The app.yaml file was located outside of the src folder of my Angular project.

• node_modules
• src
  • app
  • assets
  • environments
  • favicon.ico
  • index.html
• app.yaml

I just learned this! I can add it as an asset in angular.json!

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      ...
      "assets": [
        "src/favicon.ico",
        "src/assets",
        "app.yaml"
      ],
      ...
}

After running the build, I get an error? What happened?

Asset Path Must Start With The Project Source Root

If you try to include folders or files located outside of the project source root, you’ll get an error that the asset path must start with the project source root. The solution is to define the asset as an object rather than a simple path.

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      ...
      "assets": [
        "src/favicon.ico",
        "src/assets",
        {
          "glob": "app.yaml",
          "input": ".", 
          "output": ".",  
        }
      ],
      ...
}

The glob is a file matching pattern. I want to look for the exact file named app.yaml.

The input is the path relative to the workspace root. Define where to find the file. It’s in the root of the workspace root so I defined it as a dot.

The output is the path relative to the outputPath (dist/project-name). Define where in the dist/project-name folder the file should go. I wanted it to go in the root of the dist/project-name folder so I defined it as a dot.

After running the build, the app.yaml file was included in the dist/project-name folder!

---

Visit our website at https://nightwolf.dev and follow us on Facebook and Twitter!