pbastowski / angular2-now

Angular 2 @Component syntax for Angular 1 apps
MIT License
145 stars 15 forks source link

Create state without component? #10

Closed vacarsu closed 9 years ago

vacarsu commented 9 years ago

I'm trying to create a state without a component. The error I get is:

Failed to instantiate module vdexter due to:
Error: [$injector:modulerr] Failed to instantiate module angular-meteor due to:
Error: [$injector:unpr] Unknown provider: $urlRouterProvider

the state I'm trying to create:

@State({ 
  name: 'home', 
  url: '/home' 
})

@Inject([])
class home {
  constructor() {
  }
}

and how do I add a view to the state, since templateUrl doesn't seem to work in @ State

pbastowski commented 9 years ago

Did you do the following?

meteor add angularui:angular-ui-router

And in your code

SetModule('myApp', ['angular-meteor', 'ui.router']);

vacarsu commented 9 years ago

Yes I have ui router installed and I have SetModule in my app.es6.js file. I think it was a load order issue, I made app.es6.js load first by putting it in /client/lib, now I get Uncaught Error: [$injector:modulerr] Failed to instantiate module vdexter due to: TypeError: Cannot read property 'length' of undefined

pbastowski commented 9 years ago

Do a

meteor update

on your project. I've made a small change that should fix things for you.

And then have a look at this: http://jsbin.com/tipeqa/edit?html,js,output for a working example.

SetModule('my-app', ['ui.router']);

@State({ 
  name: 'root', url: '', defaultRoute: 1, 
  templateUrl: 'root.html'
})
class rootRoute {
  constructor() {
    console.log('Root Route');
  }
}

bootstrap(rootRoute);
vacarsu commented 9 years ago

I ran meteor update and added templateUrl, still getting the following error.

Uncaught Error: [$injector:modulerr] Failed to instantiate module vdexter due to:
TypeError: Cannot read property 'length' of undefined
    at http://localhost:3000/packages/pbastowski_angular2-now.js?2fbbfd80dde4c5fe5a78e7bf9b7efae0f0593e03:477:77
    at Object.invoke (http://localhost:3000/packages/angular_angular.js?189b3e78cb97be1a5ce2a67042cbc7de893fa8c1:4473:17)
    at runInvokeQueue (http://localhost:3000/packages/angular_angular.js?189b3e78cb97be1a5ce2a67042cbc7de893fa8c1:4379:35)
    at http://localhost:3000/packages/angular_angular.js?189b3e78cb97be1a5ce2a67042cbc7de893fa8c1:4388:11
    at forEach (http://localhost:3000/packages/angular_angular.js?189b3e78cb97be1a5ce2a67042cbc7de893fa8c1:366:20)
    at loadModules (http://localhost:3000/packages/angular_angular.js?189b3e78cb97be1a5ce2a67042cbc7de893fa8c1:4369:5)
    at createInjector (http://localhost:3000/packages/angular_angular.js?189b3e78cb97be1a5ce2a67042cbc7de893fa8c1:4295:11)
    at doBootstrap (http://localhost:3000/packages/angular_angular.js?189b3e78cb97be1a5ce2a67042cbc7de893fa8c1:1651:20)
    at Object.bootstrap (http://localhost:3000/packages/angular_angular.js?189b3e78cb97be1a5ce2a67042cbc7de893fa8c1:1672:12)
    at HTMLDocument.onReady (http://localhost:3000/packages/pbastowski_angular2-now.js?2fbbfd80dde4c5fe5a78e7bf9b7efae0f0593e03:398:21)
http://errors.angularjs.org/1.4.1/$injector/modulerr?p0=vdexter&p1=TypeErro…wski_angular2-now.js%3F2fbbfd80dde4c5fe5a78e7bf9b7efae0f0593e03%3A398%3A21)REGEX_STRING_REGEXP @ angular.js:68(anonymous function) @ angular.js:4378forEach @ angular.js:336loadModules @ angular.js:4339createInjector @ angular.js:4265doBootstrap @ angular.js:1621bootstrap @ angular.js:1642onReady @ angular2-now.js:365jQuery.Callbacks.fire @ jquery.js:3143jQuery.Callbacks.self.fireWith @ jquery.js:3255jQuery.extend.ready @ jquery.js:3467completed @ jquery.js:3498

I put up a repo so you can see how I am doing this. I'm probably just missing something. Still getting used to meteor, and your library. https://github.com/vacarsu/vdexter

pbastowski commented 9 years ago

If you push your repo to github then i can have a look at what's wrong. Did you look at the link I sent you earlier. It actually works.

vacarsu commented 9 years ago

I sent the link in the previous comment do you not have access to see it? I did look at the example and I have it setup up like that not sure where the error is coming from.

pbastowski commented 9 years ago

Sorry, I'm not at the computer now :)

vacarsu commented 9 years ago

That's okay no rush. I'll keep messing around with it maybe I'll figure it out.

pbastowski commented 9 years ago

OK, so the reason you get the error is because you have an @Inject with an empty list :) Omit the @Inject until you have something that should be injected, see below.

image

vacarsu commented 9 years ago

Hah okay thanks for your help works perfectly now. :)

pbastowski commented 9 years ago

I have pushed a fix for the above error. So, if you provide @Inject with an empty array it will just ignore it.

meteor update
vacarsu commented 9 years ago

Is there any other reason why I would be getting TypeError: Cannot read property 'length' of undefined again? it just randomly started happening again with or without @Inject I updated the repo if you want to check.

vacarsu commented 9 years ago

It seems if I update to angular2-now from 0.2.9 to 0.3.1 the update doesn't take. I've tried from the command line and by hand in the versions file.

edit: I got it updated to the most recent version by removing the package and reinstalling it. If I remove @Inject or leave it blank it works fine, but as soon as I actually inject something I get that error.

pbastowski commented 9 years ago

@vacarsu good pickup :) Thanks for reporting this new error. I have fixed it and pushed version 0.3.2.

Regarding updating to new package versions, before doing a meteor update I always stop Meteor first. Then, I update and start Meteor again. I do this, because it is my experience that if Meteor is running and I do a meteor update, the update doesn't seem to take with any package. Even though Meteor says it has upgraded.

vacarsu commented 9 years ago

Okay I will start stopping meteor before updating. And thanks for the quick updates!