2016-08-12 22 views
0

私はangular2のマテリアライズド・ドキュメントをpoint.butに従っていますが、javascriptコンポーネントを動作させるようです。angular2はangular2プロジェクトで動作しません

私の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);

そして、私のクロムのエラーログ:

Uncaught ReferenceError: TOUCH_ACTION_COMPUTE is not defined Uncaught TypeError: Cannot read property 'prototype' of undefined EXCEPTION: Error in ./AppComponent class AppComponent - inline template:0:0 EXCEPTION: Error in ./AppComponent class AppComponent - inline template: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) at DebugAppView.AppView.detectChanges (core.umd.js:12586) at DebugAppView.detectChanges (core.umd.js:12691) at 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 ViewRef_.detectChanges (core.umd.js:10804) ERROR CONTEXT: DebugContext {_view: _View_AppComponent0, _nodeIndex: 0, _tplRow: 0, _tplCol: 0} Unhandled Promise rejection: EXCEPTION: Error in ./AppComponent class AppComponent - inline template: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) at DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.ngfactory.js:179:71) at DebugAppView.AppView.detectChanges (file:///C:/Users/simdi%20jinkins/Desktop/Tutorials/Angular2+Electron/A2+Electron/node_modules/@angular/core//bundles/core.umd.js:12586:18) at DebugAppView.detectChanges (file:///C:/Users/simdi%20jinkins/Desktop/Tutorials/Angular2+Electron/A2+Electron/node_modules/@angular/core//bundles/core.umd.js:12691:48) at DebugAppView.AppView.detectViewChildrenChanges (file:///C:/Users/simdi%20jinkins/Desktop/Tutorials/Angular2+Electron/A2+Electron/node_modules/@angular/core//bundles/core.umd.js:12612:23) at DebugAppView.AppView.detectChangesInternal (file:///C:/Users/simdi%20jinkins/Desktop/Tutorials/Angular2+Electron/A2+Electron/node_modules/@angular/core//bundles/core.umd.js:12597:18) at DebugAppView.AppView.detectChanges (file:///C:/Users/simdi%20jinkins/Desktop/Tutorials/Angular2+Electron/A2+Electron/node_modules/@angular/core//bundles/core.umd.js:12586:18) at DebugAppView.detectChanges (file:///C:/Users/simdi%20jinkins/Desktop/Tutorials/Angular2+Electron/A2+Electron/node_modules/@angular/core//bundles/core.umd.js:12691:48) at ViewRef_.detectChanges (file:///C:/Users/simdi%20jinkins/Desktop/Tutorials/Angular2+Electron/A2+Electron/node_modules/@angular/core//bundles/core.umd.js:10804:69) ERROR CONTEXT: [object Object] ; Zone: ; Task: Promise.then ; Value: ViewWrappedException {_wrapperMessage: "Error in ./AppComponent class AppComponent - inline template:0:0", _originalException: ReferenceError: Materialize is not defined at MaterializeDirective.performElementUpdates (file:/…, _originalStack: "ReferenceError: Materialize is not defined↵ 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"} Error: Uncaught (in promise): EXCEPTION: Error in ./AppComponent class AppComponent - inline template:0:0(…)

私は間違っていますか?

答えて

0

アプリケーションをブートストラップするのと同じファイルにそれを要求してください。私にとっては、「main.js」です。

require('angular2-materialize');

+0

これは問題ではありません。私はあなたが何を求めているのか分かりません。編集してこれをより明確にしてください。 – rmcsharry

+0

私は質問していませんでしたか?多分あなたは元のポストに応答することを意味する –

+0

私の間違い、あなたの答えは私のレビューのキューにポップアップと私はそれが質問のキューだと思った、混乱のために残念! – rmcsharry

関連する問題