Error loading "angular2-busy"

[npadhu]

Getting the following error. Any help appreciated.

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:60660/angular2-busy
Error: XHR error (404 Not Found) loading http://localhost:60660/angular2-busy
Error loading http://localhost:60660/angular2-busy as "angular2-busy" from http://localhost:60660/app/app.module.js

Tried to follow the guidelines from the documentation.

Package.json

....
 "dependencies": {
    //others
    "angular2-busy": "1.0.2"      
  },
....

Systemjs.config.js

 //....
System.config({
        paths: {
            'npm:': 'lib/npmlibs/'
        },
        map: {
            app: 'app',         
            'rxjs': 'npm:rxjs',
        // ...other libraries..
            'ts-metadata-helper': 'npm:ts-metadata-helper',
            'angular2-dynamic-component': 'npm:angular2-dynamic-component',
            'angular2-busy': 'npm:angular2-busy'
        },
        packages: {
       //....other...
            'ts-metadata-helper': {
                defaultExtension: 'js'
            },
            'angular2-dynamic-component': {
                defaultExtension: 'js'
            },
            'angular2-busy': {
                main: './index.js',
                defaultExtension: 'js'
            }
        }
    });

app.module.ts

...
import { BusyModule } from 'angular2-busy';
...
@NgModule({
   imports: [
       ....
      BusyModule
   ]
...
})

Contents of folder "lib\npmlibs\angular2-busy" busy.component.js busy.directive.js busy.module.js busy.service.js busy-backdrop.component.js busy-config.js index.js pormise-tracker.service.js util.js

[npadhu]

After adding the following dependencies to Package.json and moved their .js files to their corresponding folders under lib/npmlibs/ I got past the previous error and getting this error.

"dependencies": {
    //others
    "angular2-busy": "1.0.2",   //previously added
    "ts-metadata-helper": "0.0.4",
    "angular2-dynamic-component": "1.0.5"
}

[al-pt-old]

You must remove the dependencies "ts-metadata-helper" & "angular2-dynamic-component" from your package, because "angular2-dynamic-component": "1.0.5" is not compatible with "angular2-dynamic-component": "0.0.50" and they are included as dependencies

{ "name": "angular2-busy", ... }, "dependencies": { "ts-metadata-helper": "0.0.3", "angular2-dynamic-component": "0.0.50" },

[npadhu]

Thank you apoterenko. But that brings me to the error in the original post.

[npadhu]

Please help with the new error

I would like to emphasis that my dependencies are under /libs/npmlibs and not under the default _/nodemodules folder.

I added the following to map and packages of systemjs.config.js related to core-js

   System.config({
        paths: {
            // paths serve as alias
            'npm:': 'lib/npmlibs/'
        },
        // map tells the System loader where to look for things
        map: {
            //other maps...

            //as per angular2-busy doc

            'angular2-busy': 'npm:angular2-busy',
            'ts-metadata-helper': 'npm:angular2-busy/node_modules/ts-metadata-helper',
            'angular2-dynamic-component': 'npm:angular2-busy/node_modules/angular2-dynamic-component',

            //added these because MetadataFactory could not find core-js/...

            'core-js/es6/reflect': 'npm:core-js/es6/reflect',
            'core-js/es7/reflect': 'npm:core-js/es7/reflect'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            //other packages...

            //from angular2-busy doc
            'ts-metadata-helper': {
                defaultExtension: 'js'
            },
            'angular2-dynamic-component': {
                defaultExtension: 'js'
            },
            'angular2-busy': {
                main: './index.js',
                defaultExtension: 'js'
            },

            //added these, thinking this would resolve the new error about reflect
            //(see image attached to this post)
            //but that did not help.
            //I THINK THIS IS WHERE THE PROBLEM LIES

            'core-js/es6/reflect': {
                defaultExtension: 'js'
            },
            'core-js/es7/reflect': {
                defaultExtension: 'js'
            }
        }
    });

The dependencies in Package.json

