1

我正在尝试在我的 Angular2 项目中实现 ng2-smarttable 并在控制台中返回以下错误，

GET http://localhost:3000/traceur 404 (Not Found)

在此处输入图像描述

我尝试通过删除 ng2-smart-table 运行命令“npm install”，但随后它返回相同的错误。

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

        // 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/http/testing': 'npm:@angular/http/bundles/http-
     testing.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',
        'ng2-smart-table': 'npm:ng2-smart-table',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
        /** Path for ng2-file-upload */
        'ng2-file-upload' : 'npm:ng2-file-upload',
        'ng2-drag-drop': 'npm:ng2-drag-drop',
        'ng2-dnd': 'npm:ng2-dnd',
        'underscore': 'npm:underscore'      
    },
    // 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'
        },
        'angular-in-memory-web-api': {
    main: './index.js',
    defaultExtension: 'js'
  },
  /** Configuration for ng2-file-upload */
  'ng2-file-upload' : { 
    main: './ng2-file-upload.js',
    defaultExtension: 'js'
  },
  'ng2-smart-table':   {main: 'index.js', defaultExtension: 'js' } ,
  'ng2-drag-drop':  { main: '/index.js',  defaultExtension: 'js' },
  'underscore':  { main: '/underscore.js',  defaultExtension: 'js' },
    'ng2-dnd':  { main: '/bundles/index.umd.js',  defaultExtension: 'js' }
    },

  });
})(this);

 My app.module.ts if file is as follows,
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { FileSelectDirective, FileDropDirective } from 'ng2-file-upload';
 import { Ng2DragDropModule } from 'ng2-drag-drop';
 import {DndModule} from 'ng2-dnd';
 import { Ng2SmartTableModule } from 'ng2-smart-table';

 import { AppComponent } from './app.component';
 import { routing } from './app.routing';
 import { AppConfig } from './app.config';

 import { AlertComponent } from './_directives/index';
 import { AuthGuard } from './_guards/index';
 import { AlertService, AuthenticationService, UserService, SchemaService } 
 from 
 './_services/index';
 import { HomeComponent } from './home/index';
 import { LoginComponent } from './login/index';
 import { RegisterComponent } from './register/index';
 import { UploadComponent } from './upload/index';
 import { ReadComponent } from './read/index';
 import { DragComponent } from './drag/index';

  @NgModule({
    imports: [
    BrowserModule,
    DndModule.forRoot(),
    FormsModule,
    HttpModule,
    routing,
    Ng2DragDropModule,
    Ng2SmartTableModule
],
declarations: [
    AppComponent,
    AlertComponent,
    HomeComponent,
    LoginComponent,
    RegisterComponent,
    FileSelectDirective,
    UploadComponent,
    ReadComponent,
    DragComponent
  ],
  providers: [
    AppConfig,
    AuthGuard,
    AlertService,
    AuthenticationService,
    UserService,
    SchemaService
],
bootstrap: [AppComponent]
})

export class AppModule { }

使用'ng2-smart-table' 时收到的错误消息：{ main: 'bundles/table.umd.js', defaultExtension: 'js' }, 在此处输入图像描述

我的“app.module.ts”文件如下所示： 在此处输入图像描述

4

1 回答 1

0

你不能这样使用ng2-smart-table。ng2-smart-table发布目标不是 ES5，而是 ES5 。SystemJS 知道它index.js在 ES6 中（默认情况下不会在许多浏览器中运行）并尝试将其traceur转换为 ES5。虽然，有捆绑的 ES5 文件可以由 SystemJS 加载。它位于ng2-smart-table/bundles/table.umd.js。我对 SystemJS 不是很熟悉，但你可以试试这个：

'ng2-smart-table':   {main: 'bundles/table.umd.js', defaultExtension: 'js' }

对于未来，请记住traceurSystemJS 中的问题通常意味着您需要指向捆绑的 ES5 库文件，而不是例如index.js.

PS：这不会是一个问题angular-cli。

于 2017-06-06T08:51:17.097 回答