404 ng2-bs3-modal/ng2-bs3-modal not found

[nickhod]

I'm using Angular 2 beta 8 based on the angular2-quickstart module. ng2-bs3-modal is installed in node_modules and I'm using the import given in the documentation

import {MODAL_DIRECTIVES} from 'ng2-bs3-modal/ng2-bs3-modal';

The Typescript compiler can find the module however it results in a 404 with the browser trying to access http://devapp/ng2-bs3-modal/ng2-bs3-modal

Similar import directive lines such as

import {ROUTER_DIRECTIVES} from 'angular2/router';

work fine. Am I missing something in System.config?

[dougludlow]

@nickhod yes, you need to include a mapping to ng2-bs3-modal in the System.config so that SystemJS knows how to load it. Something like the following:

System.config({
    ...
    map: {
        'ng2-bs3-modal': 'node_modules/ng2-bs3-modal'
    }
    ...
});

Alternatively, you can include a script reference before the System.config:

<script src="node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.js"></script>

[dougludlow]

@nickhod were you able to get it working?

I've add those details to the readme.

[nickhod]

Adding the script reference before System.config worked. For whatever reason using SystemJS map didn't work (even though I'm using SystemJS), it still 404s.

[dougludlow]

Here's a working example of how I load it using SystemJS. The order that you load the scripts in is important:

<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>

<script>
    System.config({
        defaultJSExtensions: true, 
        globalEvaluationScope: false,
        map: {
            'ng2-bs3-modal': 'node_modules/ng2-bs3-modal'
        }
    });
</script>

<script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>

<script>System.import('app/main').then(null, console.error.bind(console));</script>

[lsiden]

I am having the same problem, but I configured my app with Angular-Cli.

I installed ng2-bs3-modal. In my app directory, I can do:

$ ls node_modules/ng2-bs3-modal/ng2-bs3-modal.js
node_modules/ng2-bs3-modal/ng2-bs3-modal.js

Here is a snippet from my app/system-config.ts

/*** * User Configuration. *****/ /* Map relative paths to URLs. */ const map: any = { 'ng2-bs3-modal': 'node_modules/ng2-bs3-modal', };

/** User packages configuration. */
const packages: any = {
  'ng2-bs3-modal': {
    defaultExtension: 'js',
    main: 'ng2-bs3-modal.js'
  }
};

[ more config ... ]

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  defaultJSExtensions: true,
  globalEvaluationScope: false,
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map, packages });

In one of my app's files:

