Question

尝试使用angular2的路由器，尝试了很多例子之后仍然无法正常工作......

我使用Alpha 44

这是超级有用的错误：正则表达式

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(…)

此处是我的代码：

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>

我做错了什么？

Answer 1

我需要问一个问题....几分钟后在github找到答案;）

这是可行的解决方案

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)
);

Angular2路由器 - 如何使其正常工作

1 个答案: