search

valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
https://valor-software.com/ngx-bootstrap
MIT License
5.53k stars 1.69k forks source link

Failed load resource error 404 NOT Found #634

Closed penndai closed 8 years ago

penndai commented 8 years ago

Hi, I tried to use ng2-bootstrap timepicker and datepicker, but when I reference the script from index.html, I got the error below: http://localhost:50257/angular2/core/src/facade/lang Failed to load resource: the server responded with a status of 404 (Not Found); angular2-polyfills.js:138 Error: XHR error (404 Not Found) loading http://localhost:50257/angular2/core/src/facade/lang(…) http://localhost:50257/angular2/platform-browser Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:50257/traceur Failed to load resource: the server responded with a status of 404 (Not Found)

Following is the contents in the index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://npmcdn.com/angular2@2.0.0-beta.9/es6/dev/src/testing/shims_for_IE.js"></script>

<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/system.js"></script>
<script src="js/Rx.js"></script>
<script src="js/typescript.js"></script>
<script src="js/angular2/angular2.dev.js"></script>

<script src="js/angular2/http.dev.js"></script>
<script src="js/angular2/router.dev.js"></script>
<script src="js/angular2/angular2-polyfills.js"></script>   
<script src="js/Rx.js"></script>

<script src="js/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<!-- 2. Configure SystemJS -->
<script>
  System.config({
    packages: {
        app: {              
            defaultExtension: 'js'
      }
    },
    map: {          
        moment:'js/moment.js'
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

Have no idea what caused the error. Could you please have a look and help me to fix it?

HarpyWar commented 8 years ago

The similar issue when using any component from ng2-bootstrap (AlertComponent in this case), app failed to init:

angular2-polyfills.js:127 GET http://localhost:48320/@angular/core 404 (Not Found)scheduleTask @ angular2-polyfills.js:127ZoneDelegate.scheduleTask @ angular2-polyfills.js:362Zone.scheduleMacroTask @ angular2-polyfills.js:299(anonymous function) @ angular2-polyfills.js:148send @ VM3199:3fetchTextFromURL @ system.src.js:1085(anonymous function) @ system.src.js:1646ZoneAwarePromise @ angular2-polyfills.js:610(anonymous function) @ system.src.js:1645(anonymous function) @ system.src.js:2667(anonymous function) @ system.src.js:3239(anonymous function) @ system.src.js:3506(anonymous function) @ system.src.js:3888(anonymous function) @ system.src.js:4347(anonymous function) @ system.src.js:4599(anonymous function) @ system.src.js:337ZoneDelegate.invoke @ angular2-polyfills.js:349Zone.run @ angular2-polyfills.js:242(anonymous function) @ angular2-polyfills.js:597ZoneDelegate.invokeTask @ angular2-polyfills.js:382Zone.runTask @ angular2-polyfills.js:282drainMicroTaskQueue @ angular2-polyfills.js:500ZoneTask.invoke @ angular2-polyfills.js:452
angular2-polyfills.js:349 Error: Error: XHR error (404 Not Found) loading http://localhost:48320/@angular/core(…)ZoneDelegate.invoke @ angular2-polyfills.js:349Zone.run @ angular2-polyfills.js:242(anonymous function) @ angular2-polyfills.js:597ZoneDelegate.invokeTask @ angular2-polyfills.js:382Zone.runTask @ angular2-polyfills.js:282drainMicroTaskQueue @ angular2-polyfills.js:500ZoneTask.invoke @ angular2-polyfills.js:452
angular2-polyfills.js:127 GET http://localhost:48320/@angular/platform-browser 404 (Not Found)scheduleTask @ angular2-polyfills.js:127ZoneDelegate.scheduleTask @ angular2-polyfills.js:362Zone.scheduleMacroTask @ angular2-polyfills.js:299(anonymous function) @ angular2-polyfills.js:148send @ VM3199:3fetchTextFromURL @ system.src.js:1085(anonymous function) @ system.src.js:1646ZoneAwarePromise @ angular2-polyfills.js:610(anonymous function) @ system.src.js:1645(anonymous function) @ system.src.js:2667(anonymous function) @ system.src.js:3239(anonymous function) @ system.src.js:3506(anonymous function) @ system.src.js:3888(anonymous function) @ system.src.js:4347(anonymous function) @ system.src.js:4599(anonymous function) @ system.src.js:337ZoneDelegate.invoke @ angular2-polyfills.js:349Zone.run @ angular2-polyfills.js:242(anonymous function) @ angular2-polyfills.js:597ZoneDelegate.invokeTask @ angular2-polyfills.js:382Zone.runTask @ angular2-polyfills.js:282drainMicroTaskQueue @ angular2-polyfills.js:500ZoneTask.invoke @ angular2-polyfills.js:452
angular2-polyfills.js:127 GET http://localhost:48320/@angular/core/src/facade/lang 404 (Not Found)scheduleTask @ angular2-polyfills.js:127ZoneDelegate.scheduleTask @ angular2-polyfills.js:362Zone.scheduleMacroTask @ angular2-polyfills.js:299(anonymous function) @ angular2-polyfills.js:148send @ VM3199:3fetchTextFromURL @ system.src.js:1085(anonymous function) @ system.src.js:1646ZoneAwarePromise @ angular2-polyfills.js:610(anonymous function) @ system.src.js:1645(anonymous function) @ system.src.js:2667(anonymous function) @ system.src.js:3239(anonymous function) @ system.src.js:3506(anonymous function) @ system.src.js:3888(anonymous function) @ system.src.js:4347(anonymous function) @ system.src.js:4599(anonymous function) @ system.src.js:337ZoneDelegate.invoke @ angular2-polyfills.js:349Zone.run @ angular2-polyfills.js:242(anonymous function) @ angular2-polyfills.js:597ZoneDelegate.invokeTask @ angular2-polyfills.js:382Zone.runTask @ angular2-polyfills.js:282drainMicroTaskQueue @ angular2-polyfills.js:500ZoneTask.invoke @ angular2-polyfills.js:452
angular2-polyfills.js:127 GET http://localhost:48320/@angular/common 404 (Not Found)scheduleTask @ angular2-polyfills.js:127ZoneDelegate.scheduleTask @ angular2-polyfills.js:362Zone.scheduleMacroTask @ angular2-polyfills.js:299(anonymous function) @ angular2-polyfills.js:148send @ VM3199:3fetchTextFromURL @ system.src.js:1085(anonymous function) @ system.src.js:1646ZoneAwarePromise @ angular2-polyfills.js:610(anonymous function) @ system.src.js:1645(anonymous function) @ system.src.js:2667(anonymous function) @ system.src.js:3239(anonymous function) @ system.src.js:3506(anonymous function) @ system.src.js:3888(anonymous function) @ system.src.js:4347(anonymous function) @ system.src.js:4599(anonymous function) @ system.src.js:337ZoneDelegate.invoke @ angular2-polyfills.js:349Zone.run @ angular2-polyfills.js:242(anonymous function) @ angular2-polyfills.js:597ZoneDelegate.invokeTask @ angular2-polyfills.js:382Zone.runTask @ angular2-polyfills.js:282drainMicroTaskQueue @ angular2-polyfills.js:500ZoneTask.invoke @ angular2-polyfills.js:452
angular2-polyfills.js:127 GET http://localhost:48320/@angular/forms 404 (Not Found)scheduleTask @ angular2-polyfills.js:127ZoneDelegate.scheduleTask @ angular2-polyfills.js:362Zone.scheduleMacroTask @ angular2-polyfills.js:299(anonymous function) @ angular2-polyfills.js:148send @ VM3199:3fetchTextFromURL @ system.src.js:1085(anonymous function) @ system.src.js:1646ZoneAwarePromise @ angular2-polyfills.js:610(anonymous function) @ system.src.js:1645(anonymous function) @ system.src.js:2667(anonymous function) @ system.src.js:3239(anonymous function) @ system.src.js:3506(anonymous function) @ system.src.js:3888(anonymous function) @ system.src.js:4347(anonymous function) @ system.src.js:4599(anonymous function) @ system.src.js:337ZoneDelegate.invoke @ angular2-polyfills.js:349Zone.run @ angular2-polyfills.js:242(anonymous function) @ angular2-polyfills.js:597ZoneDelegate.invokeTask @ angular2-polyfills.js:382Zone.runTask @ angular2-polyfills.js:282drainMicroTaskQueue @ angular2-polyfills.js:500ZoneTask.invoke @ angular2-polyfills.js:452
angular2-polyfills.js:127 GET http://localhost:48320/moment 404 (Not Found)scheduleTask @ angular2-polyfills.js:127ZoneDelegate.scheduleTask @ angular2-polyfills.js:362Zone.scheduleMacroTask @ angular2-polyfills.js:299(anonymous function) @ angular2-polyfills.js:148send @ VM3199:3fetchTextFromURL @ system.src.js:1085(anonymous function) @ system.src.js:1646ZoneAwarePromise @ angular2-polyfills.js:610(anonymous function) @ system.src.js:1645(anonymous function) @ system.src.js:2667(anonymous function) @ system.src.js:3239(anonymous function) @ system.src.js:3506(anonymous function) @ system.src.js:3888(anonymous function) @ system.src.js:4347(anonymous function) @ system.src.js:4599(anonymous function) @ system.src.js:337ZoneDelegate.invoke @ angular2-polyfills.js:349Zone.run @ angular2-polyfills.js:242(anonymous function) @ angular2-polyfills.js:597ZoneDelegate.invokeTask @ angular2-polyfills.js:382Zone.runTask @ angular2-polyfills.js:282drainMicroTaskQueue @ angular2-polyfills.js:500ZoneTask.invoke @ angular2-polyfills.js:452

package.json:

{
  "version": "1.0.0",
  "name": "ASP.NET",
  "private": true,
  "devDependencies": {
    "gulp": "3.9.0",
    "del": "2.2.0"
  },
  "dependencies": {
    "@angular/common": "^2.0.0-rc.4",
    "@angular/compiler": "^2.0.0-rc.4",
    "@angular/core": "^2.0.0-rc.4",
    "@angular/forms": "^0.2.0",
    "angular2": "^2.0.0-beta.17",
    "ng2-bootstrap": "^1.0.23",
    "rxjs": "^5.0.0-beta.10",
    "systemjs": "0.19.31"
  }
}

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="scripts/lib/es6-shim.min.js"></script>
    <script src="scripts/lib/angular2-polyfills.js"></script>
    <script src="scripts/lib/shims_for_IE.js"></script>
    <script src="scripts/lib/system.src.js"></script>
    <script src="scripts/lib/rx.js"></script>
    <script src="scripts/lib/angular2.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
        System.config({
            packages: {
                'scripts': {
                    format: 'cjs',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('scripts/main').then(null, console.error.bind(console));
    </script>
    <script src="scripts/lib/ng2-bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <my-app>Loading...</my-app>
</body>
</html>

app.ts

import {Component} from "angular2/core"
import {AlertComponent} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
    selector: `my-app`,
    directives: [AlertComponent],
    template: `<alert type="info">ng2-bootstrap hello world!</alert>`
export class MyApp {
}

I didn't use ng2-bootstrap before but I guess the errors because of the new versions of Angular2/RxJs/SystemJs that can not be used with it yet?

valorkin commented 8 years ago

Guys check this https://github.com/valor-software/angular2-quickstart PS rc.4 is mandatory

valorkin commented 8 years ago

If any questions https://www.hamsterpad.com/chat/ng2