import { MODAL_DIRECTIVES, ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';

Chromium Console says:

zone.js:101 GET http://localhost:4200/node_modules/ng2-bs3-modal/ng2-bs3-modal.js 404 (Not Found)

I'm new to Angular2 and Typescript, so I'm sure I am missing something.

[mhawila]

@lsiden did you manage to make this work? It is driving me nuts!

[dougludlow]

@mhawila I have a working angular-cli demo here: https://github.com/dougludlow/ng2-bs3-modal-demo-angular-cli, if it helps.

[mhawila]

Thanks @dougludlow, unfortunately I am using angular2-seed (https://github.com/mgechev/angular-seed).

It is strange this happens only when I try to run the tests but when I ran the app with npm start it runs just fine!

[dougludlow]

@mhawila if you want to open a new issue and provide some more details, I'd be more than happy to do some troubleshooting with you.

[mhawila]

@dougludlow thanks for your offer. I had to use the below configuration

map: {
    'ng2-bs3-modal': 'ng2-bs3-modal/bundles'
  },
  meta: {
    'ng2-bs3-modal': {
      format : 'register'
    }
  }

It seems systemjs was not able to resolve the type of module being loaded. For anyone using the seed I added this in the file test-config.js. The whole file is below

// Load our SystemJS configuration.
System.config({
  baseURL: '/base/',
  map: {
    'ng2-bs3-modal': 'ng2-bs3-modal/bundles'
  },
  meta: {
    'ng2-bs3-modal': {
      format : 'register'
    }
  }
});

Warning 👆 👆 stuff does not work because for some reason the bundled version is not loaded correctly by systemjs

Update I added the following lines to the karma.config.js to make the files available to karma.files map. I am not so familiar with karma but I assume that is where the karma web server serves the files from (I have to learn more about karma I guess 😃 )

module.exports = function(config) {
    config.set({
        // Other things
        files: [
            // list of files
            ...
           'node_modules/jquery/dist/jquery.min.js',
            { pattern: 'node_modules/ng2-bs3-modal/components/*.js', included: false, watched: false },
            { pattern: 'node_modules/ng2-bs3-modal/directives/*.js', included: false, watched: false },
            { pattern: 'node_modules/ng2-bs3-modal/ng2-bs3-modal.js', included: false, watched: false   },
             // More stuff
         ],
    });
   // More stuff
};

By the way importing the module with another names causes the test to fail too. I don't know why, so instead of import { SomeOtherName } from 'ng2-bs3-modal/ng2-bs3-modal' use import { Ng2Bs3Module } from 'ng2-bs3-modal/ng2-bs3-modal'

[Nobody84]

@nickhod & @dougludlow I got the same error today and a recognized that my app wants to load http://localhost:3000/node_modules/ng2-bs3-modal/ng2-bs3-modal instead of http://localhost:3000/node_modules/ng2-bs3-modal/ng2-bs3-modal.js

Then I set the default extension for ng2-bs3-modal to .js and it worked for me. Here the importand lines of my systemjs.contig.js packages: { ... 'ng2-bs3-modal': { defaultExtension: 'js' }, ... }

[nguni52]

Thank you.

I had done the same, as I had noticed it wasn't loading as expected, and it loaded.

Cheers,

Nguni Phakela Twitter: @nguni52 Cell: 061-131-2053 Sent from my iPhone6 Plus

On 30 Oct 2016, at 4:42 PM, Nobody84 notifications@github.com wrote:

@nickhod & @dougludlow I got the same error today and a recognized that my app wants to load http://localhost:3000/node_modules/ng2-bs3-modal/ng2-bs3-modal instead of http://localhost:3000/node_modules/ng2-bs3-modal/ng2-bs3-modal.js

Then I set the default extension for ng2-bs3-modal to .js and it worked for me. Here the importand lines of my systemjs.contig.js

packages: { ... 'ng2-bs3-modal': { defaultExtension: 'js' }, ... }

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[lirongfei123]

How TypeScript resolves modules

TypeScript will mimic the Node.js run-time resolution strategy in order to locate definition files for modules at compile-time. To accomplish this, TypeScript overlays the TypeScript source file extensions (.ts, .tsx, and .d.ts) over the Node’s resolution logic. TypeScript will also use a field in package.json named "typings" to mirror the purpose of "main" - the compiler will use it to find the “main” definition file to consult. so just add this to package.json it will ok "typings": "ng2-bs3-modal.d.ts", use this code import { Ng2Bs3ModalModule } from 'ng2-bs3-modal';

[ghost]

What if one is using webpack instead? Running into this error while using webpack with Angular2.

[stephenad]

@dougludlow

I am trying to get your modal example working in my angular 2 project but I am getting the following errors when i run ng serve, I am new to Angular so if you need to see any other files please let me know.

I get these errors:

`ERROR in C:/wamp/www.../public_cli/src/app/services/dialog.service.ts (1,32): Cannot find module 'ng2-bs3-modal'.

ERROR in C:/wamp/www.../public_cli/src/app/services/dialog.service.ts (3,2): Cannot find name 'Injectable'.

ERROR in C:/wamp/www.../public_cli/src/app/services/dialog.service.ts (15,10): Property 'output' does not exist on type 'DialogService'.

ERROR in C:/wamp/www.../public_cli/src/app/services/dialog.service.ts (15,38): Property 'selected' does not exist on type 'DialogService'.

ERROR in C:/wamp/www.../public_cli/src/app/services/dialog.service.ts (19,10): Property 'output' does not exist on type 'DialogService'.

ERROR in C:/wamp/www.../public_cli/src/app/services/dialog.service.ts (23,10): Property 'output' does not exist on type 'DialogService'.

ERROR in C:/wamp/www.../public_cli/src/app/services/dialog.service.ts (27,10): Property 'router' does not exist on type 'DialogService'. `

These are my relevant files: index.html

`<!doctype html>

Loading...

`

Dialog Service

`import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';

@Injectable() export class DialogService {

private modal: ModalComponent;

constructor() {}

openDialog(modalComponent: any): void { this.modal.open(); }

closed() { this.output = '(closed) ' + this.selected; }

dismissed() { this.output = '(dismissed)'; }

opened() { this.output = '(opened)'; }

navigate() { this.router.navigateByUrl('/hello'); }

}`

my manageuser.component.html

` <button type="button" class="btn btn-default" (click)="modal.open()">Open me!