search

ssuperczynski / ngx-easy-table

The Easiest Angular Table. 12kb gzipped! Tree-shakeable. 55 features and growing!
https://ngx-easy-table.eu
MIT License
372 stars 100 forks source link

Error loading dist/app/index.component #28

Closed robertellis100 closed 8 years ago

robertellis100 commented 8 years ago

(Project started 5/9/2016) Error:

Error: Error: XHR error (404 Not Found) loading http://localhost:3000/dist/app/index.component
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:769:30)
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:356:38)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:256:48)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:423:34)
Error loading http://localhost:3000/dist/app/index.component

error

Follow these six steps to create the same issue:

app.component.ts

///<reference path="./../typings/browser/ambient/es6-shim/index.d.ts"/>
import {Component}     from '@angular/core';
import {bootstrap}     from '@angular/platform-browser-dynamic';
import {AppComponent}  from 'ng2-easy-table/app/app.component';
import {ConfigService} from "./config-service";

@Component({
  selector: 'app',
  directives: [AppComponent],
  providers: [ConfigService],
  template: ` <h3> My use of ng2-easy-table </h3>
    <ng2-table [configuration]="configuration"></ng2-table>
  `
})
export class App {
  constructor(private configuration:ConfigService) {}
}

bootstrap(App, [ConfigService]);

config-service.ts

import {Injectable} from "@angular/core";
@Injectable()
export class ConfigService {
  public searchEnabled = false;
  public orderEnabled = true;
  public globalSearchEnabled = false;
  public footerEnabled = false;
  public paginationEnabled = false;
  public exportEnabled = false;
  public editEnabled = false;
  public resourceUrl = "app/data.json";
  public rows = 10;
}

data.json

{
    "Name": "Dinner With Bernard",
    "Author": "Lola",
    "Guest List": [
        {"Company": "Amazonia", "MarketCap": "5,000,000", "PotluckItem": "drinks"},
        {"Company": "eBayaria", "MarketCap": "20,000,000", "PotluckItem": "desserts"},
        {"Company": "Softmicrosia", "MarketCap": "60,000,000", "PotluckItem": "fruit salads"},
        {"Company": "Ogler", "MarketCap": "6,000,000", "PotluckItem": "chips"},
        {"Company": "EggTorso", "MarketCap": "60,000,000", "PotluckItem": "egg salads"},
        {"Company": "Awchoo", "MarketCap": "100,000,000", "PotluckItem": "green salads"}
    ]
}

main.ts

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {App} from './app.component';

bootstrap(App);

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.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/es6-shim/es6-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>
      System.import('app').catch(function(err){ console.error(err);  });
    </script>
    <script>
    System.import('dist/app/index.component').catch(function (err) {
      console.error(err);
    });
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

systemsj.config.js

(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular',
    'ng2-easy-table':             'node_modules/ng2-easy-table/dist'
  };

  // packages tells the System loader how to load
  // when no filename and/or no extension
  var packages = {
    'app':                        { main: 'index.component.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
    'ng2-easy-table':             { format: 'register', defaultExtension: 'js' },
     dist:                        { format: 'register', defaultExtension: 'js' }
  };

  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade'
  ];

  // add package entries for angular packages in the form
  // '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    map: map,
    packages: packages
  };

  // filterSystemConfig - index.html's chance
  // to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);
ssuperczynski commented 8 years ago

In the app.component.ts (you have bootstrap in the main.ts, so is not neccessary to add it here too)

///<reference path="./../typings/browser/ambient/es6-shim/index.d.ts"/>
import {Component}     from '@angular/core';
import {bootstrap}     from '@angular/platform-browser-dynamic';
import {AppComponent}  from 'ng2-easy-table/app/app.component';
import {ConfigService} from "./config-service";

@Component({
  selector: 'app',
  directives: [AppComponent],
  providers: [ConfigService],
  template: ` <h3> My use of ng2-easy-table </h3>
    <ng2-table [configuration]="configuration"></ng2-table>
  `
})
export class App {
  constructor(private configuration:ConfigService) {}
}

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.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/es6-shim/es6-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>
      System.import('app').catch(function(err){ console.error(err);  });
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

if still doesn't work (this is configuration I use in two another projects and work like a harm) could you add your node version. Will test it with given version.

robertellis100 commented 8 years ago

The recommended changes have been made to the suggested files; however, an error still occurs.

-app/app.component.ts (removed 'bootstrap(App, [ConfigService]);' line from file

bootstrap(App, [ConfigService]);

-index.html (removed '' from file

<script>System.import('dist/app/index.component').catch(function (err) {
      console.error(err); });</script>

Error:

Error: Error: XHR error (404 Not Found) loading http://localhost:3000/ng2-easy-table/app/app.component
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:769:30)
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:356:38)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:256:48)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:423:34)
Error loading http://localhost:3000/ng2-easy-table/app/app.component as "ng2-easy-table/app/app.component" from http://localhost:3000/app/app.component.j

error2

robertellis100 commented 8 years ago

Changed the <my-app> tag within index.html to <app> to match selector 'app'. See my repo

Error: Same error above continues.

robertellis100 commented 8 years ago

Implementation was improved. Redundant files were removed. See myang2tableproj2 repo. Though the new repo (goal: to implement ng2-easy-table with Angular2 QuickStart) results in errors, they are not the same errors as this issue #28; therefore, this issue #28 is closed.

lock[bot] commented 5 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.