Language service not working in template (Node v12.22)

[joeveiga]

Describe the bug Angular not working in component template files when using Node v12.22.12 (using v16 it works fine). Tested with VSCode version of the extension and it works as expected.

Coc-angular version: 13.3.5 VSCode language service extension version: v13.3.2

To Reproduce Steps to reproduce the behavior:

1. Make sure Node version is v12.
2. Generate a new angular app: npx @angular/cli@13 new test-proj (default settings).
3. Open the project in neovim and navigate to src/app/app.component.html.
4. Try to show hover or goto def on a binding, e.g. {{ title }}.

Expected behavior Works as expected.

Screenshots

Desktop (please complete the following information):

• OS: MacOS Monterey

Log:

...
Info 18   [9:16:45.664] Loading global plugin @angular/language-service
Info 19   [9:16:45.664] Enabling plugin @angular/language-service from candidate paths: /Users/jveiga/.config/coc/extensions/node_modules/coc-angular/node_modules/@angular/language-service/index.js,/Users/jveiga/projects/test-proj/node_modules/typescript/lib/tsserverlibrary.js/../../..
Info 20   [9:16:45.664] Loading @angular/language-service from /Users/jveiga/.config/coc/extensions/node_modules/coc-angular/node_modules/@angular/language-service/index.js (resolved to /Users/jveiga/.config/coc/extensions/node_modules/coc-angular/node_modules/@angular/language-service/index.js/node_modules)
Info 21   [9:16:45.731] Plugin activation failed: SyntaxError: Unexpected token '?'
...

Full log from both coc angular and vscode:

coc_nglangsvc.log vscode_nglangsvc.log

:CocInfo

## versions

vim version: NVIM v0.7.0
node version: v12.20.2
coc.nvim version: 0.0.80-f32eba49 2022-05-02 01:40:03 +0800
coc.nvim directory: /Users/jveiga/.local/share/nvim/plugged/coc.nvim
term: tmux
platform: darwin

## Log of coc.nvim

2022-05-05T09:54:13.286 INFO (pid:78327) [configurations] - Add folder configuration from cwd: /Users/jveiga/projects/test-proj/.vim/coc-settings.json
2022-05-05T09:54:13.288 INFO (pid:78327) [configurations] - Change folder configuration from cwd to: /Users/jveiga/projects/test-proj/.vim/coc-settings.json
2022-05-05T09:54:14.801 INFO (pid:78327) [extensions] - Skipped load vim plugin from "/Users/jveiga/.config/coc/extensions/node_modules/coc-snippets/", "coc-snippets" already global extension.
2022-05-05T09:54:15.230 INFO (pid:78327) [services] - registered service "html"
2022-05-05T09:54:15.230 INFO (pid:78327) [services] - HTML language server state change: stopped => starting
2022-05-05T09:54:15.352 INFO (pid:78327) [plugin] - coc.nvim initialized with node: v12.20.2 after 572ms
2022-05-05T09:54:15.387 WARN (pid:78327) [workspace] - workspace.createStatusBarItem is deprecated, please use window.createStatusBarItem instead. 
    at Object.t.initStatusBar (/Users/jveiga/.config/coc/extensions/node_modules/coc-spell-checker/out/index.js:1:155873)
    at Object.t.activate (/Users/jveiga/.config/coc/extensions/node_modules/coc-spell-checker/out/index.js:1:23099)
2022-05-05T09:54:15.463 INFO (pid:78327) [core-watchman] - watchman watching project: /Users/jveiga/projects/test-proj
2022-05-05T09:54:15.731 INFO (pid:78327) [services] - HTML language server state change: starting => running
2022-05-05T09:54:15.735 INFO (pid:78327) [services] - service html started
2022-05-05T09:54:33.856 INFO (pid:78327) [attach] - receive notification: doHover []
2022-05-05T09:54:38.427 INFO (pid:78327) [attach] - receive notification: showInfo []

[el-og]

Do you have strictTemplates set to true in your tsconfig.json inside an Angular project?

[joeveiga]

@OskarasGoborovas that's correct. The default tsconfig.json generated by the cli looks like this:

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

[el-og]

I have been having similar issues before. All of them was related mostly with tsconfig.json configurations. Somehow VS Code uses different resources or w/e and it's not that sensitive. Do you have tsconfig.app.json and tsconfig.spec.json as well? If so then, please share

[joeveiga]

Yeah, sure.

tsconfig.app.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

tsconfig.spec.json

/* to learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jasmine"
    ]
  },
  "files": [
    "src/test.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

Do you think you could be able to go over the steps to reproduce and check if it works for you, if you have time? Just to discard some possible issue with my local setup. Thanks!

[el-og]

I have recreated the issue and it works no problem for me.

Used this mapping nmap <silent> gd <Plug>(coc-definition) and it opened up .ts file.

https://user-images.githubusercontent.com/19407604/168476203-71efdedf-3f55-4975-9069-88811f6f3ee0.mov

Are you sure your coc-angular is activated? (you can check with :CocList extensions) Because I remember I have been having problems with it so I just slapped these configurations in my init.vim

autocmd VimEnter * call CocActionAsync('activeExtension', 'coc-angular')
autocmd VimEnter * call CocActionAsync('activeExtension', 'coc-tsserver')
autocmd VimEnter * call CocActionAsync('activeExtension', 'coc-css')
autocmd VimEnter * call CocActionAsync('activeExtension', 'coc-html')
autocmd VimEnter * call CocActionAsync('activeExtension', 'coc-json')

and to make sure things you need are installed

let g:coc_global_extensions = [
          \ 'coc-html',
          \ 'coc-angular',
          \ 'coc-css',
          \ 'coc-yaml',
          \ 'coc-json',
          \ 'coc-vimlsp',
          \ 'coc-diagnostic',
          \ 'coc-actions',
          \ 'coc-eslint',
          \ 'coc-tsserver',
          \ ]

[joeveiga]

@OskarasGoborovas Thanks, that's interesting. As you can see the extension is supposedly active I went ahead and tried the autocmd anyway. It didn't work :/. I even disabled all the other active extensions to make sure it wasn't some sort of conflict.

[joeveiga]

@OskarasGoborovas Update: I switched to node version 16 and it works fine. However, the app I'm working on still requires v12. And again, vscode doesn't have this issue. @iamcco does coc-angular have a node version requirement that I'm not aware of?

[iamcco]

coc-angular should run with v12, it should be bug of @angular/language-server.

[el-og]

@OskarasGoborovas Update: I switched to node version 16 and it works fine. However, the app I'm working on still requires v12. And again, vscode doesn't have this issue. @iamcco does coc-angular have a node version requirement that I'm not aware of?

That makes sense. That's why I had the same issue, I suppose. The other project I have worked on had Node 12, but since upgrade to Node 16 everything works smoothly. It is still a bit weird that it does work on VS Code, because I remember that was pissing me off as well...

[iamcco]

As I remember VS Code has it's own runtime environment.

[iamcco]

Report to upstream https://github.com/angular/vscode-ng-language-service/issues/1664

[joeveiga]

I'll close this one cause it seems the issue is related to the language service dropping support for node v12. Thanks for the help!

[iamcco]

I have updated the README about the nodejs version requirement