【发布时间】：2016-07-17 06:56:01
【问题描述】：
注意：我不使用 Angular Cli。
我添加了 @angular2-material/core 包。然后我安装了其他 angular2-material 组件，如 @angular2-material/button、@angular2-material/card 等。
systemjs.config.js
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
'@angular2-material': 'node_modules/@angular2-material',
// <--------------added this above line----------------------
};
// 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' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
//<------------------added this below part--------------------------------
var materialPackages=[
'core',
//'button',
//'card',
'list',
];
materialPackages.forEach(function(pkgName) {
packages['@angular2-material/'+pkgName] = { format: 'cjs', defaultExtension: 'js'};
});
//<----------------------till here---------------------------------
// 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);
当我运行我的应用程序时，我看到以下错误，
加载资源失败：服务器响应状态为 404 （未找到） http://localhost:3000/node_modules/@angular2-material/sidenav/ 失败 加载资源：服务器响应状态为 404（不是 找到）http://localhost:3000/node_modules/@angular2-material/toolbar/ 加载资源失败：服务器响应状态为 404 （未找到）localhost/:16 错误：错误：XHR 错误（404 未找到） 加载 http://localhost:3000/node_modules/@angular2-material/button(…)(匿名 函数）@localhost/:16 http://localhost:3000/node_modules/@angular2-material/card/ 失败 加载资源：服务器响应状态为 404（未找到） http://localhost:3000/node_modules/@angular2-material/input/ 失败 加载资源：服务器响应状态为 404（未找到） http://localhost:3000/node_modules/@angular2-material/checkbox/ 失败 加载资源：服务器响应状态为 404（不是 找到）http://localhost:3000/node_modules/@angular2-material/radio/ 加载资源失败：服务器响应状态为 404 （未找到） http://localhost:3000/node_modules/@angular2-material/icon/ 失败 加载资源：服务器响应状态为 404（未找到） http://localhost:3000/node_modules/@angular2-material/list/ 失败 加载资源：服务器响应状态为 404（未找到） http://localhost:3000/favicon.ico资源加载失败：服务器 响应状态为 404（未找到）
【问题讨论】：
-
stackoverflow.com/questions/39557819/… 你可以查看我上面的问题，它本身就有答案。
标签： angular npm angular2-material