rc1 路由器 "No provider for Router"
rc1 router "No provider for Router"
这是在@Shuhei 帮助我解决了 config.js 问题
之后出现的错误的跟进 post
这是我的app.component.ts
import { Component,provide } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES,Router } from '@angular/router-deprecated';
import { HeroShellComponent } from '../apps/hero/hero-shell.component';
import {HomeComponent} from '../home/home.component';
import {Login} from '../login/auth.component';
import {Authentication} from '../login/auth.service';
import {isLoggedin} from '../login/auth.isLoggedin';
@Component({
selector: 'my-app',
templateUrl: 'app/appshell/app.component.html',
styleUrls: ['app/appshell/app.component.css'],
directives: [ROUTER_DIRECTIVES],
})
@RouteConfig([
{
path: '/app/apps/hero/...',
name: 'Hero Sample',
component: HeroShellComponent,
},
{ path: '/app/apps/testapp1', name: 'Testapp1', component: HomeComponent },
{ path: '/', redirectTo: ['Login'] },
{ path: '/home', name: 'Home', component: HomeComponent },
{ path: '/login', name: 'Login', component: Login, useAsDefault: true },
])
export class AppComponent {
title = 'Apps';
constructor(public _auth: Authentication,
public router: Router
) {}
onLogout() {
this._auth.logout();
this.router.navigate(['/Login']);
}
}
所有其他组件都像上面这样通过构造函数注入路由器。 当然有路由器.
path: '/app/apps/hero/...'
用于子路由器重定向。
我得到的错误是
browser_adapter.ts:78 EXCEPTION: Error:
Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: No provider for Router!.
ORIGINAL STACKTRACE: Error: DI Exception
at NoProviderError.BaseException [as constructor] (npmcdn.com/@angular/core@2.0.0-rc.1/src/facade/…)
at NoProviderError.AbstractProviderError [as constructor]
如果相同的代码在测试版中运行,是什么导致它在 RC1 路由器中不起作用?
更新:index.html
<html>
<head>
<base href="/">
<title>My Tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/app/public/css/styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-sham.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.25/system-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="/app/systemjs.config.js"></script>
<script>
System.import('app/main').then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
<script>document.write('<base href="' + document.location + '" />');</script>
</body>
</html>
你需要提供路由器,像这样:
...
import { RouteConfig, ROUTER_DIRECTIVES, Router, ROUTER_PROVIDERS } from '@angular/router-deprecated';
@Component({
selector: 'my-app',
templateUrl: 'app/appshell/app.component.html',
styleUrls: ['app/appshell/app.component.css'],
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
...
更多关于供应商如何运作的信息:https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html
确保你的 index.html:
<script>document.write('<base href="' + document.location + '" />');</script>
从“@angular/router”
导入 ROUTER_DIRECTIVES、路由器和路由
将@RouteConfig 替换为@Routes
这帮助我让它正常工作。 https://angular.io/docs/ts/latest/guide/router-deprecated.html
如果你想使用新的路由器,你应该改变你的代码:
import {Routes} from '@angular/router'
@Component({
selector: 'my-app',
templateUrl: 'app/appshell/app.component.html',
styleUrls: ['app/appshell/app.component.css'],
directives: [ROUTER_DIRECTIVES],
})
@Routes([
{
path: '/app/apps/hero/...',
component: HeroShellComponent,
},
{ path: '/app/apps/testapp1', component: HomeComponent },
{ path: '/', redirectTo: ['Login'] },
{ path: '/home', component: HomeComponent },
{ path: '/login', component: Login},
])
export class AppComponent {}
在此处查看更多文档 https://angular.io/docs/ts/latest/guide/router.html
对于angular路由器3.0.0-beta.1
:
我遇到了类似的错误,我发现 WebStorm 为我自动导入 @angular/router-deprecated
。从tutorial开始,应该是@angular/router
.
app.component.ts:
import {ROUTER_DIRECTIVES} from "@angular/router";
这是在@Shuhei 帮助我解决了 config.js 问题
这是我的app.component.ts
import { Component,provide } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES,Router } from '@angular/router-deprecated';
import { HeroShellComponent } from '../apps/hero/hero-shell.component';
import {HomeComponent} from '../home/home.component';
import {Login} from '../login/auth.component';
import {Authentication} from '../login/auth.service';
import {isLoggedin} from '../login/auth.isLoggedin';
@Component({
selector: 'my-app',
templateUrl: 'app/appshell/app.component.html',
styleUrls: ['app/appshell/app.component.css'],
directives: [ROUTER_DIRECTIVES],
})
@RouteConfig([
{
path: '/app/apps/hero/...',
name: 'Hero Sample',
component: HeroShellComponent,
},
{ path: '/app/apps/testapp1', name: 'Testapp1', component: HomeComponent },
{ path: '/', redirectTo: ['Login'] },
{ path: '/home', name: 'Home', component: HomeComponent },
{ path: '/login', name: 'Login', component: Login, useAsDefault: true },
])
export class AppComponent {
title = 'Apps';
constructor(public _auth: Authentication,
public router: Router
) {}
onLogout() {
this._auth.logout();
this.router.navigate(['/Login']);
}
}
所有其他组件都像上面这样通过构造函数注入路由器。 当然有路由器.
path: '/app/apps/hero/...'
用于子路由器重定向。
我得到的错误是
browser_adapter.ts:78 EXCEPTION: Error:
Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: No provider for Router!.
ORIGINAL STACKTRACE: Error: DI Exception
at NoProviderError.BaseException [as constructor] (npmcdn.com/@angular/core@2.0.0-rc.1/src/facade/…)
at NoProviderError.AbstractProviderError [as constructor]
如果相同的代码在测试版中运行,是什么导致它在 RC1 路由器中不起作用?
更新:index.html
<html>
<head>
<base href="/">
<title>My Tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/app/public/css/styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-sham.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.25/system-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="/app/systemjs.config.js"></script>
<script>
System.import('app/main').then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
<script>document.write('<base href="' + document.location + '" />');</script>
</body>
</html>
你需要提供路由器,像这样:
...
import { RouteConfig, ROUTER_DIRECTIVES, Router, ROUTER_PROVIDERS } from '@angular/router-deprecated';
@Component({
selector: 'my-app',
templateUrl: 'app/appshell/app.component.html',
styleUrls: ['app/appshell/app.component.css'],
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
...
更多关于供应商如何运作的信息:https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html
确保你的 index.html:
<script>document.write('<base href="' + document.location + '" />');</script>
从“@angular/router”
导入 ROUTER_DIRECTIVES、路由器和路由
将@RouteConfig 替换为@Routes
这帮助我让它正常工作。 https://angular.io/docs/ts/latest/guide/router-deprecated.html
如果你想使用新的路由器,你应该改变你的代码:
import {Routes} from '@angular/router'
@Component({
selector: 'my-app',
templateUrl: 'app/appshell/app.component.html',
styleUrls: ['app/appshell/app.component.css'],
directives: [ROUTER_DIRECTIVES],
})
@Routes([
{
path: '/app/apps/hero/...',
component: HeroShellComponent,
},
{ path: '/app/apps/testapp1', component: HomeComponent },
{ path: '/', redirectTo: ['Login'] },
{ path: '/home', component: HomeComponent },
{ path: '/login', component: Login},
])
export class AppComponent {}
在此处查看更多文档 https://angular.io/docs/ts/latest/guide/router.html
对于angular路由器3.0.0-beta.1
:
我遇到了类似的错误,我发现 WebStorm 为我自动导入 @angular/router-deprecated
。从tutorial开始,应该是@angular/router
.
app.component.ts:
import {ROUTER_DIRECTIVES} from "@angular/router";