"dependencies": {
    "@angular/common": "~2.0.1",
    "@angular/compiler": "~2.0.1",
    "@angular/core": "~2.0.1",
    "@angular/forms": "~2.0.1",
    "@angular/http": "~2.0.1",
    "@angular/platform-browser": "~2.0.1",
    "@angular/platform-browser-dynamic": "~2.0.1",
    "@angular/router": "~3.0.1",
    "@angular/upgrade": "~2.0.1",
    "angular-in-memory-web-api": "0.1.6",
    "rxjs": "5.0.0-rc.1",
    "core-js": "2.4.1",
    "reflect-metadata": "0.1.8",
    "systemjs": "0.19.39",
    "zone.js": "0.6.23",
    "angular2-busy": "1.0.2"
  },

My folder tree

The core-js/es7 with reflect

[al-pt-old]

Try specify extension explicitly 'core-js/es6/reflect': 'npm:core-js/es6/reflect.js', 'core-js/es7/reflect': 'npm:core-js/es7/reflect.js'

[npadhu]

Adding the map as you had suggested seemed to help for that error and opened up bunch of other xhr not found on ../modules/es?.???? objects.

I tried to follow your lead and add for each of the things that it complained but after few errors it went back to complain about not found for the ones that I already added the map. At that point I lost all my hopes.

            '../modules/es7.reflect.define-metadata': 'npm:core-js/modules/es7.reflect.define-metadata.js',
            '../modules/es7.reflect.delete-metadata': 'npm:core-js/modules/es7.reflect.delete-metadata.js',
            '../modules/es7.reflect.get-metadata': 'npm:core-js/modules/es7.reflect.get-metadata.js',
            '../modules/es7.reflect.get-own-metadata': 'npm:core-js/modules/es7.reflect.get-own-metadata.js',
            '../modules/es7.reflect.get-own-metadata-keys': 'npm:core-js/modules/es7.reflect.get-own-metadata-keys.js',
            '../modules/es7.reflect.has-metadata': 'npm:core-js/modules/es7.reflect.has-metadata.js',
            '../modules/es7.reflect.has-own-metadata': 'npm:core-js/modules/es7.reflect.has-own-metadata.js',
            '../modules/es7.reflect.metadata': 'npm:core-js/modules/es7.reflect.metadata.js',
            '../modules/es7.reflect.get-metadata-keys': 'npm:core-js/modules/es7.reflect.get-metadata-keys.js',
            '../modules/_core': 'npm:core-js/modules/_core.js',

            '../modules/es6.reflect.apply': 'npm:core-js/modules/es6.reflect.apply.js',
            '../modules/es6.reflect.construct': 'npm:core-js/modules/es6.reflect.construct.js',
            '../modules/es6.reflect.define-property': 'npm:core-js/modules/es6.reflect.define-property.js',
            '../modules/es6.reflect.delete-property': 'npm:core-js/modules/es6.reflect.delete-property.js',
            '../modules/es6.reflect.enumerate': 'npm:core-js/modules/es6.reflect.enumerate.js',
            '../modules/es6.reflect.get': 'npm:core-js/modules/es6.reflect.get.js',
            '../modules/es6.reflect.get-own-property-descriptor': 'npm:core-js/modules/es6.reflect.get-own-property-descriptor.js',
            '../modules/es6.reflect.get-prototype-of': 'npm:core-js/modules/es6.reflect.get-prototype-of.js',
            '../modules/es6.reflect.has': 'npm:core-js/modules/es6.reflect.has.js',
            '../modules/es6.reflect.is-extensible': 'npm:core-js/modules/es6.reflect.is-extensible.js',
            '../modules/es6.reflect.own-keys': 'npm:core-js/modules/es6.reflect.own-keys.js',
            '../modules/es6.reflect.prevent-extensions': 'npm:core-js/modules/es6.reflect.prevent-extensions.js',
            '../modules/es6.reflect.set': 'npm:core-js/modules/es6.reflect.set.js',
            '../modules/es6.reflect..set-prototype-of': 'npm:core-js/modules/es6.reflect..set-prototype-of.js'

