Angular2材質設計alpha.9-3在@ angular /材質上找不到'404'

Question

我按照角材料2入門指南安裝@ angular/material。通過Atom，我更新了package.json，app.module，並且超越了入門指示，更新了systemjs.config，如下所示：'@ angular/material'：'node_modules/@ angular/material'，

I得到這些錯誤：zone.js：1274 GET http://localhost:3000/node_modules/@angular/material/ 404（未找到）

（SystemJS）XHR錯誤（404未找到）裝載http://localhost:3000/node_modules/@angular/material（...）

我相信我已經跟蹤這個問題的事實，許多@angular文件夾具有包含umd文件的包子文件夾，但@ angular/material文件夾沒有包子文件夾。因此，'開箱'功能找不到@角度/材料/ material.umd.js

systemjs是在我的舒適區之外，所以我不確定以上，但我無法解決404問題與新的文件結構的alpha.9-3下面是相關的代碼（其他組件未顯示）。

的package.json

"@angular/material": "2.0.0-alpha.9-3", 

app.module

import { MaterialModule } from '@angular/material'; 
@NgModule({ 
    imports: MaterialModule.forRoot(), 

systemjs.config

(function(global) { 
    var map = { 
     'app': 'app', 
     // angular bundles 
     '@angular':     'node_modules/@angular', 
     // other libraries 
     'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 
     'rxjs':      'node_modules/rxjs', 
     '@angular/material': 'node_modules/@angular/material', 
    }; 
    var packages = { 
     'app': { main: 'main.js', defaultExtension: 'js' }, 
     'rxjs':{ defaultExtension: 'js' }, 
     'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 
    }; 
    var ngPackageNames = [ 
    'common', 
    'compiler', 
    'core', 
    'forms', 
    'http', 
    'platform-browser', 
    'platform-browser-dynamic', 
    'platform-server', 
    'router', 
    'upgrade', 
    ]; //adding 'material' to the array causes a different 404 error 
    function packIndex(pkgName) { 
     packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    } 
    function packUmd(pkgName) { 
     packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 
    } 
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; 
    ngPackageNames.forEach(setPackageConfig); 
    var config = { 
     map: map, 
     packages: packages 
    }; 
    System.config(config); 

    })(this); //end of function(global) 

我檢查我的文件夾/文件結構和@角/材料/材料。 umd.js絕對在那裏。我如何擺脫404找不到？

Answer 1

取下map

下面 '@角/材料'： 'node_modules/@角/材料'，

添加material到ngPackageNames數組：

var ngPackageNames = [ 
... 
'material' 
]; 

然後用

替換你的 packUmd功能0

function packUmd(pkgName) { 
    packages['@angular/'+pkgName] = { 
    main: (pkgName !== 'material' ? 'bundles/' : '') + pkgName + '.umd.js', 
    defaultExtension: 'js' 
    }; 
} 

之後，它應該工作

或者在angular2快速啓動使用此配置，如：

(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', 

     '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js', 
     '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', 
     '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js', 
     '@angular/material': 'npm:@angular/material/bundles/material.umd.js' 

     // other libraries 
     'rxjs':      'npm:rxjs' 
    }, 
    // 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' 
     } 
    } 
    }); 
})(this);