作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我全局安装了 Angular cli,然后安装了 Angular Material 2。
我配置了 angular-cli-build.js 和 system-config.ts 如下。
angular-cli-build.js
// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs
/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(ts|js|js.map)',
'rxjs/**/*.+(js|js.map)',
'@angular/**/*.+(js|js.map)',
'@angular2-material/**/*'
]
});
};
系统配置.ts
/** Map relative paths to URLs. */
const map: any = {
'@angular2-material': 'vendor/@angular2-material'
};
/** User packages configuration. */
const components = [
'button',
'card'
];
/** User packages configuration. */
const packages: any = {
'@angular2-material/core': {
format: 'cjs',
defaultExtension: 'js'
},
// Set the default extension for the root package, because otherwise the demo-app can't
// be built within the production mode. Due to missing file extensions.
'.': {
defaultExtension: 'js'
}
};
components.forEach(name => {
packages[`@angular2-material/${name}`] = {
format: 'cjs',
defaultExtension: 'js'
};
});
然后在 app-component.ts 中我导入了 Angular Material 按钮,如下所示。
import { MdButtonModule } from '@angular2-material/button';
directives: [MdButtonModule]
当我运行应用程序时,浏览器控制台中显示以下错误。
GET http://localhost:4200/vendor/@angular2-material/button 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM3369:3fetchTextFromURL @ system.src.js:1154(anonymous function) @ system.src.js:1735ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1734(anonymous function) @ system.src.js:2759(anonymous function) @ system.src.js:3333(anonymous function) @ system.src.js:3600(anonymous function) @ system.src.js:3985(anonymous function) @ system.src.js:4448(anonymous function) @ system.src.js:4700(anonymous function) @ system.src.js:406ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
zone.js:461 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/@angular2-material/button
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:769:30)
at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)
at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34)
Error loading http://localhost:4200/vendor/@angular2-material/button as "@angular2-material/button" from http://localhost:4200/app/app.component.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/@angular2-material/button(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
zone.js:463 Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/@angular2-material/button(…)
然后我尝试改变
import { MdButtonModule } from '@angular2-material/button';
至以下
import { MdButtonModule } from '@angular2-material/button/button';
它给出以下错误。
zone.js:461 Unhandled Promise rejection: TypeError: core_1.NgModule is not a function
at eval (http://localhost:4200/vendor/@angular2-material/core/ripple/ripple.js:168:16)
at Object.eval (http://localhost:4200/vendor/@angular2-material/core/ripple/ripple.js:175:2)
at eval (http://localhost:4200/vendor/@angular2-material/core/ripple/ripple.js:178:4)
at eval (http://localhost:4200/vendor/@angular2-material/core/ripple/ripple.js:179:3)
Evaluating http://localhost:4200/vendor/@angular2-material/core/ripple/ripple.js
Evaluating http://localhost:4200/vendor/@angular2-material/button/button.js
Evaluating http://localhost:4200/app/app.component.js
Evaluating http://localhost:4200/app/index.js
Evaluating http://localhost:4200/main.js
Error loading http://localhost:4200/main.js ; Zone: <root> ; Task: Promise.then ; Value: Error: TypeError: core_1.NgModule is not a function(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
zone.js:463 Error: Uncaught (in promise): Error: TypeError: core_1.NgModule is not a function(…)
我的package.json看起来像
{
"name": "sec-project",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"postinstall": "typings install",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"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",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.2",
"es6-shim": "0.35.1",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"zone.js": "0.6.12",
"@angular2-material/button": "^2.0.0-alpha.6",
"@angular2-material/button-toggle": "^2.0.0-alpha.6",
"@angular2-material/card": "^2.0.0-alpha.6",
"@angular2-material/checkbox": "^2.0.0-alpha.6",
"@angular2-material/core": "^2.0.0-alpha.6",
"@angular2-material/grid-list": "^2.0.0-alpha.6",
"@angular2-material/icon": "^2.0.0-alpha.6",
"@angular2-material/input": "^2.0.0-alpha.6",
"@angular2-material/list": "^2.0.0-alpha.6",
"@angular2-material/menu": "^2.0.0-alpha.6",
"@angular2-material/progress-bar": "^2.0.0-alpha.6",
"@angular2-material/progress-circle": "^2.0.0-alpha.6",
"@angular2-material/radio": "^2.0.0-alpha.6",
"@angular2-material/sidenav": "^2.0.0-alpha.6",
"@angular2-material/slide-toggle": "^2.0.0-alpha.6",
"@angular2-material/slider": "^2.0.0-alpha.6",
"@angular2-material/tabs": "^2.0.0-alpha.6",
"@angular2-material/toolbar": "^2.0.0-alpha.6",
"@angular2-material/tooltip": "^2.0.0-alpha.6"
},
"devDependencies": {
"angular-cli": "1.0.0-beta.10",
"codelyzer": "0.0.20",
"ember-cli-inject-live-reload": "1.4.0",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "0.13.22",
"karma-chrome-launcher": "0.2.3",
"karma-jasmine": "0.3.8",
"protractor": "3.3.0",
"ts-node": "0.5.5",
"tslint": "3.11.0",
"typescript": "1.8.10",
"typings": "1.3.1"
}
}
我的 Angular cli 版本是1.0.0-beta.10
最佳答案
对我来说是字符串解析;它从未解决 ${name}:
packages[`@angular2-material/${name}`]
...所以SystemJS无法正确查找素材包。
此后,我使用以下内容更新了系统配置的该部分:
const materialPackages:string[] = [
'core',
'card',
'button',
'sidenav',
'toolbar'
// etc
];
const packages:any = createCustomConfig(materialPackages);
function createCustomConfig(packages: string[]): any {
return packages.reduce((packageConfig: any, packageName: string) => {
packageConfig['@angular2-material/'+packageName] = {
format: 'cjs',
defaultExtension: 'js',
main: packageName
};
return packageConfig;
}, {});
};
奖金:
我还创建了一个布局模块,并将其导入到应用程序模块中:
布局.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MdCoreModule } from '@angular2-material/core';
import { MdSidenavModule } from '@angular2-material/sidenav';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdCardModule } from '@angular2-material/card';
import { MdButtonModule } from '@angular2-material/button';
@NgModule({
imports: [
CommonModule, MdCoreModule, MdSidenavModule, MdToolbarModule, MdCardModule, MdButtonModule],
exports: [MdCoreModule, MdSidenavModule, MdToolbarModule, MdCardModule, MdButtonModule]
})
export class LayoutModule { }
关于javascript - Angular Material 2 : Not found error,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39051445/
我是一名优秀的程序员,十分优秀!