[GopiAnnan]

@apoterenko ,

Me to have the same issue..

rror: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/angular2-dynamic-component/index Error: XHR error (404 Not Found) loading http://localhost:3000/angular2-dynamic-component/index at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29) at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35) at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33) Error loading http://localhost:3000/angular2-dynamic-component/index as "angular2-dynamic-component/index" from http://localhost:3000/node_modules/angular2-busy/build/src/busy.module.js at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29) at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35) at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33) Error loading http://localhost:3000/angular2-dynamic-component/index as "angular2-dynamic-component/index" from http://localhost:3000/node_modules/angular2-busy/build/src/busy.module.js

[GopiAnnan]

@apoterenko

I have tried above mentioned everything. but the result is same as what npadhu mentioned.

(index):70 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/core-js/modules/es6.reflect.apply Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/core-js/modules/es6.reflect.apply at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29) at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35) at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33) Error loading http://localhost:3000/node_modules/core-js/modules/es6.reflect.apply as "../modules/es6.reflect.apply" from http://localhost:3000/node_modules/core-js/es6/reflect.js at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29) at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35) at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33) Error loading http://localhost:3000/node_modules/core-js/modules/es6.reflect.apply as "../modules/es6.reflect.apply" from http://localhost:3000/node_modules/core-js/es6/reflect.js (anonymous) @ (index):70 ZoneDelegate.invoke @ zone.js:232 Zone.run @ zone.js:114 (anonymous) @ zone.js:502 ZoneDelegate.invokeTask @ zone.js:265 Zone.runTask @ zone.js:154 drainMicroTaskQueue @ zone.js:401 ZoneTask.invoke @ zone.js:339 zone.js:1382 GET http://localhost:3000/node_modules/core-js/modules/es6.reflect.construct 404 (Not Found) scheduleTask @ zone.js:1382 ZoneDelegate.scheduleTask @ zone.js:245 Zone.scheduleMacroTask @ zone.js:171 (anonymous) @ zone.js:1405 send @ VM392:3 fetchTextFromURL @ system.src.js:1051 (anonymous) @ system.src.js:1781 ZoneAwarePromise @ zone.js:518 (anonymous) @ system.src.js:1780 (anonymous) @ system.src.js:2809 (anonymous) @ system.src.js:3387 (anonymous) @ system.src.js:3701 (anonymous) @ system.src.js:4093 (anonymous) @ system.src.js:4556 (anonymous) @ system.src.js:4825 (anonymous) @ system.src.js:407 ZoneDelegate.invoke @ zone.js:232 Zone.run @ zone.js:114 (anonymous) @ zone.js:502 ZoneDelegate.invokeTask @ zone.js:265 Zone.runTask @ zone.js:154 drainMicroTaskQueue @ zone.js:401 ZoneTask.invoke @ zone.js:339 zone.js:1382 GET http://localhost:3000/node_modules/core-js/modules/es6.reflect.define-property 404 (Not Found) scheduleTask @ zone.js:1382 ZoneDelegate.scheduleTask @ zone.js:245 Zone.scheduleMacroTask @ zone.js:171 (anonymous) @ zone.js:1405 send @ VM392:3 fetchTextFromURL @ system.src.js:1051 (anonymous) @ system.src.js:1781 ZoneAwarePromise @ zone.js:518 (anonymous) @ system.src.js:1780 (anonymous) @ system.src.js:2809 (anonymous) @ system.src.js:3387 (anonymous) @ system.src.js:3701 (anonymous) @ system.src.js:4093 (anonymous) @ system.src.js:4556 (anonymous) @ system.src.js:4825 (anonymous) @ system.src.js:407 ZoneDelegate.invoke @ zone.js:232 Zone.run @ zone.js:114 (anonymous) @ zone.js:502 ZoneDelegate.invokeTask @ zone.js:265 Zone.runTask @ zone.js:154 drainMicroTaskQueue @ zone.js:401 ZoneTask.invoke @ zone.js:339 zone.js:1382 GET http://localhost:3000/node_modules/core-js/modules/es6.reflect.enumerate 404 (Not Found)

