Angular2：如何使用Angular-CLI將節點模塊加載到組件中時解決404錯誤

我使用angular-cli工具創建了我的應用程序。我正在嘗試將ng2-file-upload軟件包加載到我的應用程序中，但它得到了404。我一直在嘗試更新system-config.ts以映射到適當的軟件包，但我仍然得到404 。Angular2：如何使用Angular-CLI將節點模塊加載到組件中時解決404錯誤

這裏是我的系統config.ts文件：

"use strict"; 

// SystemJS configuration file, see links for more information 
// https://github.com/systemjs/systemjs 
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md 

/*********************************************************************************************** 
* User Configuration. 
**********************************************************************************************/ 
/** Map relative paths to URLs. */ 
const map: any = { 
    'ng2-file-upload': 'node_modules/ng2-file-upload' 
}; 

/** User packages configuration. */ 
const packages: any = { 
    'ng2-file-upload': { defaultExtension: 'js'} 
}; 

//////////////////////////////////////////////////////////////////////////////////////////////// 
/*********************************************************************************************** 
* Everything underneath this line is managed by the CLI. 
**********************************************************************************************/ 
const barrels: string[] = [ 
    // Angular specific barrels. 
    '@angular/core', 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/forms', 
    '@angular/http', 
    '@angular/router', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 

    // Thirdparty barrels. 
    'rxjs', 

    // App specific barrels. 
    'app', 
    'app/shared', 
    'app/order-details', 
    'app/check-payment-component', 
    'app/check-payment', 
    'app/myorder', 
    'app/item-details', 
    'app/shipping', 
    'app/payment', 
    'app/price-line', 
    'app/money-order-payment', 
    'app/credit-card-payment', 
    'app/wire-transfer-payment', 
    /** @cli-barrel */ 
]; 

const cliSystemConfigPackages: any = {}; 
barrels.forEach((barrelName: string) => { 
    cliSystemConfigPackages[barrelName] = { main: 'index' }; 
}); 

/** Type declaration for ambient System. */ 
declare var System: any; 

// Apply the CLI SystemJS configuration. 
System.config({ 
    map: { 
    '@angular': 'vendor/@angular', 
    'rxjs': 'vendor/rxjs', 
    'main': 'main.js' 
    }, 
    packages: cliSystemConfigPackages 
}); 

// Apply the user's configuration. 
System.config({ map, packages });

我將它導入到我的組件是這樣的：

import { FileUploader, FileUploaderOptions, FILE_UPLOAD_DIRECTIVES } from 'ng2-file-upload';

我的應用程序結構如下所示：

最後這裏是我得到的錯誤：

來源

2016-07-29 Jason Shultz

改變你在system-config.ts映射

const map: any = { 
    'ng2-file-upload': 'vendor/ng2-file-upload' 
};

下一頁告訴角CLI來複制vendor目錄你的依賴。在源目錄中查找angular-cli-build.js。

然後更新vendorNpmFiles陣列從node_modules/ng2-file-upload複製一切都像

ng2-file-upload/**/*.*

來源

2016-07-29 18:34:36

Angular2：如何使用Angular-CLI將節點模塊加載到組件中時解決404錯誤

回答

相關問題