2017-06-21 172 views
0

我对Angular非常陌生。我跑了这个让我的项目开始: git clone https://github.com/angular/quickstart appNameAngular 4 + ngx-datatable:@ swimlane/ngx-datatable 404(Not Found)

我更新到Angular 4,一切都应该是好的。下面是从运行ng -v输出:

@angular/cli: 1.1.3 
node: 6.11.0 
os: darwin x64 
@angular/common: 4.0.3 
@angular/compiler: 4.0.3 
@angular/core: 4.0.3 
@angular/forms: 4.0.3 
@angular/http: 4.0.3 
@angular/platform-browser: 4.0.3 
@angular/platform-browser-dynamic: 4.0.3 
@angular/router: 4.0.3 
@angular/cli: 1.1.3 

我需要一个高度可配置表模块ngx-datatable是一个不错的选择。我跟着这些网页上说明:

https://swimlane.gitbooks.io/ngx-datatable/introduction/installing.html https://swimlane.gitbooks.io/ngx-datatable/introduction/getting-started.html

我可以运行npm start和它加载了应用程序,但我的浏览器遇到打破了应用程序的错误:

GET http://localhost:3006/@swimlane/ngx-datatable 404 (Not Found)

enter image description here

这是我的app.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA }  from '@angular/core'; 
import { BrowserModule }       from '@angular/platform-browser'; 
import { HttpModule }       from '@angular/http' ; 
import { NgxDatatableModule }     from '@swimlane/ngx-datatable'; 

import { AppComponent }       from './app.component'; 

@NgModule({ 
    imports:  [ BrowserModule, HttpModule, NgxDatatableModule ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ], 
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 
}) 
export class AppModule { } 

的package.json的部分:

"dependencies": { 
    "@angular/common": "~4.0.0", 
    "@angular/compiler": "~4.0.0", 
    "@angular/core": "~4.0.0", 
    "@angular/forms": "~4.0.0", 
    "@angular/http": "~4.0.0", 
    "@angular/platform-browser": "~4.0.0", 
    "@angular/platform-browser-dynamic": "~4.0.0", 
    "@angular/router": "~4.0.0", 
    "angular-in-memory-web-api": "~0.3.0", 
    "systemjs": "0.19.40", 
    "core-js": "^2.4.1", 
    "rxjs": "5.0.1", 
    "zone.js": "^0.8.4" 
    }, 
    "devDependencies": { 
    "@angular/cli": "^1.1.3", 
    "@types/jasmine": "2.5.36", 
    "@types/node": "^6.0.46", 
    "canonical-path": "0.0.2", 
    "concurrently": "^3.2.0", 
    "jasmine-core": "~2.4.1", 
    "karma": "^1.3.0", 
    "karma-chrome-launcher": "^2.0.0", 
    "karma-cli": "^1.0.1", 
    "karma-jasmine": "^1.0.2", 
    "karma-jasmine-html-reporter": "^0.2.2", 
    "lite-server": "^2.2.2", 
    "lodash": "^4.16.4", 
    "protractor": "~4.0.14", 
    "rimraf": "^2.5.4", 
    "tslint": "^3.15.1", 
    "typescript": "^2.2.0" 
    } 

systemjs.config.js

(function (global) { 
    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // 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/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: { 
     defaultExtension: 'js', 
     meta: { 
      './*.js': { 
      loader: 'systemjs-angular-loader.js' 
      } 
     } 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this); 

呆了一整天关于这一点,我的工作在同一个地方。我的设置有什么问题?

+0

我不能看到你的''dependencies' @的泳道/ NGX-datatable'。 – developer033

回答

0

我不确定你如何期待ngx数据表加载时,当你不在package.json中引用它时。它需要这个您关联:

“@泳道/ NGX-数据表”: “^ 9.3.0”

安装然后运行。

1

添加下面一行到你的system.config.js>地图

'@swimlane/ngx-datatable': 'npm:@swimlane/ngx-datatable/release/index.js', 
相关问题