CODEWITHSUNDEEP
angularwindowsangular-cliassetssymlink
smalers
smalers

Reputation: 385

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

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.

Upvotes: 2

Views: 1036

Answers (2)

ScoMo
ScoMo

Reputation: 75

I ran into this with Angular 17, probably works with earlier versions. In the assets glob, you need to specify "followSymlinks": true

        {
          "followSymlinks": true,
          "glob": "**/*",
          "input": "src/externalassets/ui/formats/general",
          "output": "ui/formats/general"
        },

Upvotes: 0

smalers
smalers

Reputation: 385

I was not able to get a symbolic link from the Angular project's src/assets folder to another folder to work on Windows but may spend more time on it later. Everything on the operating system looks OK, but Angular returns 404 errors for anything in the sub-folders of the linked folder. Instead, I took the brute force approach of writing a script to copy files from the other folder into the Angular project's src/assets folder. We may need to do this anyhow because users that may use this software are not developers and jumping through the hoops to enable symbolic links on Windows is somewhat of a pain and maybe more than they can handle. I'm not going to mark this as the preferred answer in the hope that someone will eventually provide a better answer.

Upvotes: 0

Related Questions