I have followed the angular2 materialize documentation to the point.but i cant seem to get the javascript components to work.
My 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>My External Systemjs config:
/**
* 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);And my chrome error log :
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(…)
What am i doing wrong?
