Angular2 Material Design alpha.9-3对@ angular / material有'404 not found' [英] Angular2 Material Design alpha.9-3 has '404 not found' for @angular/material
问题描述
我按照角度材料2的说明开始安装@ angular / material。通过Atom,我更新了package.json,app.module,除了Getting Started说明之外,我更新了systemjs.config,如下所示:'@ angular / material':'node_modules / @ angular / material',
I have followed the instructions at angular material2 Getting Started to install @angular/material. Via Atom, I updated package.json, app.module, and beyond the Getting Started instructions, I updated systemjs.config, as follows: '@angular/material':'node_modules/@angular/material',
我收到以下错误:zone.js:1274 GET http: // localhost:3000 / node_modules / @ angular / material / 404(未找到)
I get these errors: zone.js:1274 GET http://localhost:3000/node_modules/@angular/material/ 404 (Not Found)
(SystemJS)XHR错误(404未找到)loading http:// localhost:3000 / node_modules / @ angular / material (...)
(SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/@angular/material(…)
我相信我已经跟踪了这个问题,因为很多@angular文件夹都有一个包含umd文件的bundle子文件夹,但是@ angular / material文件夹没有一个bundle子夹。因此,'拆包'功能找不到@ angular / material / material.umd.js
I believe I have tracked the problem to the fact that many @angular folders have a bundle sub-folder containing the umd file, but the @angular/material folder does not have a bundle sub-folder. Hence, the 'unpacking' function can't find @angular/material/material.umd.js
systemjs在我的舒适区之外所以我不确定上面,但我无法用alpha.9-3的新文件结构解决404问题。这是相关代码(其他组件未显示)。
systemjs is outside my comfort zone so I'm not sure of the above, but I am not able to solve the 404 problem with the new file structure of alpha.9-3 Here is relevant code (other components are not shown).
package.json
package.json
"@angular/material": "2.0.0-alpha.9-3",
app.module
app.module
import { MaterialModule } from '@angular/material';
@NgModule({
imports: MaterialModule.forRoot(),
systemjs .config
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)
我检查了我的文件夹/文件结构和@ angular / material /material.umd.js肯定在那里。如何摆脱未找到的404?
I have checked my folder/file structure and @angular/material/material.umd.js is definitely there. How do I get rid of the 404 not found?
推荐答案
从地图中删除以下内容
'@ angular / material':'node_modules / @ angular / material',
将材料
添加到 ngPackageNames
数组:
var ngPackageNames = [
...
'material'
];
然后用<替换 packUmd
函数/ p>
And then replace your packUmd
function with
function packUmd(pkgName) {
packages['@angular/'+pkgName] = {
main: (pkgName !== 'material' ? 'bundles/' : '') + pkgName + '.umd.js',
defaultExtension: 'js'
};
}
之后它应该可以工作
或者在angular2快速启动中使用此配置:
Or use this config like in angular2 quick start:
(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);
这篇关于Angular2 Material Design alpha.9-3对@ angular / material有'404 not found'的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!