Neovim for Beginners — Angular

Use Neovim for Angular web application development.

Neovim for Beginners — Angular

In this article, let’s configure Neovim for Angular web application development.

This article is part of the Neovim for Beginners series.

The Neovim configuration files can be found in this repository.

Getting Started

To make it easy for demonstration purposes, we will use a sample application created using the Angular CLI.

Language Server

In the lua/config/lsp/init.lua file, add the line to configure the angularls language server.

local servers = {
  ...
  angularls = {},
}

Restart Neovim and the nvim-lsp-installer plugin should install the language server automatically.

Angular Language Server

Code Snippets

We will configure Angular TypeScript snippets for VS Code which currently has more than 3 million installs.

The steps to configure the Angular snippets.

• Download the snippets from the repository to any folder we prefer.
• Download the package.json file to the same folder, and change the snippet's location paths.

"contributes": {
  "snippets": [
    {
      "language": "typescript",
      "path": "./typescript.json"
    },
    {
      "language": "javascript",
      "path": "./javascript.json"
    },
    {
      "language": "jsonc",
      "path": "./jsonc.json"
    },
    {
      "language": "html",
      "path": "./html.json"
    },
    {
      "language": "dockerfile",
      "path": "./dockerfile.json"
    }
  ]
},

In our case, we configure the snippets under the angular folder.

For those unfamiliar with LuaSnip, do refer to previous articles on snippets from the series.

In the lua/config/snip/init.lua file, add the line to load the snippets.

require("luasnip.loaders.from_vscode").lazy_load { paths = { "./snippets/angular" } }