無法在客戶端使用模塊

Question

我在嘗試修復它時遇到了不同的錯誤。這次我試圖使用一個模塊來上傳文件。現在，我得到這個錯誤：

"Error: Can't resolve all parameters for FileUploader: (?). 
    Evaluating http://localhost:3333/app/main.js 
    Loading app 
    at ZoneAwareError (http://localhost:3333/libs/zone.js/dist/zone.js:992:33) 
    at LoaderError__Check_error_message_for_loader_stack (http://localhost:3333/libs/systemjs/dist/system.src.js:80:11) 
    at http://localhost:3333/libs/systemjs/dist/system.src.js:284:11 
    at ZoneDelegate.invoke (http://localhost:3333/libs/zone.js/dist/zone.js:334:26) 
    at Zone.run (http://localhost:3333/libs/zone.js/dist/zone.js:126:43) 
    at http://localhost:3333/libs/zone.js/dist/zone.js:713:57 
    at ZoneDelegate.invokeTask (http://localhost:3333/libs/zone.js/dist/zone.js:367:31) 
    at Zone.runTask (http://localhost:3333/libs/zone.js/dist/zone.js:166:47) 
    at drainMicroTaskQueue (http://localhost:3333/libs/zone.js/dist/zone.js:546:35) 
    at <anonymous>" 

如果我不把FileUploader的供應商，我得到另一個錯誤：

Error: DI Error 
    at NoProviderError.ZoneAwareError (http://localhost:3333/libs/zone.js/dist/zone.js:992:33) 
    at NoProviderError.BaseError [as constructor] (http://localhost:3333/@angular/core/bundles/core.umd.js:1239:20) 
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:3333/@angular/core/bundles/core.umd.js:1365:20) 
    at new NoProviderError (http://localhost:3333/@angular/core/bundles/core.umd.js:1405:20) 
    at ReflectiveInjector_._throwOrNull (http://localhost:3333/@angular/core/bundles/core.umd.js:2937:23) 
    at ReflectiveInjector_._getByKeyDefault (http://localhost:3333/@angular/core/bundles/core.umd.js:2976:29) 
    at ReflectiveInjector_._getByKey (http://localhost:3333/@angular/core/bundles/core.umd.js:2908:29) 
    at ReflectiveInjector_.get (http://localhost:3333/@angular/core/bundles/core.umd.js:2777:25) 
    at AppModuleInjector.NgModuleInjector.get (http://localhost:3333/@angular/core/bundles/core.umd.js:8491:56) 
    at CompiledTemplate.proxyViewClass.AppView.injectorGet (http://localhost:3333/@angular/core/bundles/core.umd.js:11935:49) 
    at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (http://localhost:3333/@angular/core/bundles/core.umd.js:12315:53) 
    at ElementInjector.get (http://localhost:3333/@angular/core/bundles/core.umd.js:11790:31) 
    at ReflectiveInjector_._getByKeyDefault (http://localhost:3333/@angular/core/bundles/core.umd.js:2973:28) 
    at ReflectiveInjector_._getByKey (http://localhost:3333/@angular/core/bundles/core.umd.js:2908:29) 
    at ReflectiveInjector_.get (http://localhost:3333/@angular/core/bundles/core.umd.js:2777:25) 

反正我得到任何模塊，我嘗試在客戶端上使用這種類型的錯誤這樣我就失去了一些東西。如果它幫助我起初得到了<匿名>響應，並且我認爲我解決了這個問題，但也許我剛剛嘗試修復它時發生了另一個錯誤。

我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 { routing }  from './app.routing'; 

import { UsersComponent }  from './components/users/users.component'; 
import { UserDetailComponent } from './components/userDetail/user-detail.component'; 

import { UserService } from './services/user.service'; 

import { FileSelectDirective, FileDropDirective, FileUploadModule, FileUploader } from 'ng2-file-upload'; 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    HttpModule, 
    FormsModule, 
    routing, 
    FileUploadModule 
    ], 
    declarations: [ 
    AppComponent, 
    UsersComponent, 
    UserDetailComponent 
    ], 
    providers: [ 
    UserService, 
    FileUploader 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

我的組件：

import {Component, Input, OnInit} from '@angular/core'; 
import {User} from "../../models/user"; 
import { ActivatedRoute, Params } from '@angular/router'; 
import {UserService} from "../../services/user.service"; 

import { FileUploader } from 'ng2-file-upload'; 

@Component({ 
    selector: 'my-user-detail', 
    templateUrl: './app/components/userDetail/user-detail.component.html' 
}) 

export class UserDetailComponent implements OnInit { 

    @Input() user: User; 
    newUser = false; 
    error: any; 
    navigated = false; // true if navigated here 


    constructor(
     public uploader:FileUploader = new FileUploader({url:'http://localhost:3333/users/file'}), 
     private userService: UserService, 
     private route: ActivatedRoute) { 
    } 

    ngOnInit() { 
     this.route.params.forEach((params: Params) => { 
      let id = params['id']; 
      if (id === 'new') { 
       this.newUser = true; 
       this.user = new User(); 
      } else { 
       this.newUser = false; 
       this.userService.getUser(id) 
        .then(user => this.user = user); 
      } 
     }); 
    } 

    save() { 
     this.userService 
      .save(this.user) 
      .then(user => { 
       this.user = user; // saved user, w/ id if new 
       this.goBack(); 
      }) 
      .catch(error => this.error = error); // TODO: Display error message 
    } 

    goBack() { 
     window.history.back(); 
    } 
} 

systemconfig.js：

var isPublic = typeof window != "undefined"; 

(function(global) { 
    // map tells the System loader where to look for things 
    var map = { 
    'app':      'app', // 'dist', 
    '@angular':     (isPublic)? '@angular' : 'node_modules/@angular', 
    'rxjs':      (isPublic)? 'rxjs' : 'node_modules/rxjs', 
    'ng2-file-upload':   (isPublic)? 'ng2-file-upload' : 'node_modules/ng2-file-upload' 
    }; 
    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
    'app':      { main: 'main.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    'ng2-file-upload' :   { main: 'ng2-file-upload.js', defaultExtension: 'js'} 
    }; 
    var ngPackageNames = [ 
    'common', 
    'compiler', 
    'core', 
    'forms', 
    'http', 
    'platform-browser', 
    'platform-browser-dynamic', 
    'router', 
    'router-deprecated', 
    'upgrade' 
    ]; 
    // Individual files (~300 requests): 
    function packIndex(pkgName) { 
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    } 
    // Bundled (~40 requests): 
    function packUmd(pkgName) { 
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 
    } 
    // Most environments should use UMD; some (Karma) need the individual index files 
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; 
    // Add package entries for angular packages 
    ngPackageNames.forEach(setPackageConfig); 
    var config = { 
    map: map, 
    packages: packages 
    }; 
    System.config(config); 
})(this); 

我怎麼稱呼它的index.html：

<script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 

謝謝。

Answer 1

您不能在構造函數中注入FileUploader。從構造FileUploader =新FileUploader`：

按照demo這應該爲你工作

export class UserDetailComponent implements OnInit { 
    public uploader: FileUploader = new FileUploader({new FileUploader({url:'url'})