Search code examples
dartangular2-routingangular2-router

How to use HashLocationStrategy for router in angular2-beta.20 in dart?


I tried to use the router in angular2-beta.20 in Dart with the HashLocationStrategy. But I couldn't find any docs, except for this link to angular2-beta.15 docs, which are incomplete. The example shows TypeScript imports instead of Dart ones.

So I tried to import package:angular2/router.dart, but the Dart Analyzer keeps complaining that it can not find LocationStrategy and HashLocationStrategy

Also I don't know, how to write the import exactly, because a top-level provide function, as in the example above, seems non existent. provide(LocationStrategy, {useClass: HashLocationStrategy})


Solution

  • After some research I found the following:

    • LocationStrategy and HashLocationStrategy are now part of package:angular2/platform/common.dart instead of package:angular2/router.dart.

    • The bootstrap()- method is platform specific, so we need to import package:angular2/platform/browser.dart.

    • We need to import package:angular2/router.dart to have ROUTER_PROVIDERS available in bootstrap() method.

    Here is a working code example for the dart file initializing :

    // needed to import "bootstrap" method
    import 'package:angular2/platform/browser.dart';
    
    // needed to import LocationStrategy and HashLocationStrategy
    import 'package:angular2/platform/common.dart';
    
    // needed for Provider class
    import 'package:angular2/angular2.dart';
    
    // needed to import ROUTER_PROVIDERS
    import 'package:angular2/router.dart'; 
    
    // import your app_component as root component for angular2
    import 'app_component.dart';
    
    void main() {
      bootstrap(AppComponent, [
        ROUTER_PROVIDERS,
        const Provider(LocationStrategy, useClass: HashLocationStrategy)
      ]);
    }
    

    Hope this helps somebody! :)