CODEWITHSUNDEEP
visual-studio-2017
PiotrWolkowski
PiotrWolkowski

Reputation: 8782

Nesting Angular component files into one in Visual Studio

Which setting in Visual Studio 2017 allows for bundling Angular component files into one file?

In the image below the files in the red square should be visually presented as one that then can be expanded.

enter image description here

Names of the files are:

They only differ by extension. The html file should be the main one with ts and css being presented as sub files.

It was working fine until I updated Visual Studio 2017 to version 15.3.3 (before it was 15.1).

Upvotes: 1

Views: 766

Answers (2)

StriplingWarrior
StriplingWarrior

Reputation: 156459

The accepted answer got me on the right track, but I have a couple of improvements to contribute:

First, rather than editing the Visual Studio default rules, I would recommend creating your own nesting rules. You can either create one just for your personal use, or create a .filenesting.json file in your Project or Solution folder so your teammates get the same experience by default.

Second, since in Angular it's the typescript that defines the component and sometimes references HTML, CSS, etc., for me it makes more sense to reverse the relationship.

Here's the .filenesting.json file I ended up using for our web app project, in case it's useful as a minimalist starting point for other Angular and Visual Studio users.

{
  "help": "https://go.microsoft.com/fwlink/?linkid=866610",
  "root": true,

  "dependentFileProviders": {
    "add": {
      "addedExtension": {},
      "pathSegment": {
        "add": {
          ".spec.ts": [
            ".ts"
          ]
        }
      },
      "extensionToExtension": {
        "add": {
          ".html": [
            ".ts"
          ],
          ".scss": [
            ".ts"
          ]
        }
      }
    }
  }
}

Upvotes: 0

PiotrWolkowski
PiotrWolkowski

Reputation: 8782

I finally found a solution to that issue on that thread. It requires editing the toolSettings.json file.

It requires editing toolSettings.json, located in C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\Extensions\Microsoft\Web Tools\ProjectSystem

The following entries need to be added

".ts": [
    ".html"
],

under extensionToExtension.

And ".html" in the "css" array.

The whole file looks like that:

{
"dependentFileProviders": {
"addedExtension": {},
"pathSegment": {
  "*": [
    ".js",
    ".css",
    ".html",
    ".htm",
    ".less",
    ".scss",
    ".coffee",
    ".iced",
    ".config",
    ".cs",
    ".vb",
    ".json"
  ]
},
"extensionToExtension": {
  ".js": [
    ".coffee",
    ".iced",
    ".ts",
    ".tsx",
    ".jsx"
  ],
  ".ts": [
    ".html"
  ],
  ".css": [
    ".less",
    ".scss",
    ".sass",
    ".styl",
    ".html"
  ],
  ".html": [
    ".md",
    ".mdown",
    ".markdown",
    ".mdwn",
  ],
  ".map": [
    ".js",
    ".css"
  ],
  ".svgz": [
    ".svg"
  ],
  ".designer.cs": [
    ".resx"
  ],
  ".cs.d.ts": [
    ".cs"
  ]
},
"fileToFile": {
  ".bowerrc": [
    "bower.json"
  ],
  ".npmrc": [
    "package.json"
  ],
  "npm-shrinkwrap.json": [
    "package.json"
  ],
  "yarn.lock": [
    "package.json"
  ],
  ".yarnclean": [
    "package.json"
  ],
  ".yarnignore": [
    "package.json"
  ],
  ".yarn-integrity": [
    "package.json"
  ],
  ".yarnrc": [
    "package.json"
  ]
},
"filePartToExtension": {
  "-vsdoc.js": [
    ".js"
  ]
},
"allExtensions": {
  "*": [
    ".tt"
  ]
}
}
}

Upvotes: 1

Related Questions