无法在客户端使用模块

时间：2017-05-25 11:19:55

标签： node.js angular typescript client-side node-modules

我尝试修复时遇到了不同的错误。这次我试图使用模块上传文件。现在我收到这个错误：

"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)

无论如何，我尝试在客户端使用的任何模块都会遇到这种类型的错误，所以我缺少了一些东西。如果它有助于我得到＆lt;匿名＆gt;起初回应，我认为我已经解决了这个问题，但也许我只是试图解决另一个错误。

我的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>

谢谢。

1 个答案:

答案 0 :(得分：0)

您无法在构造函数中注入FileUploader。

根据demo这应该对你有用

export class UserDetailComponent implements OnInit {
  public uploader: FileUploader = new FileUploader({new FileUploader({url:'url'})
相关问题
最新问题