InfomediaLtd / angular2-materialize

Angular 2 support for Materialize CSS framework.
https://infomedialtd.github.io/angular2-materialize/
MIT License
407 stars 140 forks source link

Error loading "angular2-materialize" #301

Closed ghost closed 7 years ago

ghost commented 7 years ago

I tried to use angular2-materialize the following way :

systemjs.config.js:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {

  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      'app': 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      "angular2-materialize": "node_modules/angular2-materialize",
      "materialize-css": "node-modules/materialize-css",
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {

      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      },
      "angular2-materialize": {
          "main": "dist/materialize-directive",
          "defaultExtension": "js"
      }
    }
  });
})(this);

root.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeView }  from './Components/TargetTree/tree-view';
import { TargetTree }  from './Components/TargetTree/app';
import { Navigation }  from './Components/Navigation/Navigation';
import { DataService } from './Services/TargetTree/Data.Service';
import { MaterializeModule } from "angular2-materialize";

@NgModule({
  imports:      [ BrowserModule , MaterializeModule],
  declarations: [ TargetTree ,Navigation,TreeView],
  providers:    [ DataService],
  bootstrap:    [ TargetTree ,Navigation]
})
export class AppModule { }

Index.html

...
<head>
        <!--Import Google Icon Font-->
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->
        <link type="text/css" rel="stylesheet" href="css/materialize.css"  media="screen,projection"/>
        <link type="text/css" rel="stylesheet" href="css/style.css"/>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>

    <body style="overflow: hidden;">
        <script type="text/javascript" src="js/Librarys/qwebchannel.js"></script>
        <script type="text/javascript" src="js/Librarys/jquery-3.2.1.js"></script>
        <script type="text/javascript" src="js/Librarys/materialize.js"></script>
        <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="systemjs.config.js"></script>
        <script type="text/javascript" src="js/ConnectionManager.js"></script>
        <script>
            System.import('main.js').catch(function(err){ console.error(err); });
        </script>
...

I already read trough #17 and #18 and #115 but none of these solutions worked for me. I always get the following error :

Browser Console

(index):27 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/traceur
    Error: XHR error (404 Not Found) loading http://localhost:3000/traceur
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1055:39)
        at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:31)
        at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:191:47)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:486:38)
    Error loading http://localhost:3000/traceur
    Unable to load transpiler to transpile http://localhost:3000/node_modules/angular2-materialize/dist/materialize-directive.js
    Error loading http://localhost:3000/node_modules/angular2-materialize/dist/materialize-directive.js as "angular2-materialize" from http://localhost:3000/app/root.module.js
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1055:39)
        at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:31)
        at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:191:47)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:486:38)
    Error loading http://localhost:3000/traceur
    Unable to load transpiler to transpile http://localhost:3000/node_modules/angular2-materialize/dist/materialize-directive.js
    Error loading http://localhost:3000/node_modules/angular2-materialize/dist/materialize-directive.js as "angular2-materialize" from http://localhost:3000/app/root.module.js
(anonymous) @ (index):27
ZoneDelegate.invoke @ zone.js:391
Zone.run @ zone.js:141
(anonymous) @ zone.js:817
ZoneDelegate.invokeTask @ zone.js:424
Zone.runTask @ zone.js:191
drainMicroTaskQueue @ zone.js:584
ZoneTask.invoke @ zone.js:490

I whould be very greatful if someone could provide a working solution using systemjs.(as zip or git repo)

Edit: Everything works fine without any errors until i include the MaterializeModule in my root module

Edit: New error output:

