角材料2：未找到錯誤

我如下配置角度-CLI-build.js &系統config.ts。

角-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/**/*' 
] 
}); 
};

系統config.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我如下進口角材料按鈕。

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" 
     } 
    }

我的角度CLI版本是1.0.0 ，beta.10

來源

2016-08-20 Rose18

您的package.json顯示AngularRC4。 RC4不支持模塊。那麼你試圖使用不支持NgModules的Material Design alpha 6呢？聽起來對我來說，你需要將角度更新爲rc5，將你的md更新爲角度7，然後從那裏開始。 – Helzgate

你的評論真的很有幫助。我更新RC4 RC5和使用阿爾法7.它的工作。但我很好奇，RC5的每個功能都與RC5兼容？ – Rose18

對我來說這是字符串解析;它從來沒有解決$ {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 { }

來源

2016-08-26 18:56:11

角材料2：未找到錯誤

回答

相關問題