[英]Angular Materialize not working on angular2 project
我已經按照 angular2 materialize 文檔進行了詳細說明。但我似乎無法讓 javascript 組件正常工作。
我的 index.html
<html> <head> <title>Angular 2 QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles/styles.css"> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.css" media="screen,projection" /> <!-- 1. Load libraries --> <!-- Polyfill(s) for older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/hammerjs/src/hammer.js"></script> <script src="node_modules/materialize-css/dist/js/materialize.min.js"></script> <!-- 2. Configure SystemJS --> <script> System.config({ defaultJSExtensions: true, packages: { "materialize-css": { "main": "dist/js/materialize" }, "materialize": { "main": "dist/materialize-directive", "defaultExtension": "js" } }, map: { "materialize-css": "node-modules/materialize-css", "materialize": "node_modules/angular2-materialize", "angular2-materialize": "node_modules/angular2-materialize" } }); </script> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err) { console.error(err); }); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html>
我的外部 Systemjs 配置：
/** * 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' }; // 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', ]; // 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 = { defaultJSExtensions: true, map: map, packages: packages }; System.config(config); })(this);
我的 chrome 錯誤日志：
未捕獲的 ReferenceError：TOUCH_ACTION_COMPUTE 未定義未捕獲的類型錯誤：無法讀取未定義的屬性“原型”異常：./AppComponent 類中的錯誤 AppComponent - 內聯模板：0:0 異常：./AppComponent 類中的錯誤 AppComponent - 內聯模板：0:0 ORIGINAL EXCEPTION: ReferenceError: Materialize is not defined ORIGINAL STACKTRACE: ReferenceError: Materialize is not defined at MaterializeDirective.performElementUpdates (materialize-directive.js:85) at MaterializeDirective.ngAfterViewInit (materialize-directive.js:53) at DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.ngfactory.js:179) 在 DebugAppView.AppView.detectChanges (core.umd.js:12586) 在 DebugAppView.detectChanges (core.umd.js:12691) 在 DebugAppView.AppView.detectViewChildrenChanges (core.umd.js: 12612) at DebugAppView.AppView.detectChangesInternal (core.umd.js:12597) at DebugAppView.AppView.detectChanges (core.umd.js:12586) at DebugAppView.detectChanges (core.umd.js:12691) at Vie wRef_.detectChanges (core.umd.js:10804) ERROR CONTEXT: DebugContext {_view: _View_AppComponent0, _nodeIndex: 0, _tplRow: 0, _tplCol: 0} 未處理的承諾拒絕：例外：./AppComponent 類 AppComponent 中的錯誤 - 內聯模板： 0:0 ORIGINAL EXCEPTION: ReferenceError: Materialize is not defined ORIGINAL STACKTRACE: ReferenceError: Materialize is not defined at MaterializeDirective.performElementUpdates (file:///C:/Users/simdi%20jinkins/Desktop/Tutorials/Angular2+Electron/A2+ Electron/node_modules/angular2-materialize/dist/materialize-directive.js:85:13) at MaterializeDirective.ngAfterViewInit (file:///C:/Users/simdi%20jinkins/Desktop/Tutorials/Angular2+Electron/A2+Electron /node_modules/angular2-materialize/dist/materialize-directive.js:53:14) 在 DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.ngfactory.js:179:71) 在 DebugAppView.AppView.detectChanges (file:///C: /Users/simdi%20jinkins/Desktop/Tutorials/Angular2+Electron/A2+Electron/node_modules/@angular/core/ /bundles/core.umd.js:12586:18) 在 DebugAppView.detectChanges (file:///C:/Users/simdi%20jinkins/Desktop/Tutorials/Angular2+Electron/A2+Electron/node_modules/@angular/core //bundles/core.umd.js:12691:48) 在 DebugAppView.AppView.detectViewChildrenChanges (file:///C:/Users/simdi%20jinkins/Desktop/Tutorials/Angular2+Electron/A2+Electron/node_modules/@ angular/core//bundles/core.umd.js:12612:23) 在 DebugAppView.AppView.detectChangesInternal (file:///C:/Users/simdi%20jinkins/Desktop/Tutorials/Angular2+Electron/A2+Electron/ node_modules/@angular/core//bundles/core.umd.js:12597:18) 在 DebugAppView.AppView.detectChanges (file:///C:/Users/simdi%20jinkins/Desktop/Tutorials/Angular2+Electron/A2 +Electron/node_modules/@angular/core//bundles/core.umd.js:12586:18) 在 DebugAppView.detectChanges (file:///C:/Users/simdi%20jinkins/Desktop/Tutorials/Angular2+Electron/ A2+Electron/node_modules/@angular/core//bundles/core.umd.js:12691:48) 在 ViewRef_.detectChanges (file:///C:/Users/simdi%20jinkins/Desktop/Tutoria ls/Angular2+Electron/A2+Electron/node_modules/@angular/core//bundles/core.umd.js:10804:69) 錯誤上下文：[對象對象]； 區域： ; 任務： Promise.then ； 值：ViewWrappedException {_wrapperMessage：“./AppComponent 類 AppComponent 中的錯誤 - 內聯模板：0：0”，_originalException：ReferenceError：Materialize 未在 MaterializeDirective.performElementUpdates 處定義（文件：/...，_originalStack：“ReferenceError：未定義 Materialize ↵ at …ules/@angular/core//bundles/core.umd.js:10804:69)", _context: DebugContext, _wrapperStack: "Error: Error in ./AppComponent class AppComponent …dules/@angular/core// bundles/core.umd.js:10191:88"} 錯誤：未捕獲（承諾）：例外：./AppComponent 類 AppComponent 中的錯誤 - 內聯模板：0:0(...)
我做錯了什么？
嘗試在引導應用程序的同一文件中要求它。 對我來說，它是“main.js”。
require('angular2-materialize');
如果您嘗試使用 angular2-materialize，則必須檢查您是否使用了 materialize 0.100.2 版本，因為這是您可以使用的唯一兼容版本
Materialise Parallax不顯示Angular2應用程序中的圖像
[英]Materialize Parallax not showing images in Angular2 application
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.