angular2-meteor sample stopped working after meteor update

Question

I'm just going through the Meteor Angular 2 Tutorial. At step 6 I randomly tried 'meteor update' which crashed my sample. Update worked and server is starting. However the browser screen stays now empty and in the console appears an error. Since I'm new to meteor I not able to figure out the reason why?

Reloading in browser ends up with the following error message in console:

Uncaught SyntaxError: Unexpected token <

Uncaught (in promise) Uncaught SyntaxError: Unexpected token <
    Evaluating http://localhost:3000/client/app.js
    Error loading http://localhost:3000/client/app.js

Update command console output:

meteor update
This project is already at Meteor 1.2.1, the latest release.

Changes to your project's package version selections from updating package
versions:

barbatus:angular2       upgraded from 0.6.6 to 0.7.3
barbatus:ng2-compilers  upgraded from 0.1.0 to 0.1.1
barbatus:ts-compilers   upgraded from 0.1.8 to 0.1.9_5
barbatus:typescript     upgraded from 0.1.3 to 0.1.3_3
urigo:angular2-meteor   upgraded from 0.2.5 to 0.3.5

Restarting meteor:

meteor    

=> Started proxy.                             
=> Started MongoDB.                           
***** New typings have been added *****      |
typings/angular2/core.d.ts
typings/angular2/common.d.ts
typings/angular2/bootstrap.d.ts
typings/angular2/platform/browser.d.ts
typings/es6-promise/es6-promise.d.ts
typings/es6-shim/es6-shim.d.ts
***** Please re-start your app *****

meteor    

=> Started proxy.                             
=> Started MongoDB.                           
=> Started your app.                          

=> App running at: http://localhost:3000/

Lynsey

There are some questions with similar errors and they seem to be all about missing imports. – Demeanor

I'm going one to one through the samples. Problem just appears after update. Didn't find the same/similar question. Which question are you referring to @GünterZöchbauer – Lynsey

stackoverflow.com/… – Demeanor

Not sure, but I think Angular splits the modules from angular2/angular2 into angular2/common, angular2/core ... . So you have to load them individually. As far as I can remember I had problems with this – Fieldstone

Answer 1

Angular2 has changed and you'll need to import specific packages for each dependency. The Angular2 Meteor Tutorial is out of date. I'm not sure which packages should be imported to make Step 6 work, but as an example, Step 0 Bootstrapping would work with the following change:

In your app.ts change the line:

import {Component, View, bootstrap} from 'angular2/angular2';

to:

import {bootstrap}    from 'angular2/platform/browser'
import {Component, View} from 'angular2/core';

Also, there are some updates for the tutorial here

Hope it helps.

UPDATE: I've found out that http://ng-meteor.meteor.com/tutorials/angular2/ is deprecated. I would recommend you to follow http://www.angular-meteor.com/tutorials/socially/angular2/ instead.

Pull