materialize.js:231 Velocity is already loaded. You may be needlessly importing Velocity again; note that Materialize includes Velocity.
zone.js:2263 GET http://localhost:3000/traceur 404 (Not Found)
scheduleTask @ zone.js:2263
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:235
Zone.scheduleMacroTask @ zone.js:258
(anonymous) @ zone.js:2287
proto.(anonymous function) @ zone.js:1426
fetchTextFromURL @ system.src.js:1051
(anonymous) @ system.src.js:1778
ZoneAwarePromise @ zone.js:834
(anonymous) @ system.src.js:1777
(anonymous) @ system.src.js:2806
(anonymous) @ system.src.js:3384
(anonymous) @ system.src.js:3707
(anonymous) @ system.src.js:4099
(anonymous) @ system.src.js:4562
(anonymous) @ system.src.js:4831
(anonymous) @ system.src.js:407
ZoneDelegate.invoke @ zone.js:391
Zone.run @ zone.js:141
(anonymous) @ zone.js:818
ZoneDelegate.invokeTask @ zone.js:424
Zone.runTask @ zone.js:191
drainMicroTaskQueue @ zone.js:584
ZoneTask.invoke @ zone.js:490
(index):31 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/traceur
    Error: XHR error (404 Not Found) loading http://localhost:3000/traceur
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1056:39)
        at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:31)
        at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:191:47)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:486:38)
    Error loading http://localhost:3000/traceur
    Unable to load transpiler to transpile http://localhost:3000/node_modules/angular2-materialize/dist/index.js
    Error loading http://localhost:3000/node_modules/angular2-materialize/dist/index.js as "angular2-materialize" from http://localhost:3000/app/root.module.js
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1056:39)
        at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:31)
        at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:191:47)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:486:38)
    Error loading http://localhost:3000/traceur
    Unable to load transpiler to transpile http://localhost:3000/node_modules/angular2-materialize/dist/index.js
    Error loading http://localhost:3000/node_modules/angular2-materialize/dist/index.js as "angular2-materialize" from http://localhost:3000/app/root.module.js
(anonymous) @ (index):31
ZoneDelegate.invoke @ zone.js:391
Zone.run @ zone.js:141
(anonymous) @ zone.js:818
ZoneDelegate.invokeTask @ zone.js:424
Zone.runTask @ zone.js:191
drainMicroTaskQueue @ zone.js:584
ZoneTask.invoke @ zone.js:490
zone.js:2263 GET http://localhost:3000/node_modules/jquery.min.js 404 (Not Found)
scheduleTask @ zone.js:2263
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:235
Zone.scheduleMacroTask @ zone.js:258
(anonymous) @ zone.js:2287
proto.(anonymous function) @ zone.js:1426
fetchTextFromURL @ system.src.js:1051
(anonymous) @ system.src.js:1778
ZoneAwarePromise @ zone.js:834
(anonymous) @ system.src.js:1777
(anonymous) @ system.src.js:2806
(anonymous) @ system.src.js:3384
(anonymous) @ system.src.js:3707
(anonymous) @ system.src.js:4099
(anonymous) @ system.src.js:4562
(anonymous) @ system.src.js:4831
(anonymous) @ system.src.js:407
ZoneDelegate.invoke @ zone.js:391
Zone.run @ zone.js:141
(anonymous) @ zone.js:818
ZoneDelegate.invokeTask @ zone.js:424
Zone.runTask @ zone.js:191
drainMicroTaskQueue @ zone.js:584
ZoneTask.invoke @ zone.js:490
zone.js:2263 GET http://localhost:3000/node_modules/materialize-css/dist/js/picker.js 404 (Not Found)

As soon as i import materialize-css i get the datepicker error (see above). I think this problem might be related to #292 / #296 . I just downloaded the latest node js FYI,

Just btw your demo : https://npm.runkit.com/angular2-materialize linked on : https://www.npmjs.com/package/angular2-materialize Doest not work

rubyboy commented 7 years ago

@Ipod12321 is this a duplicate of https://github.com/InfomediaLtd/angular2-materialize/issues/288 ?

ghost commented 7 years ago

i think its related but not the same since i got a different error message.

ghost commented 7 years ago

Ok i did not managed to fix this issue but i just switched my project to AngularCLI and everything works fine now.