hannahhoward / a1atscript

The Angular 2 Polyfill
MIT License
101 stars 7 forks source link

Is New Router required to use the Angular 2 syntax? #6

Closed timkindberg closed 9 years ago

timkindberg commented 9 years ago

Ready for your first tech support issue? :) Cool project by the way!!

I'm trying to use the Angular 2 syntax, like this:

// main.js
import 'babelify/polyfill';
import 'angular';
import {AsModule, Component, View, bootstrap} from 'a1atscript';

@AsModule('list', [])
@Component({
    selector: "app"
})
@View({
    inline: "<div><h1>App Loaded</h1></div>"
})
class ListApp {
}

bootstrap(ListApp);
// index.html
<app></app>

I am seeing nothing, am I missing something? I see within your bootstrap function here...

export function bootstrap(appModule, appPrefix = "") {
  var injector = new Injector(appPrefix);
  var moduleName = injector.instantiate(appModule);
  Router.routeInitializer.initialize(moduleName, appModule);
}

...you are initializing the module with the Router. Is that the ng1 router or the ng2 router? I'd prefer not to use the ng2 router just yet. In fact I'd like to not use any router just yet. Also when I tried to add ng-app="list' to my index.html, that threw an error.

I'm seeing go into your library's code and it gets all the way through RouteInitializer.initialize, but then no more code seems to run...

hannahhoward commented 9 years ago

Good news! No you don't need to have the new Angular router to use Angular 2 syntax. If you did deep in the code, you'll see that the routing code essentially disables itself if the Angular 2 router isn't present.

What you will lose is the ability to specify routes on components. However, since the new Angular Router is in such a messy state (grr!), I am looking at whether I can make this syntax work with ui-router. We'll -- no promises on when this will be implemented.

Gonna close this issue for now. If you have any trouble using w/o out the new router, let me know and I'll re-open it.

timkindberg commented 9 years ago

Thanks for answering so quick!

When I don't include the new router I get the warning:

Uncaught Error: [$injector:unpr] Unknown provider: $routerProvider <- $router
http://errors.angularjs.org/1.4.0/$injector/unpr?p0=%24routerProvider%20%3C-%20%24router

I'll try to mock out the $router service for now. Thanks again!

timkindberg commented 9 years ago

Ok so this mock $router service seemed to hush the errors:

@Service('$router', [])
export class RouterMock {
    config(){}
}

Then in my app component:

@AsModule('list', [RouterMock])
@Component({
    selector: "app"
})
@View({
    inline: "<div><h1>App</h1></div>"
})
class ListApp {
}

bootstrap(ListApp);

Also I forgot to mention that I would LOVE ui-router support via the @RouteConfig!!! Brilliant work thanks!

timkindberg commented 9 years ago

I do feel like this should be reopened since the router is required (or the mock that I posted)

hannahhoward commented 9 years ago

Hi Tim, can you try the latest 0.4.0 version? I believe I've finally gotten rid of the router dependency, but double check.