[jovanmarcetic]

I cannot also make this plugin to work.

First cannot find 'angular2-busy', after defining it in system.config.js then it looks for 'angular2-dynamic-component', 'ts-metadata-helper', es6, es7.... and everything the same as in previous comments.

Is there maybe any previous version that doesn't have this problem?

[jasonburrows]

Just adding - I've got the same issue. No way I can manage to get this to work with systemjs

[mdsauer]

@npadhu I am able to get it to work (in JIT mode). the only difference I have from your configuration is that in my system.config.js I had to also add in the packages: 'core-js': { defaultExtension: 'js' },

Note: I have moved on from this library since I am not able to get it to work with AOT.

[roddydairion]

How I fixed my 404 angular2-busy not found.

In my systemjs.config.js add in the map section

var map = { 
    //Add the following to the map section 
    'angular2-busy': 'node_modules/angular2-busy/build/src', 
    'angular2-dynamic-component': 'node_modules/angular2-dynamic-component', 
    'ts-metadata-helper': 'node_modules/ts-metadata-helper', 
    'core-js': 'node_modules/core-js' 
};

And in the packages section add
var packages = { 
    //Add the following to your packages section 
    'angular2-busy': { main: 'index.js', defaultExtension:'js' }, 
    'angular2-dynamic-component': { main:'index.js', defaultExtension:'js' }, 
    'ts-metadata-helper': { main:'index.js', defaultExtension:'js' }, 
    'core-js': { main:'index.js', defaultExtension:'js' } 
};

[saggy2012]

after following all above steps i m facing below error. can somebody please help on this ?

[jasonburrows]

Yeah same issue for me @saggy2012. Let me know if you fix this and I'll do the same.

[jasonburrows]

Hey @saggy2012 - got it to work and maybe you had made the same error as me. I had gone through setting this up before and then removed it all when I couldn't get it to work. When I came back to try @roddydairion's solution, I failed to put the BusyModule import back in my module file. So basically I went through the setup instructions in the documentation (add the css, import BusyModule, etc) and it all works when you apply the configuration from @roddydairion in your systemjs.config.js file.

[guikubivan]

@roddydairion answer worked for me too. Not sure if the README is correct.

[calvinKG]

This works best with angular CLI

[dhilgarth]

Not for me. I am also getting this error

ERROR in BusyModule is not an NgModule

[wickeym]

I also had this issue, @roddydairion 's solution worked for me too.

[aepgit]

I'm using angular CLI and followed instructions carefully, but still ended up with "Template parse errors: Can't bind to 'ngBusy' since it isn't a known property of 'div'".

[leeroya]

I had a similar problem/ solution as some of the people mentioned above. turns out that something added: build to the string that represents the path to the package location in the project.config.ts :

{
        name: 'angular2-busy',
        // Path to the package's bundle
        path: 'node_modules/angular2-busy',
        packageMeta: {
          main: 'index.js',
          defaultExtension: 'js'
 }

removing the word build after angular2-busy/ fixed the build in a container.

The Dockerfile that I used:

FROM node:11
WORKDIR /app
RUN npm install -g express && npm install -g sass && npm install --global gulp && npm link gulp && npm install -g grunt-cli
WORKDIR /build
COPY . .
RUN npm install
RUN nodejs node_modules/node-sass/scripts/install.js
RUN npm rebuild node-sass
RUN npm run build.prod

Not the most performant Dockerfile but one that illustrates building:

• https://github.com/mgechev/angular-seed I tried the Dockerfile in the seed but seemed not to be able to use the default Dockerfile as their build still failed, but the seed project that I had had not been updated for some time.