Angular 2.1.2 / 2.2.0依赖注入实例未定义

在将我的代码从RC4移动到2.1.2期间,我遇到了一个奇怪的问题：我的所有构造函数参数都未定义其值.

我试图将提供商从组件移动到app.module.ts到app.component.ts.它们都不起作用.

2.1.2中有哪些新功能可以使依赖注入器注入“未定义”而不是创建/提供服务实例？

笔记

>为了简单起见,我将代码更改为以下内容
>没有错误消息.
>如果我没有将@Injectable()添加到AppComponent,我会得到无法恢复AppComponent的所有参数(？,？,？)
>请注意,根注入器无法同时创建用户服务和路由器实例以提供AppComponent构造函数.
> AuthService用于注入Http,但我将其与其他代码一起删除,以便减少变量.
>在Angular 2.2.0中尝试它也不起作用.

还有什么输入？

app.component.ts

import { Component,Injectable }       from '@angular/core'; 
import { Router  } from '@angular/router'; 
import { AuthService }  from '../login/auth.service';

@Component({
  selector: 'my-app',template: `
    <h1 class="title">Angular Router</h1>
    <nav>
    </nav>
    <router-outlet></router-outlet>
  `
})
@Injectable()
export class AppComponent {
  constructor(                            // debug here
              private auth: AuthService,// auth = undefined
              private router: Router,// router = undefined
              ) {
                console.log("AppComponent constructor");
              }  
}

app.module.ts

import { NgModule }       from '@angular/core';
import { browserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { RouterModule }   from '@angular/router';

import { AppComponent }         from './app.component';
import { AuthService }  from '../login/auth.service';

@NgModule({
  imports: [
    browserModule,FormsModule,RouterModule.forRoot([
      { path: '',component: AppComponent },])
  ],declarations: [ AppComponent ],exports: [RouterModule],providers:[AuthService ],bootstrap: [ AppComponent ]
})
export class AppModule {}

auth.service.ts

import {Injectable} from '@angular/core';

@Injectable()
export class AuthService {  // the debugger can get to this line but never hit constructor
  private _baseUrl: string;
  loggedIn: boolean = false;
  redirectUrl: string;

  constructor() {
    console.log("AuthService constuctor");
    this.loggedIn = !!sessionStorage.getItem('auth_token');
  }

}

main.ts

import { platformbrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './appShell/app.module';
platformbrowserDynamic().bootstrapModule(AppModule);

systemjs.config.js

(function(global) {

  var ngVer = '@2.1.2'; // lock in the angular package version; do not let it float to current!
  var routerVer = '@3.1.2'; // lock router version

  //map tells the System loader where to look for things
  var  map = {
    'app':                        'app',// angular bundles
    '@angular/core': 'https://npmcdn.com/@angular/core' + ngVer,'@angular/common': 'https://npmcdn.com/@angular/common' + ngVer,'@angular/compiler': 'https://npmcdn.com/@angular/compiler' + ngVer,'@angular/platform-browser': 'https://npmcdn.com/@angular/platform-browser' + ngVer,'@angular/platform-browser-dynamic': 'https://npmcdn.com/@angular/platform-browser-dynamic' + ngVer,'@angular/http': 'https://npmcdn.com/@angular/http' + ngVer,'@angular/router': 'https://npmcdn.com/@angular/router' + routerVer,'@angular/forms': 'https://npmcdn.com/@angular/forms' + ngVer,'@angular/upgrade': 'https://npmcdn.com/@angular/upgrade' + ngVer,// Other libraries
    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.12','angular-in-memory-web-api':  'https://npmcdn.com/angular-in-memory-web-api',// get latest
    'ts':                         'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js','typescript':                 'https://npmcdn.com/typescript@2.0.3/lib/typescript.js',};

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.ts',defaultExtension: 'ts' },'rxjs':                       { defaultExtension: 'js' },'angular2-in-memory-web-api': { main: 'index.js',defaultExtension: 'js' },};    
  var config = {
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE broWSER
    transpiler: 'ts',Meta: {
      'typescript': {
        "exports": "ts"
      }
    },map: map,packages: packages
  };
  System.config(config);
})(this);

的package.json

{
  "name": "TestApp","version": "1.0.0","scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ","lite": "lite-server","tsc": "tsc","tsc:w": "tsc -w"
  },"keywords": [],"author": "","license": "ISC","dependencies": {
    "@angular/common": "~2.1.2","@angular/compiler": "~2.1.2","@angular/core": "~2.1.2","@angular/forms": "~2.1.2","@angular/http": "~2.1.2","@angular/platform-browser": "~2.1.2","@angular/platform-browser-dynamic": "~2.1.2","@angular/router": "~3.1.2","@angular/upgrade": "~2.1.2","angular-in-memory-web-api": "~0.1.13","core-js": "^2.4.1","reflect-Metadata": "^0.1.8","rxjs": "5.0.0-beta.12","systemjs": "0.19.40","zone.js": "^0.6.26"
  },"devDependencies": {
    "@types/core-js": "^0.9.34","@types/node": "^6.0.46","concurrently": "^3.1.0","lite-server": "^2.2.2","typescript": "^2.0.3"
  },"repository": {}
}

解决方法

在RC.5 @NgModule was introduced中.
您需要声明其他服务,模块等,如下所示：

import {NgModule} from '@angular/core';
import {LoginComponent} from './login.component';
import {Router,RouterModule} from '@angular/router';
import {FormsModule,FormBuilder} from '@angular/forms';
import {AuthService} from './auth.service';
import {routing} from './app.routing.module';
import {MainComponent} from './main.component';

@NgModule({
  declarations: [LoginComponent],// specify your components here
  imports: [browserModule,RouterModule.forRoot([...]),routing],providers: [FormBuilder,AuthService,...],// additional providers
  bootstrap: [MainComponent],})
class AppModule {}

More info

Angular 2.1.2 / 2.2.0依赖注入实例未定义

解决方法

相关推荐