NOTE :我不使用 Angular-CLI
我有运行angular2-quick-start应用程序 .
package.json
NOTE :我在 packag.json 中有 angular2-material 参考
{
"name": "angular2",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
...
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
...
...
"@angular2-material/core":"2.0.0-alpha.6", //<---- installed it
"@angular2-material/button":"2.0.0-alpha.6" //<---- installed it
},
"devDependencies": {
...
}
}
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/core': 'node_modules/@angular2-material/core', //<---added
'@angular2-material/button': 'node_modules/@angular2-material/button', //<---added
};
// 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' },
'@angular2-material/core': { main: 'core.js' }, //<----added
'@angular2-material/button': { main: 'button.js' }, //<----added
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// 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);
app.component.ts
import { Component } from '@angular/core';
import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button'; //<---added
@Component({
selector: 'my-app',
directives: [MD_BUTTON_DIRECTIVES], //<---added
template: `<h1>My First Angular 2 App</h1>
<button md-button>Basic Button</button>
`
})
export class AppComponent { }
zone.js:101 GET http:// localhost:3000 / node_modules / @ angular2-material / button / 404(Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js :273(匿名函数)@ zone.js:122send @ VM278:3fetchTextFromURL @system.src.js:1156(匿名函数)@system.src.js:1739ZoneAwarePromise @ zone.js:584(匿名函数)@system.src .js:1738(匿名函数)@system.src.js:2764(匿名函数)@system.src.js:3338(匿名函数)@system.src.js:3605(匿名函数)@system.src.js :3990(匿名函数)@system.src.js:4453(匿名函数)@system.src.js:4705(匿名函数)@system.src.js:408ZoneDelegate.invoke @ zone.js:323Zone.run @ zone .js:216(匿名函数)@ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426(index):16错误:错误:XHR错误(404 Not Found)加载http:// localhost:3000 / node_modules / @ angular2-ma terial /按钮(...)
2 回答
导入@ angular / material而不是angular2-material