Angular ng serve (angular-cli) on Windows cannot find assets files when symbolic link is used

  angular, angular-cli, assets, symlink, windows

I am trying to troubleshoot an issue for an Angular developer. I am not an angular developer but am configuring data for a reusable Angular application. What we are trying to do is allow a core Angular tool to be developed in one Git repository and have a parallel Git repository with the application configuration and data files, many of which are dynamically-generated. The environment is Windows 10 with the following Angular version, and we also use Git Bash and Cygwin terminal windows to run command line ng and other commands.

Angular CLI: 7.3.5
Node: 10.15.3
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.13.5
@angular-devkit/core         7.3.5
@angular-devkit/schematics   7.3.5
@schematics/angular          7.3.5
@schematics/update           0.13.5
rxjs                         6.3.3
typescript                   3.2.4

To allow switching between data configurations, we want to use a symbolic link like src/assets/app -> some/data/folder/in/a/repo. The target and link folders are ignored with .gitignore files because they are dynamic content. I have followed Josh Kelley’s article on symlinks to enable symlinks in Windows 10 and have configured Cygwin, Git Bash (MinGW), and Git. I can see the symlinks in Git Bash and Cygwin terminal, Windows Explorer, Windows command prompt, can cd through the link directory, etc. So, from the operating system, the links seem to be working in all environments. I have also tried creating the symlink from the Windows side with mklink /d and from Git Bash side, with similar results.

The angular.json file has "preserveSymlinks": true, although the documentation on this feature is not clear to me. Does it mean that a path visible to Angular will be that of the symbolic link, rather than the expanded underlying path? This property seems to be mentioned in support articles related to software libraries and code, but I have not seen discussion of it related to assets folder, and this issue focuses on the assets folder.

"projects": {
    "info-mapper": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/info-mapper",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "preserveSymlinks": true,

When ng serve is run in a Git Bash shell, the application displays fine and can access the main configuration file in the top folder. However, any data files in folders below the main folder result in 404 errors. The path that is shown in browser console errors is correct and uses the symlink path (not the underlying operating system path), as intended. If I implement a workaround discussed below, it works fine.

We are stuck. Without symbolic link ability, the workaround is:

  1. copy all assets files from the data repository to the Angular web application assets folder (not good because there are a lot of files to repeatedly copy)
  2. use a symbolic link in the other direction (assets/app <- path/to/some/data/folder), which is basically like #1 but the receiving folder (the symlink) is in the data repository.

Either of these solutions makes it more difficult to quickly repoint the Angular application to use a new data configuration in another repository’s working files. It seems like other people would have run into this. Any help would be appreciated.

Source: StackOverflow

LEAVE A COMMENT