Tips for troubleshooting TypeScript files in Angular 2

Question

Tips for troubleshooting TypeScript files in Angular 2

It appears that the latest angular2 npm package does not provide a way to debug TypeScript sources. Previous solutions on Stack Overflow and Medium are outdated. I have raised an issue on GitHub, please show your support.

There are two main problems:

1) The TypeScript sources no longer point to the correct location in the npm. Instead, they reference a non-existent location within the Angular GitHub sources:


{
 "version":3,
 "file":"application_ref.js",
 "sourceRoot":"",
 "sources":["../../../../modules/@angular/core/src/application_ref.ts"] <-------
}

Although this path is irrelevant due to the usage of --inlineSources during compilation of Angular sources, the second problem persists.

2) When attempting to copy the 'modules' folder from the GitHub sources, another issue arises. The JavaScript files in the npm package are compiled into ES6 module syntax, which is not yet supported in browsers. A loader like SystemJS requires Traceur for compatibility. For instance, 'common/index.j' contains:


export { NgLocalization, CommonModule, NgClass, NgFor, NgIf, NgPlural, NgPluralCase, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet, AsyncPipe, DatePipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, SlicePipe, UpperCasePipe, VERSION, Version, PlatformLocation, LocationStrategy, APP_BASE_HREF, HashLocationStrategy, PathLocationStrategy, Location } from './src/common';

Unfortunately, using Traceur might disrupt existing source maps created for JavaScript files transpiled by Typescript compiler (tsc) so it's not a viable solution.

angular typescript

Answer 1

Answer №1

Update Recently, I raised an issue on GitHub requesting for source map support to be enabled in the Angular CLI. This discussion also covers the methods available to enable source map support immediately. Once source maps are enabled for the framework, debugging TypeScript sources will become much easier.

The transition from System.js to Webpack by Angular CLI eliminates the need for System.js, which is a personal preference of mine that aligns with not providing any information regarding System.js here.

Debugging TypeScript sources of the actual framework is not possible as source maps are only generated for compiled JavaScript, not TypeScript. However, the compiled code is easily readable and sufficient for debugging purposes. The positive aspect is that your own code can be mapped back to its original TypeScript sources.

Unfortunately, obtaining source maps for Angular against TypeScript sources without them being integrated into the framework may not be straightforward. Currently, the best option available is to debug the compiled JS code.

To put this into practice, you can create a new application using Angular CLI:

$ ng new my-app

Add a breakpoint somewhere in your code:

// src/app/app.component.ts
export class AppComponent {
  title = 'app works!';

  constructor() {
    debugger;
  }
}

Launch the development server:

$ ng serve

Access the following URL in your web browser: http://localhost:4200/. Notice how the execution pauses at the specified breakpoint and navigate through some of the framework calls in the call stack.

https://i.sstatic.net/MJROw.png https://i.sstatic.net/zCBtG.png

Answer 2

Update Recently, I raised an issue on GitHub requesting for source map support to be enabled in the Angular CLI. This discussion also covers the methods available to enable source map support immediately. Once source maps are enabled for the framework, debugging TypeScript sources will become much easier.

The transition from System.js to Webpack by Angular CLI eliminates the need for System.js, which is a personal preference of mine that aligns with not providing any information regarding System.js here.

Debugging TypeScript sources of the actual framework is not possible as source maps are only generated for compiled JavaScript, not TypeScript. However, the compiled code is easily readable and sufficient for debugging purposes. The positive aspect is that your own code can be mapped back to its original TypeScript sources.

Unfortunately, obtaining source maps for Angular against TypeScript sources without them being integrated into the framework may not be straightforward. Currently, the best option available is to debug the compiled JS code.

To put this into practice, you can create a new application using Angular CLI:

$ ng new my-app

Add a breakpoint somewhere in your code:

// src/app/app.component.ts
export class AppComponent {
  title = 'app works!';

  constructor() {
    debugger;
  }
}

Launch the development server:

$ ng serve

Access the following URL in your web browser: http://localhost:4200/. Notice how the execution pauses at the specified breakpoint and navigate through some of the framework calls in the call stack.

https://i.sstatic.net/MJROw.png https://i.sstatic.net/zCBtG.png

Answer 3

Answer №2

In the most recent version of Angular 2, Webpack is now being used instead of SystemJS. These two systems operate in distinct ways.

SystemJS loads sources as needed and also converts TypeScript to JavaScript directly within the browser. Webpack compiles the application from the sources first, making it faster. This means that your browser does not have to handle all the work.

When attempting to debug libraries like Angular, you may need to provide Webpack with some guidance by configuring your webpack file.

It's unclear if Angular CLI provides this support right off the bat. It's also worth exploring Webpack for debugging options.

I regret that I am unable to offer any further assistance on this topic.

Answer 4

In the most recent version of Angular 2, Webpack is now being used instead of SystemJS. These two systems operate in distinct ways.

SystemJS loads sources as needed and also converts TypeScript to JavaScript directly within the browser. Webpack compiles the application from the sources first, making it faster. This means that your browser does not have to handle all the work.

When attempting to debug libraries like Angular, you may need to provide Webpack with some guidance by configuring your webpack file.

It's unclear if Angular CLI provides this support right off the bat. It's also worth exploring Webpack for debugging options.

I regret that I am unable to offer any further assistance on this topic.

Tips for troubleshooting TypeScript files in Angular 2

Answer №1

Answer №2

Similar questions

Creating a Build-Free Workflow in a TypeScript Monorepo

Sticky header in React data grid

A step-by-step guide on integrating Azure Cognitive Search within a SharePoint Online SPFx webpart

Having trouble with Vue i18n and TypeScript: "The '$t' property is not recognized on the 'VueConstructor' type." Any suggestions on how to resolve this issue?

Global registration of router directives with Angular router RC3 is required

Tips on pre-filling a form using ngModel bindings

Error: Angular project unable to locate Auth0 module

What is the best way to set up an endpoint in Angular for image uploading?

"Troubleshooting a case where mongoDB's updateOne function is

The problem with MUI SwipeableDrawer not being recognized as a JSX.Element

When is the AbortSignal in the TanStack useQuery function considered as undefined?

Any idea how to resolve this typescript typing issue: "The argument, either a string or number, cannot be assigned to the parameter of type 'SetStateAction<string>'"?

How to implement Dragula and Angular to enable draggable elements to be dropped in any position within their container?

Error: The checkbox was clicked, but an undefined property (includes) cannot be read

Display the notification list by utilizing the "ToastController" function

Is it possible to import a custom module after an Angular 2 app has been bootstrapped?

Creating a TypeScript function that utilizes generics to automatically infer the return type

What is the method for adjusting the border color of an ng-select component to red?

Feeling lost about arrow functions in JavaScript

Looking for help with setting up Nodemailer and installing it via NPM