Source, Ingest, Prepare, Analyze and Consume
A short list of build errors and resolution;
To update CLI, refer to this link;
https://angular.dev/update-guide
If you are using latest CLI and still see the error, then run this in your project;
npm i @angular-devkit/build-angular@18 --forceTODO.. add any other errors
If you are building a Single Page Application / JavaScript Web application using Visual Studio, you’ve probably already run into the overlap between tooling that surrounds npm and the tooling within Visual Studio.
One of these tasks is preventing Visual Studio from being responsible for building TypeScript and allowing your tooling (i.e. Webpack, Gulp, Grunt) to be in charge instead. The idea here is that your tooling has been configured to lint, minify, build, concat, bundle, copy, whatever all of your project files exactly as you desire. At this point you don’t really need MSBuild involved in transpiling your JavaScript to TypeScript as it would be redundant and often times problematic. To prevent Visual Studio from doing any compilation of TypeScript preform the following steps:
TypeScript and any build process you are using will work together based on the configuration in tsconfig.json. This file can be hand-rolled from scratch, or may have been generated for your project from a process like ng new and the Angular CLI. You can also generate a default tsconfig file (recommended approach as opposed to creating from scratch) using the following command:
tsc --init
This will generate a default configuration file for TypeScript compilation. Your web-client’s code build process will need to point to this file and using it as a driver for the TypeScript compilation behavior.
Within Visual Studio, right-click your project and select the option to edit the .csproj file. These options are in a XML format and the following needs to be added:
<PropertyGroup>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
</PropertyGroup>
If you still want MSBuild to handle your TypeScript compilation there are several options that will change the behavior:
Reference
https://www.typescriptlang.org/docs/handbook/compiler-options-in-msbuild.html
jQuery and Angular are two different technologies and have different paradigms; Angular embraces a declarative approach to DOM manipulation, while jQuery uses a more imperative style. Mixing these paradigms can lead to confusion and harder-to-maintain code.
Some third-party libraries still rely on jQuery. In such cases, we can use jQuery to integrate these libraries into our Angular application.
// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install --save @types/jquery
// Now, within any of the app files (ES2015 style)
import * as $ from 'jquery';
//
$('#elemId').width();
// OR
// CommonJS style - working with "require"
import $ = require('jquery')
//
$('#elemId').width();
Sep - 2024Lately, I’m writing code with ES6 instead of typescript and am able to import without * as $ in the import statement. This is what it looks like now:
import $ from 'jquery';
//
$('#elemId').width();Reference
https://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular
https://dkreider.medium.com/how-to-use-jquery-with-angular-111fbe6b406f