Encountering an Error in TFS Build When Running Angular2 Code

I am facing an issue with my development setup: I have a .net Wepapi project as Backend and a Frontend written with Angular2, both included in a visual studio solution. While the build works fine locally, it fails when using the TFS Online build in my CD Pipeline. The error message I receive is:

Build: Cannot find module '@angular/core'.

along with some other related errors.

Here is my package.json file content:

{
  "name": "emersy",
  "version": "1.0.0",
  // More code...
}

This is my typings:

{
  "globalDependencies": {
    // Typings information...
  }
}

And here is my tsconfig:

{
  "compileOnSave": true,
  "compilerOptions": {
    // Compiler options...
  }
}

Note that I use xaml build and not the new build engine.

This is my systems.js.config:

(function (global) {
    System.config({
        // System config settings...
    });
})(this);

EDIT1: After migrating to vnext build, the deployment on my Azure app was successful but the Angular code does not work. I get the following error:

mysite.azurewebsites.net/:38 Error: (SystemJS) Unexpected token <
    SyntaxError: Unexpected token <
    Evaluating http://mysite.azurewebsites.net/app/main.ts
    Error loading http://mysite.azurewebsites.net/app/main.ts

It seems like npm modules are not being copied properly.

Here is my build configuration: https://i.sstatic.net/LDbwC.png

EDIT 2: https://i.sstatic.net/3mzul.png

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

EDIT 3: MSBuild Arguments

/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:PackageLocation=$(build.stagingDirectory)

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

Answer №1

Upon transferring the build to vnext, the build is now functioning properly without any errors. I have also included deployment to my azure app as a build step. However, after deploying the app on Azure, my angular code is not working correctly.

mysite.azurewebsites.net/:38 Error: (SystemJS) Unexpected token <
    SyntaxError: Unexpected token <
    Evaluating http://mysite.azurewebsites.net/app/main.ts
    Error loading http://mysite.azurewebsites.net/app/main.ts

It appears that npm modules are not being copied over correctly.

This is my current build configuration: https://i.sstatic.net/LDbwC.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

Combine a collection of promises into a single promise that may contain either strings or numbers: [P<string>, P<number>] -> Promise<string | number>

I'm currently working on a function that aims to retrieve the first resolved value from an array of Promises const findFirstResolvedValue = (...promises: Array<Promise<any>>): Promise<any> { // ... } const result = findFirstResol ...

Error encountered when attempting to utilize Path Aliases in Angular 11.tsconfig

Currently, I am working on a project using Angular 11 and aiming to utilize short imports like import {smthg} from '@common' instead of import {smthg} from '../../../common' However, I keep encountering errors in IDEA: TS2307: Cannot f ...

I'm seeking assistance in grasping the concept of the useState generic definition. Can anyone help

I recently came across a new definition for useState generics in a TS course, but it was briefly covered and I'm still struggling to fully grasp it. function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>&g ...

Expanding the table to display additional rows using pagination in an Angular application

I have implemented a table in Angular that displays data fetched from an API. The requirement is to initially display only the first 5 rows and provide an option for users to view more rows (in groups of 5) with pagination support. Below is the code snipp ...

Tips for managing an array of observable items

In my current project, I am working with an Angular application that receives a collection from Firebase (Observable<any[]>). For each element in this collection, I need to create a new object by combining the original value with information from ano ...

The issue with the Bootstrap 5 navbar in an Angular project is that it expands properly but fails to close when

I am currently working on developing a Single Page Application using Angular 12 and Bootstrap 5. As part of this project, I have created a shared navbar component. The issue I am facing is that when the navbar transitions to the hamburger menu button for ...

Experiencing a platform browser error since updating to Ionic 5 from Ionic 4

ERROR: Uh-oh! Looks like there's an issue in the node_modules directory. The error message reads: ERROR in node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.d.ts(15,10): error TS2305: Module '"node_modules/@angular/compiler ...

Eliminate the usage of JSON.stringify in the Reducer function

I have a system where I store chat messages in a dictionary with the date as the key and a list of messages as the value. Whenever a new message is added, the following code snippet is executed. Is there a way to enhance the existing code to eliminate the ...

What is the best method to monitor HTTP errors when making multiple API calls?

Can someone guide me on how to handle http-errors when making repeated API calls? I've been experimenting with loading mock images from lorempicsum and I want to properly catch any http-errors that may occur. I attempted to use rxjs catchError() wit ...

Deploying an Angular-cli project to Digital Ocean

I am encountering an issue while trying to run my Angular 2 app on Digital Ocean. Despite successfully deploying my app on a cloud server, I am unable to connect to it on the specified port as the server does not respond. This is puzzling me as I have be ...

Creating Typescript types based on the values of other props: A guide

Can the TypeScript prop type be dynamically changed based on the runtime value of another prop? For instance type MyComponent = { propA: boolean | string propB: typeof propA boolean ? number : string } Is it feasible to determine the prop type of p ...

Receive regular updates every week for an entire month using Javascript

How can I calculate the number of check-ins per week in a month using Javascript? I have been unable to find relevant code for this task. Specifically, I am interested in determining the total count of user check-ins on a weekly basis. For example, if a u ...

In React TypeScript, how can I define an object that exclusively stores boolean values?

Recently, I migrated my code from React JavaScript to TypeScript, and now I'm facing a dilemma about the type declaration. I want to avoid using the type any if possible: const [responseStatus, setResponseStatus] = React.useState<any>({ em ...

Tips for asynchronously adding data (requires two iterations) to an API service in Angular

I have a json file structured as follows: { "users": [ { "id": "person1", "information": [ { "first_name": "Mike", "last_name": "Patty" ...

Steps to revert table data back to its original state after editing in Angular 12 template-driven form

Currently, I have implemented a feature in my web application where users can edit table data by clicking on an edit hyperlink. Once clicked, cancel and submit buttons appear to either discard or save the changes made. The issue I'm facing is related ...

typescript optimizing initial load time

When importing the npm package typescript, it typically takes around 0.3 seconds. Is this considered an acceptable load time? Are there any steps that can be taken to optimize performance? The code snippet in index.js demonstrates the process: import &apo ...

What steps are involved in installing Angular 2 through NPM?

Currently, I am in the process of setting up my personal local development environment for an Angular 2 application without utilizing the QuickStart seed mentioned on the official Angular 2 website or the Angular CLI due to the surplus files that come with ...

Trouble installing TypeScript on MacBook - Terminal Glitch

I recently got Visual Studio Code on my Mac and wanted to add TypeScript for Angular. I believe I already installed Node.js or Git in the past. However, when I tried running this command from the TypeScript website in the Mac Terminal to install TypeScript ...

Issue encountered when attempting to import a module within the ionic framework

I encountered an issue in my project (built with the ionic-framework 3) where I included the following line to import the dialogflow module: const dialogflow = require('dialogflow'); However, when compiling, it resulted in the error message: ...

What are the steps to confirm that a file has been successfully downloaded using TestCafe?

Imagine needing to confirm the download of a file by first downloading it and then checking if the file is in the designated folder. ...