rc1 路由器“没有路由器提供者”答案

【问题标题】：rc1 router "No provider for Router"rc1 路由器“没有路由器提供者”
【发布时间】：2023-03-24 05:16:01
【问题描述】：

这是@Shuhei 帮助我解决config.js 问题angular 2 rc router angular2-polyfills.js:349 Error 后出现的错误的后续帖子@

这是我的 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]

如果相同的代码在 Beta 版中可以正常工作，那么是什么导致它在 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>

【问题讨论】：

这个错误真的发生在AppComponent吗？您介意在 plunker 上创建一个 MCV 示例，以便人们可以修改它。 stackoverflow.com/help/mcve

标签： angular angular2-routing

【解决方案1】：

从“@angular/router”导入 ROUTER_DIRECTIVES、路由器和路由
将@RouteConfig 替换为@Routes

这帮助我让它工作。 https://angular.io/docs/ts/latest/guide/router-deprecated.html

【讨论】：

导入字符串应该是：import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS }

【解决方案2】：

你需要提供路由器，像这样：

...
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

【讨论】：

感谢您的回复。我添加了提供者：[ROUTER_PROVIDERS] 但我仍然在同一个位置遇到同样的错误。它在到达 auth.component.ts 之前就爆炸了。
我不知道，它在 rc.1 中对我来说很好用，可能你的应用程序有问题。
为我工作，使用 Typescript。谢谢

【解决方案3】：

确保你的 index.html 中有：

&lt;script&gt;document.write('&lt;base href="' + document.location + '" /&gt;');&lt;/script&gt;

【讨论】：

我将您的代码行添加到 index.html 但仍然是同样的错误。欢迎任何进一步的想法。

【解决方案4】：

如果你想使用新的路由器，你应该这样改变你的代码：

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

【讨论】：

【解决方案5】：

对于角度路由器3.0.0-beta.1：

我遇到了类似的错误，我发现 WebStorm 为我自动导入 @angular/router-deprecated。从tutorial，应该是@angular/router。

app.component.ts：

import {ROUTER_DIRECTIVES} from "@angular/router";

【讨论】：