Angular 2 - 路由器实例化期间出错 - (Router Outlet ->Router)
Angular 2 - Error during instantiation of Router - (Router Outlet ->Router)
编辑
这是我的笨蛋:plnkr.co/edit/qMBc5j62jQoBJLsFYgr4?p=preview
我正在使用 TypeScript。
我收到以下错误:
Error during instantiation of Router! (RouterLink -> Router).
and (RouterOutlet -> Router)
我已经在这个论坛上尝试过针对这个问题的不同解决方案,包括 adding/changing <base href="/">
in index.html
或添加 APP_BASE_HREF
to bootstrap。
我一直在使用官方 Angular Plunker 教程 http://plnkr.co/edit/d8pewJf9kVqD3kTSvQmK?p=preview 的代码,效果很好。
我的 app.component.ts 看起来如下:
import { Component } from 'angular2/core';
import {LandingComponent} from './landing.component';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
@Component({
selector: 'my-app',
template: `
<h1>Hello</h1>
<h1>{{title}}</h1>
<nav>
<a [routerLink]="['Landing']">Heroes</a>
</nav>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
@RouteConfig({
{
path: '/landing',
name: 'Landing',
component: LandingComponent,
useAsDefault: true
}
})
export class AppComponent {
title = 'Win Free!';
}
main.ts
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent);
index.html
<html>
<head>
<script>document.write('<base href="' + document.location + '" />'); </script>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://npmcdn.com/angular2@2.0.0-beta.12/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://npmcdn.com/typescript@1.8.9/lib/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/router.dev.js"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
谢谢。
从 AppComponent
中删除 providers: [ROUTER_PROVIDERS]
。 ROUTER_PROVIDERS
应该由整个应用程序共享,只需将其添加到 boostrap(AppComponent, [ROUTER_PROVIDERS])
.
如果您也将它们添加到组件 providers
上,那么该组件将获得一个新实例,这会阻止它们按预期工作。
更新
在您的 Plunker 中(Edit ...
之后的链接)仅在组件上有 ROUTER_PROVIDERS
,但在 bootstrap()
中没有,但应该是相反的。 @RouteConfig()
中也存在语法问题,它需要一个数组,但却是 {}
(而不是 []
)。
编辑 这是我的笨蛋:plnkr.co/edit/qMBc5j62jQoBJLsFYgr4?p=preview
我正在使用 TypeScript。
我收到以下错误:
Error during instantiation of Router! (RouterLink -> Router). and (RouterOutlet -> Router)
我已经在这个论坛上尝试过针对这个问题的不同解决方案,包括 adding/changing <base href="/">
in index.html
或添加 APP_BASE_HREF
to bootstrap。
我一直在使用官方 Angular Plunker 教程 http://plnkr.co/edit/d8pewJf9kVqD3kTSvQmK?p=preview 的代码,效果很好。
我的 app.component.ts 看起来如下:
import { Component } from 'angular2/core';
import {LandingComponent} from './landing.component';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
@Component({
selector: 'my-app',
template: `
<h1>Hello</h1>
<h1>{{title}}</h1>
<nav>
<a [routerLink]="['Landing']">Heroes</a>
</nav>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
@RouteConfig({
{
path: '/landing',
name: 'Landing',
component: LandingComponent,
useAsDefault: true
}
})
export class AppComponent {
title = 'Win Free!';
}
main.ts
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent);
index.html
<html>
<head>
<script>document.write('<base href="' + document.location + '" />'); </script>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://npmcdn.com/angular2@2.0.0-beta.12/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://npmcdn.com/typescript@1.8.9/lib/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/router.dev.js"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
谢谢。
从 AppComponent
中删除 providers: [ROUTER_PROVIDERS]
。 ROUTER_PROVIDERS
应该由整个应用程序共享,只需将其添加到 boostrap(AppComponent, [ROUTER_PROVIDERS])
.
如果您也将它们添加到组件 providers
上,那么该组件将获得一个新实例,这会阻止它们按预期工作。
更新
在您的 Plunker 中(Edit ...
之后的链接)仅在组件上有 ROUTER_PROVIDERS
,但在 bootstrap()
中没有,但应该是相反的。 @RouteConfig()
中也存在语法问题,它需要一个数组,但却是 {}
(而不是 []
)。