Angular2 beta 出现异常 "No provider for Router! (RouterLink -> Router)"
Angular2 beta getting exception "No provider for Router! (RouterLink -> Router)"
我已经为此苦恼了两天了。我正在尝试在 Angular2 beta0.0.2 中实现一些简单的路由。请注意,我使用的是 typescript.
所以我的理解是我需要 bootstrap 我的根应用程序组件 ROUTER_PROVIDERS 以便我的 who 应用程序可以使用这些服务 AND 将要实现路由的组件的指令设置为ROUTER_DIRECTIVES。
这是我的:
//ANGULAR ******************************
import {provide, Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {
APP_BASE_HREF,
ROUTER_DIRECTIVES,
ROUTER_PROVIDERS,
HashLocationStrategy,
LocationStrategy,
RouteConfig,
} from 'angular2/router';
//COMPONENTS ******************************
import {ShiftCalendarComponent} from './components/calendar/shift-calendar.component';
import {ShiftAdminComponent} from './components/admin/shift-admin.component';
import {ShiftListComponent} from './components/shifts/shift-list.component';
//CLASS ******************************
@Component({
selector: 'shift-app',
directives: [ROUTER_DIRECTIVES],
template: `<div>
<nav>
<h3> Navigation: </h3>
<ul>
<li><a [routerLink]="['Calendar']" > Home </a></li>
<li><a [routerLink]="['Admin']" > About </a></li>
<li><a [routerLink]="['Shifts']" > Contact us </a></li>
</ul>
</nav>
<router-outlet></router-outlet>
</div>`
})
@RouteConfig([
{ path: '/', name: 'root', redirectTo: ['/Calendar'] },
{ path: '/calendar', name: 'Calendar', component: ShiftCalendarComponent },
{ path: '/admin', name: 'Admin', component: ShiftAdminComponent },
{ path: '/shifts', name: 'Shifts', component: ShiftListComponent }
])
export class ShiftApp { }
//BOOTSTRAP ******************************
bootstrap(ShiftApp, [
ROUTER_PROVIDERS,
provide(LocationStrategy, { useClass: HashLocationStrategy }),
provide(APP_BASE_HREF, { useValue: '/' })
]);
angular 应用加载并显示模板,但 link 无效,我在控制台中收到以下错误:
EXCEPTION: No provider for Router! (RouterLink -> Router) angular2.dev.js
在我的 index.html(我称之为 view.html)中,我已经 link 访问了所有相关的库并包含了 router.dev.js 并且控制台的源选项卡显示所有需要的脚本都已成功加载。
我已经阅读了关于 Angular2 和整个路由器文档的每个堆栈溢出问题以及路由器 link 错误,但无法找到我的不工作的原因。据我所知我的代码匹配 the Angular2 Documentation
This documentation 显示 ROUTER_DIRECTIVES 包含 RouterOutlet 和 RouterLink
等指令
问题?
如果我成功地将组件的指令设置为 ROUTER_DIRECTIVES,为什么我会收到 "No provider for Router! RouterLink" 错误?
将您的 bootstrapping 进程移动到单独的文件中:
import {bootstrap} from 'angular2/platform/browser';
import {provide, Component} from 'angular2/core';
import {ShiftApp} from './app.component';
import {
APP_BASE_HREF,
ROUTER_DIRECTIVES,
ROUTER_PROVIDERS,
HashLocationStrategy,
LocationStrategy
} from 'angular2/router';
bootstrap(ShiftApp, [
ROUTER_PROVIDERS,
provide(LocationStrategy, { useClass: HashLocationStrategy }),
provide(APP_BASE_HREF, { useValue: '/' })
]);
将新文件导入您的 index.html:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
可以发现这样做的好处 here。
另外如评论中所述,bootstrap 您的根组件而不是子组件。
解决方案是注入 boot.ts(引导加载程序文件)
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {ROUTER_PROVIDERS} from 'angular2/router';
bootstrap(AppComponent, [ROUTER_PROVIDERS]);
这解决了我的问题。
我有问题 "EXCEPTION: No provider for Router! (RouterLink -> Router)",我通过在 boot.ts 中进行更改,成功地完全修复了它,根据以下代码配置您的 boot.ts,它将正常工作。
import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component';
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
provide(LocationStrategy, { useClass: HashLocationStrategy }),
HTTP_PROVIDERS
]);
我已经为此苦恼了两天了。我正在尝试在 Angular2 beta0.0.2 中实现一些简单的路由。请注意,我使用的是 typescript.
所以我的理解是我需要 bootstrap 我的根应用程序组件 ROUTER_PROVIDERS 以便我的 who 应用程序可以使用这些服务 AND 将要实现路由的组件的指令设置为ROUTER_DIRECTIVES。
这是我的:
//ANGULAR ******************************
import {provide, Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {
APP_BASE_HREF,
ROUTER_DIRECTIVES,
ROUTER_PROVIDERS,
HashLocationStrategy,
LocationStrategy,
RouteConfig,
} from 'angular2/router';
//COMPONENTS ******************************
import {ShiftCalendarComponent} from './components/calendar/shift-calendar.component';
import {ShiftAdminComponent} from './components/admin/shift-admin.component';
import {ShiftListComponent} from './components/shifts/shift-list.component';
//CLASS ******************************
@Component({
selector: 'shift-app',
directives: [ROUTER_DIRECTIVES],
template: `<div>
<nav>
<h3> Navigation: </h3>
<ul>
<li><a [routerLink]="['Calendar']" > Home </a></li>
<li><a [routerLink]="['Admin']" > About </a></li>
<li><a [routerLink]="['Shifts']" > Contact us </a></li>
</ul>
</nav>
<router-outlet></router-outlet>
</div>`
})
@RouteConfig([
{ path: '/', name: 'root', redirectTo: ['/Calendar'] },
{ path: '/calendar', name: 'Calendar', component: ShiftCalendarComponent },
{ path: '/admin', name: 'Admin', component: ShiftAdminComponent },
{ path: '/shifts', name: 'Shifts', component: ShiftListComponent }
])
export class ShiftApp { }
//BOOTSTRAP ******************************
bootstrap(ShiftApp, [
ROUTER_PROVIDERS,
provide(LocationStrategy, { useClass: HashLocationStrategy }),
provide(APP_BASE_HREF, { useValue: '/' })
]);
angular 应用加载并显示模板,但 link 无效,我在控制台中收到以下错误:
EXCEPTION: No provider for Router! (RouterLink -> Router) angular2.dev.js
在我的 index.html(我称之为 view.html)中,我已经 link 访问了所有相关的库并包含了 router.dev.js 并且控制台的源选项卡显示所有需要的脚本都已成功加载。
我已经阅读了关于 Angular2 和整个路由器文档的每个堆栈溢出问题以及路由器 link 错误,但无法找到我的不工作的原因。据我所知我的代码匹配 the Angular2 Documentation
This documentation 显示 ROUTER_DIRECTIVES 包含 RouterOutlet 和 RouterLink
等指令问题?
如果我成功地将组件的指令设置为 ROUTER_DIRECTIVES,为什么我会收到 "No provider for Router! RouterLink" 错误?
将您的 bootstrapping 进程移动到单独的文件中:
import {bootstrap} from 'angular2/platform/browser';
import {provide, Component} from 'angular2/core';
import {ShiftApp} from './app.component';
import {
APP_BASE_HREF,
ROUTER_DIRECTIVES,
ROUTER_PROVIDERS,
HashLocationStrategy,
LocationStrategy
} from 'angular2/router';
bootstrap(ShiftApp, [
ROUTER_PROVIDERS,
provide(LocationStrategy, { useClass: HashLocationStrategy }),
provide(APP_BASE_HREF, { useValue: '/' })
]);
将新文件导入您的 index.html:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
可以发现这样做的好处 here。
另外如评论中所述,bootstrap 您的根组件而不是子组件。
解决方案是注入 boot.ts(引导加载程序文件)
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {ROUTER_PROVIDERS} from 'angular2/router';
bootstrap(AppComponent, [ROUTER_PROVIDERS]);
这解决了我的问题。
我有问题 "EXCEPTION: No provider for Router! (RouterLink -> Router)",我通过在 boot.ts 中进行更改,成功地完全修复了它,根据以下代码配置您的 boot.ts,它将正常工作。
import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component';
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
provide(LocationStrategy, { useClass: HashLocationStrategy }),
HTTP_PROVIDERS
]);