CODEWITHSUNDEEP
angular
Vincent Bilodeau
Vincent Bilodeau

Reputation: 179

Angular2 Router - how to make it work properly

Trying to work with the Router of angular2 and still nothing work after trying many example...

i use Alpha 44

here is the super usefull error: Regex

Hide network messages
All
Errors
Warnings
Info
Logs
Debug
Handled
.
angular2.dev.js:21835 TypeError: Cannot read property 'toString' of undefined(…)
angular2.dev.js:10713 ## _onError ##
angular2.dev.js:10714 TypeError: Cannot read property 'get' of undefined
    at angular2.dev.js:19620
    at Zone.run (angular2.dev.js:138)
    at Zone.run (angular2.dev.js:10644)
    at NgZone.run (angular2.dev.js:10607)
    at ApplicationRef_.bootstrap (angular2.dev.js:19615)
    at Object.commonBootstrap (angular2.dev.js:26650)
    at Object.bootstrap (angular2.dev.js:27475)
    at execute (app/bootstrap.ts!transpiled:15)
    at p (system.js:4)
    at Object.execute (system.js:5)
angular2.dev.js:138 Error: Cannot read property 'get' of undefined(…)

here is my code at the moment:

bootstrap.ts

import {App} from './app.ts';
import {bootstrap} from 'angular2/angular2';
import {routerInjectable} from 'angular2/router';

bootstrap(App, [routerInjectable]);

index.html

<html>
<head>
    <title>Angular 2 Todo App</title>

    <link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <link href="node_modules/font-awesome/css/font-awesome.css" rel="stylesheet" />

    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>

    <script src="node_modules/lodash/index.js"></script>

    <script>
        System.config({
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true }
        });

        System.import('./app/bootstrap.ts').catch(console.error.bind(console));
    </script>
</head>


<body style="padding-top: 50px;">
    <app>Loading...</app>
</body>
</html>

what am i doing wrong ?

Upvotes: 0

Views: 606

Answers (1)

Vincent Bilodeau
Vincent Bilodeau

Reputation: 179

i needed to ask a question.... to find the answer few minutes later on github ;)

Here is the solution that work

import {App} from './app.ts';
import { bootstrap, provide, FORM_PROVIDERS } from 'angular2/angular2';
import { ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy } from 'angular2/router';

bootstrap(App, [
    ROUTER_PROVIDERS,
    FORM_PROVIDERS,
    provide(LocationStrategy, { useClass: HashLocationStrategy })
]).then(
    success => console.log('App Bootstrapped!'),
    error => console.log(error)
);

Upvotes: 3

Related Questions