Search code examples
angularjsmeteortypescriptangularangular2-meteor

How to debug typescript in angular-meteor

I followed the angular-meteor tutorial for the Socially app in Angular2. It basically works (after a few manual steps to fix package dependencies, etc), however, I am unable to debug the client side code in Chrome Dev Tools. When I navigate to the sources for my *.ts files, all I see are things like

module.export("default",exports.default=("<div> <ul> <li *ngFor=\"let party of parties\"> {{party.name}} <p>{{party.description}}</p> <p>{{party.location}}</p> </li> </ul> </div>"));

Other strange things in dev tools: my app.ts is blank. I see html files with !raw suffixes.... (e.g. app.html!raw). What is the !raw suffix and what causes that? enter image description here

How can I debug my typescript?

Solution

  • I may be able to help with some parts of your question.

    You don't mention which version of meteor you're using, but I assume version 1.4 or 1.4.0.1. I have seen that these versions of Meteor seem to have issues with sourcemaps for Typescript files (probably as they have to go through multiple transpilation steps). I don't yet know where exactly the bug lies (Meteor or the Typescript compiler package). Here's one github issue for this: https://github.com/barbatus/typescript/issues/23

    UPDATE: This issue has now been fixed.

    For now, my suggestion would be to try reverting to a 1.3.x.x version of Meteor. For something like the Socially tutorial, the easiest option is to specify the Meteor release at creation time:

    $ meteor create --release 1.3.5.1 Socially

    (list of releases is at: https://github.com/meteor/meteor/releases)

    The 'app.html' and 'app.html!raw' files are generated by the meteor angular compilers as a way of working around issues with using templateUrl and the meteor build process. My understanding is that the preferred approach is to have inline templates or import the templates like this:

    // This import loads the content of the html file into 'template'
import template from './app.html';

@Component({
  selector: 'app',
  // Instead of templateUrl, use:
  template,      // <--- 'template,' is syntactic sugar for: 'template: template,'
  directives ... etc.

    The import statement is a bit unusual, and this magic is achieved by the meteor angular pre-compiler that converts every html and css file into a couple of js files. That's what strange app.html and app.html!raw are.

    The funny characters in the first app folder seem to be a bug. Meteor tries to generate put in a computer emoji, but sometimes this gets handled incorrectly. I'm not sure if this is a bug Chrome, ChromeDevTools or Meteor. (Personally, I wish they'd ditch the emoji).