Problems encountered while building TypeScript on Azure's Hosted Agent

I'm currently working on an ASP.NET MVC application built in .Net5 that utilizes TypeScript files and includes NuGet package references for 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" />

Within my project structure, I have:

  • A folder named node-modules (not pushed to Azure Devops)
  • bundleconfig.json
  • gulpfile.js
  • libman.json
  • package.json (+ package-lock.json)

The contents of my package.json are as follows:

{
  "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"
  }
}

While compiling in Visual Studio 2019, everything functions correctly but I encountered a warning in the Build Output:

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

To resolve this, I set "Restore On Project Save" to true, which added the following snippet to my csproj file:

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

After pushing the changes to Azure DevOps, I encountered errors when building with the hosted agent:

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

This resulted in the error message:

##[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.

It appears that the hosted agent is not retrieving the necessary types. I suspect adjustments are needed in my YAML file, but I am unsure of the correct approach...

typescriptnpmazure-devopstypescript-typingsazure-pipelines-build-task

Answer №1

Upon reviewing the error message and the Yaml definition, it appears that there is a missing step for NPM Install in order to install necessary npm packages.

The VSBuild task itself is only capable of restoring nuget packages and cannot handle the installation of npm packages. Therefore, additional tasks need to be added to facilitate the installation of npm packages.

One potential solution is to incorporate a Npm Install task prior to the execution of 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:

This approach should resolve the issue effectively.

https://i.sstatic.net/qBpWe.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountered an issue while initiating the process 'command 'npm'' in Gradle on a Mac device

My MacOS system has IntelliJ Idea installed along with Gradle version 4.10.2 for building projects. NodeJS and NPM are also installed and accessible from the command line. node -v v16.14.0 npm -v 8.1.0 However, when running a Gradle task that utilizes NOD ...

node.jsmacosgradlenpmintellij-idea

Discover the wonders of utilizing @blur events on your custom Vue components!

Trying to create a customized component that mimics an input field with validation, I'm encountering issues with getting @Change, @blur, and other events to function properly as they would on a standard input field. This is the structure of my custom ...

typescriptvue.jsvuejs2vue-componentvuejs3

A property in TypeScript with a type that depends on the value of an object

How can we troubleshoot the error not displaying in Typescript and resolve it effectively? Explore Typescript sandbox. enum Animal { BIRD = 'bird', DOG = 'dog', } interface Smth<T extends Animal = Animal> { id: number; a ...

typescript

Only one choice for discriminated unions in react props

Looking to create a typescript type for react component props, specifically a basic button that can accept either an icon prop or a text prop, but not both. My initial attempt with a discriminated union didn't quite produce the desired outcome: inter ...

reactjstypescript

Encountering issues while starting npm

When using NPX to create a React app, the "npm start" command is throwing an error even though "npm install" runs smoothly. The error message that I'm encountering is as follows: > react-scripts start i ｢wds｣: Project is running at http://10. ...

reactjsnpmreact-reduxnpm-start

Utilizing an object's value as a key for a separate object

Here's an overview of my current object structure: import { imageOne, imageTwo } from "./images"; export const imageKeyMap = { "one": imageOne, "two": imageTwo } The definitions for imageOne and imageTwo ...

typescript

Encountering Compilation Issues Post Upgrading to Angular 9

I recently upgraded my Angular application from version 8 to version 9, following the official guide. However, after the upgrade, I encountered errors that prevent my application from building. The specific errors include: "Module not found: Error: Can ...

angulartypescript.net-coreangular-materialangular-cli

Is there a workaround in TypeScript to add extra details to a route?

Typically, I include some settings in my route. For instance: .when('Products', { templateUrl: 'App/Products.html', settings: { showbuy: true, showex ...

javascriptangularjstypescript

Webclipse is having trouble locating a module, despite the fact that Angular CLI is able to

I am facing an issue with my project structure src | +--app | +--components | | | +-component.ts | +--entities | +--entity.ts In entity.ts, I have export class Entity { ... In component.ts, there is an import statement ...

angulartypescriptimportcompiler-errors

Using NPM scripts in Windows console: Understanding 'set' variables

When executing this code in the Windows console, it behaves as expected: set A="qwerty" && echo %A% The output displays: "qwerty" However, when attempting to run the same commands within NPM scripts: package.json: "scripts": { "qwerty": "set ...

npmcmdpackage.jsonnpm-scripts

Error: 'next' is not defined in the beforeRouteUpdate method

@Component({ mixins: [template], components: { Sidebar } }) export default class AppContentLayout extends Vue { @Prop({default: 'AppContent'}) title: string; @Watch('$route') beforeRouteUpdateHandler (to: Object, fro ...

typescriptvue.jsvuejs2decoratorvue-router

Building a BaseObserver in TypeScript with RxJS

Initially, I created a class called BaseObserver in Swift. In the subscribe method, I pass this class. Now, I am attempting to achieve the same functionality in RxJS using TypeScript. This approach proves useful when you need to execute actions both befor ...

typescriptrxjsrx-swiftreactivex

Upon introducing the CSS loader into the webpack configuration, TinyMCE unexpectedly ceases to function

My application development journey began with cloning code from https://github.com/DMPRoadmap/roadmap. This project is based on webpack and npm. To integrate select2, I executed npm install select 2 in the lib/assets directory. I aimed to incorporate a ...

javascriptruby-on-railsnpmwebpacktinymce

Having trouble getting gulp-ruby-sass or gulp-sass to function properly

I have been encountering issues with gulp-ruby-sass and/or gulp-sass as they do not seem to work for me despite having what I believe is the correct setup. I have searched through several other Stack Overflow posts but none of the solutions provided has wo ...

rubysassnpmgulp-sass

Unable to assign an argument to a function in commander.js

Having some trouble passing an option to a custom command in commander.js... program .command('init [options]') .description('scaffold the project') .option('-b, --build', 'add "build" folder with subfolders') . ...

javascriptnode.jsnpm

"Utilizing the power of Angular 6's JSON pipe

Looking for a well-structured formatted JSON, but all I get is confusion and this strange image: Does anyone have any insights on what might be causing the issue? HTML <span style="font-weight: 500;">Payload Data: </span> <pre><co ...

htmlcssangulartypescript

Error: The identifier 'pipefail' was not expected in this context

I encountered an issue while attempting to deploy a NodeJS app (created with NextJS) using pm2. I followed the guidance outlined here. After executing the pm2 start command, everything appeared to be running smoothly, as evidenced by the snippet below. ...

node.jsnpmnext.jspm2

Having trouble getting PostCSS to work with Laravel Mix, SCSS, and Tailwind CSS outside of Laravel environment?

Struggling to fine-tune the integration of tailwindcss with postCss using laravel-mix and Scss. While running npm run dev generates correct css, the production build from npm run prod fails to export the classes utilized in my HTML templates. package.json ...

npmlaravel-mixpostcsstailwind-css

Can Material UI be defined as a peerDependency while maintaining its types as a DevDependency?

Is there a way to set Material UI as a peerDependency while keeping its types as DevDependency? I'm currently working on a component library using React + Typescript, with components based on Material UI and Rollup as the module bundler. For example ...

reactjstypescriptmaterial-uirolluppeer-dependencies

Error encountered when attempting to utilize ngTemplate to embed filter within a table

I am facing an issue with a component that includes a primeng table. Within a table row, I have an ng-container to project a p-columnFilter into the table from an external source. However, when trying to pass the filter into the template, I encounter a Nul ...

angulartypescriptdependency-injectionprimeng