TypeScript not building with Azure Hosted Agent

Question

I have an ASP.NET MVC application written in .Net5.

This uses typescript files and I have NuGet package references to the following:

<PackageReference Include="BuildBundlerMinifier" Version="3.2.449" />
<PackageReference Include="Microsoft.TypeScript.MSBuild" Version="4.0.3">
  <PrivateAssets>all</PrivateAssets>
  <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
<PackageReference Include="Microsoft.Web.LibraryManager.Build" Version="2.1.113" />

In my project I have:

Folder called node-modules (not pushed to Azure Devops)
bundleconfig.json
gulpfile.js
libman.json
package.json (+ package-lock.json)

The package.json is:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "gulp": "4.0.2",
    "del": "5.1.0",
    "@types/bootstrap": "4.5.0",
    "@types/google.visualization": "0.0.53",
    "@types/jquery": "3.5.1",
    "@types/jqueryui": "1.12.13",
    "@types/jquery.datatables": "1.10.36",
    "@types/jquery.ui.datetimepicker": "0.3.29"
  }
}

When I compile in Visual Studio 2019 (latest) it compiles perfectly, everything works as expected.

I did however get in the Build Output (Information):

Package restore on project open is disabled. Change the npm package management settings in Project Properties to enable restore on project open.

I found the setting "Restore On Project Save" and changed this to true. That added the following to my csproj file:

<ProjectExtensions><VisualStudio><UserProperties appsettings_1qaf_1json__JsonSchema="https://gitpod.io/schemas/gitpod-schema.json" NpmRestoreOnProjectOpen="True" /></VisualStudio></ProjectExtensions>

I pushed this up to Azure DevOps, but when the agent builds it (some steps removed for clarity):

variables:
  solution: '**/*.sln'
  buildPlatform: 'Any CPU'
  buildConfiguration: 'Release'

steps:

- task: NuGetToolInstaller@1

- task: NuGetCommand@2
  inputs:
    command: 'restore'
    restoreSolution: '**/*.sln'
    feedsToUse: 'select'

- task: VSBuild@1
  inputs:
    solution: '$(solution)'
    platform: '$(buildPlatform)'
    configuration: '$(buildConfiguration)'
    clean: true

I get the following error:

##[error]MyApp\Scripts\MyTypeScript.ts(13,9): Error TS2581: Build:Cannot find name '$'. Do you need to install type definitions for jQuery? Try npm i @types/jquery.

So, the hosted agent is evidently not retrieving the types. I'm guessing I need to adjust my YAML file, but unsure how...

Kevin Lu · Accepted Answer · 2020-12-04 01:37:53Z

3

According to the error message and the Yaml definition, it seems that you are missing the steps of NPM Install to install required npm packages.

VSBuild task itself can only restore nuget packages but cannot install npm package, so you need to add additional tasks to install npm packages.

Here is my example: you could try to add a Npm Install task before the VSBuild task.

variables:
  solution: '**/*.sln'
  buildPlatform: 'Any CPU'
  buildConfiguration: 'Release'

steps:

- task: NuGetToolInstaller@1

- task: NuGetCommand@2
  inputs:
    command: 'restore'
    restoreSolution: '**/*.sln'
    feedsToUse: 'select'

- task: Npm@1
  displayName: 'npm install'
  inputs:
    workingDir: '$(build.sourcesdirectory)'
    verbose: false


- task: VSBuild@1
  inputs:
    solution: '$(solution)'
    platform: '$(buildPlatform)'
    configuration: '$(buildConfiguration)'
    clean: true

Result:

It could work fine.

answered Dec 4, 2020 at 1:37

Kevin Lu

36.8k4 gold badges36 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DrGriff Over a year ago

Solved for me. Just FYI, the package.json file was in the same path as my *.csproj file, so I just had to amend the answer above to have workingDir: 'MyApplicationName'.

Collectives™ on Stack Overflow

TypeScript not building with Azure Hosted Agent

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related