0

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?

Improve this question
2
  • Since the browser isn't aware of and can't process type script as far as I know you currently need to rely on an interactive debugger from your IDE to manage mapping the statements and breakpoints between the typescript and the JS using source mapping. Also see stackoverflow.com/questions/29434401/… Commented Aug 4, 2016 at 17:06
  • Meteor plugins convert the typescript to javascript (plus source maps) during the build process, so the browser only ever executes regular javascript. The debugger debugs javascript, but the debugger (the browser dev tools, or IDE) uses the source maps to translate positions back to the .ts files (but the actual type of file is irrelevant). Commented Aug 10, 2016 at 20:59

1 Answer 1

Reset to default
1

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).

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Great explanation, that answers my questions. I ended up working around the sourcemap issue by recreating the project. I assume something in the build/working folder was in a bad state.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.