Question

当我尝试将Router注入我的Authentication Guard时，我收到以下错误：

无法解析AuthenticationGuardService的所有参数：（？）

不幸的是，我无法使用节点服务器，因为这是项目要求之一（团队决策）。相反，我正在将ts文件编译为ES5并从在nginx服务器上运行的php应用程序提供服务。

我可能缺少某些依赖项，或者是循环依赖项的另一种情况。我不知道如何解决它。

认证guard.service.js

import { Injectable } from '@angular/core';;
import {Router, CanActivate } from '@angular/router';

@Injectable()
export class AuthenticationGuardService implements CanActivate {

    constructor(
        private router: Router,
    ) {}

    canActivate() {
        this.router.navigate(['login']);
        return false;
    }

}

app.module.ts

import { NgModule }                         from '@angular/core';
import { BrowserModule }                    from '@angular/platform-browser';
import { FormsModule }                      from '@angular/forms';
import { HttpModule }                       from '@angular/http';

import { AppComponent}                from './app.component';
import { AppRoutingModule}            from './app-routing.module';
import { AuthenticationComponent }    from './authentication/authentication.component';
import { AuthenticationGuardService } from './authentication/guards/authentication-guard.service';


@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        AppRoutingModule,
        HttpModule
    ],
    declarations: [
        AppComponent,
        AuthenticationComponent,
    ],
    providers: [
        AuthenticationGuardService,
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule{}

应用-routing.module.ts

import { NgModule }               from '@angular/core';
import { RouterModule, Routes }   from '@angular/router';
import { AuthenticationComponent} from './authentication/authentication.component'
import { DashboardComponent}      from './dashboard/dashboard.component'
import { AuthenticationGuardService }    from './authentication/guards/authentication-guard.service';

const routes: Routes = [
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
    { path: 'login', component: AuthenticationComponent },
    { path: 'dashboard', component: DashboardComponent, canActivate: [AuthenticationGuardService]}
];

@NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
})
export class AppRoutingModule {}

的package.json

{
  "name": "admin-app",
  "version": "1.0.0",
  "description": "admin application",
  "main": "index.js",
  "devDependencies": {
    "@angular/common": "~2.3.0",
    "@angular/compiler": "~2.3.0",
    "@angular/core": "~2.3.0",
    "@angular/forms": "~2.3.0",
    "@angular/http": "~2.3.0",
    "@angular/platform-browser": "~2.3.0",
    "@angular/platform-browser-dynamic": "~2.3.0",
    "@angular/router": "~3.3.0",
    "@types/core-js": "^0.9.35",
    "@types/node": "^6.0.52 ",
    "core-js": "^2.4.1",
    "grunt": "^0.4.5",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-cssmin": "latest",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-less": "latest",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-contrib-watch": "latest",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-rc.4",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.2"
  },
  "author": "CC",
  "dependencies": {
    "grunt-ts": "^6.0.0-beta.3",
    "typescript": "^2.1.4"
  }
}

systemjs.config.js

 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': '/js/libraries/node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'js/src',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

Answer 1

我想我已经弄明白了。我的编译器设置不正确。

<强>之前

        ts: {
            options: {
                target: "es5",
                module: "umd",
                declaration: false,
                noImplicitAny: false,
                removeComments: true,
                emitDecoratorMetadata: false,
                experimentalDecorators: true,
                sourceMap: false,
                moduleResolution: "node",
                suppressImplicitAnyIndexErrors: false
            },
            build : {
                src: ["app/**/*.ts"],
                dest: '../../webroot/js/src/'
            }
        },

工作配置

        ts: {
            options: {
                target: "es5",
                module: "umd",
                declaration: false,
                noImplicitAny: true,
                removeComments: true,
                emitDecoratorMetadata: true,
                experimentalDecorators: true,
                sourceMap: false,
                moduleResolution: "node",
                suppressImplicitAnyIndexErrors: true
            },
            build : {
                src: ["app/**/*.ts"],
                dest: '../../webroot/js/src/'
            }
        },

问题是由emitDecoratorMetadata选项引起的，该选项设置为false。

更新我的回答

如果可能，尝试使用角度CLI构建，上述答案将适用于ng2。对于每个新版本，您可能必须重构上面的配置。此外，您需要为ng-cli为您创建的每个延迟加载的模块指定构建配置。

Answer 2

在您的应用中。 module.ts这应该是正确的：从'./app.routing.module'导入{AppRoutingModule};

你有 - 那里

Angular 2无法解析路由器依赖关系

2 个答案:

更新我的回答