Member 11273642 Ответов: 0

Angular materialize не работает над проектом angular2

Я следил за документацией 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 :
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(…)



Полный проект на GitHub :
GitHub - scroobius-pip/A2-Electron-Issue: проблема с угловой материализацией[^]

Что я уже пробовал:

я следил за шаги в https://github.com/angular/material2/blob/master/GETTING_STARTED.md

0 Ответов