Stuck at PhoneCat Preparation Tutorial

[Derek Lin]

I am following the upgrade example at https://angular.io/docs/ts/latest/guide/upgrade.html#!#phonecat-preparation-tutorial

I am at just before the Preparing Tests section.

When I start up the server and try to run the app, I get errors (see below).  I have been trying to debug and see the issues.  I see that angular is trying to load an undefined module.  I can't figure out which module is undefined.

Any help is appreciated.  Attached is my example project, without bower_components and node_modules.

system.src.js:121 Uncaught (in promise) Error: Error: [$injector:modulerr] Failed to instantiate module phonecatApp due to:

Error: [$injector:modulerr] Failed to instantiate module undefined due to:

Error: [ng:areq] Argument 'module' is not a function, got undefined

http://errors.angularjs.org/1.4.10/ng/areq?p0=module&p1=not%20a%20function%2C%20got%20undefined

   at http://localhost:8000/app/bower_components/angular/angular.js:68:12

   at assertArg (http://localhost:8000/app/bower_components/angular/angular.js:1822:11)

   at assertArgFn (http://localhost:8000/app/bower_components/angular/angular.js:1832:3)

   at http://localhost:8000/app/bower_components/angular/angular.js:4481:11

   at forEach (http://localhost:8000/app/bower_components/angular/angular.js:341:20)

   at loadModules (http://localhost:8000/app/bower_components/angular/angular.js:4456:5)

   at http://localhost:8000/app/bower_components/angular/angular.js:4473:40

   at forEach (http://localhost:8000/app/bower_components/angular/angular.js:341:20)

   at loadModules (http://localhost:8000/app/bower_components/angular/angular.js:4456:5)

   at createInjector (http://localhost:8000/app/bower_components/angular/angular.js:4381:11)

http://errors.angularjs.org/1.4.10/$injector/modulerr?p0=undefined&p1=Error…calhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A4381%3A11)

   at http://localhost:8000/app/bower_components/angular/angular.js:68:12

   at http://localhost:8000/app/bower_components/angular/angular.js:4495:15

   at forEach (http://localhost:8000/app/bower_components/angular/angular.js:341:20)

   at loadModules (http://localhost:8000/app/bower_components/angular/angular.js:4456:5)

   at http://localhost:8000/app/bower_components/angular/angular.js:4473:40

   at forEach (http://localhost:8000/app/bower_components/angular/angular.js:341:20)

   at loadModules (http://localhost:8000/app/bower_components/angular/angular.js:4456:5)

   at createInjector (http://localhost:8000/app/bower_components/angular/angular.js:4381:11)

   at doBootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1683:20)

   at Object.bootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1704:12)

http://errors.angularjs.org/1.4.10/$injector/modulerr?p0=phonecatApp&p1=Err…calhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A1704%3A12)

   at http://localhost:8000/app/bower_components/angular/angular.js:68:12

   at http://localhost:8000/app/bower_components/angular/angular.js:4495:15

   at forEach (http://localhost:8000/app/bower_components/angular/angular.js:341:20)

   at loadModules (http://localhost:8000/app/bower_components/angular/angular.js:4456:5)

   at createInjector (http://localhost:8000/app/bower_components/angular/angular.js:4381:11)

   at doBootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1683:20)

   at Object.bootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1704:12)

   at System.register.context_1.execute (http://localhost:8000/app/js/app.module.js:41:21)

Error loading http://localhost:8000/app/js/app.module.js

[Tito]

working nicely for me. what happens when you do 

npm install

bower install

does it finish without any errors?

[Tito]

another question

how are you spinning things up?

On Thursday, April 7, 2016 at 11:03:04 PM UTC-7, Derek Lin wrote:

[Derek Lin]

I start up using npm start

You didn't get any error?  Are you using my code base?  That's strange... You didn't change anything right?

[Derek Lin]

@Tito.  You are right.  It works when I downloaded my own zip and run npm install again. (Although I am using a different computer right now)  I have no idea!  Thanks very much for checking!

Well, someone can use my zip as a base for continuing on the upgrade tutorial :)

[Derek Lin]

I think I figured out what went wrong.  I used this code as a base for the tutorial:

https://github.com/teropa/angular-phonecat/blob/d6fb83e1c2db9d1812c7c478fdb8d92301ef0061/app/js/phone_detail/phone_detail.controller.js

And it's using PhonecatDetailCtrl as the name instead of PhoneDetailCtrl as in the tutorial. So PhoneDetailCtrl was not exported:

When I do npm run tsc, it actually spells out the problem:

app/js/phone_detail/phone_detail.controller.ts(15,16): error TS2304: Cannot find name 'PhoneDetailCtrl'.

[Tito]

its good to sometimes take a break. when you have been staring at the same code for hours you get cross eyed and miss the simplest things.