dougludlow/ng2-bs3-modal

Successful integration with angular-cli project

arproudlock opened this issue · 9 comments

arproudlock commented

Apologies in advance. This is not an issue, wasn't sure where to put this, but might be helpful for some:

Step 1: Install
npm install --save ng2-bs3-modal

Step 2: Include in Vendor files
Open ember-cli-build.js
include 'ng2-bs3-modal' in vendorNpmFiles array:

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  var app = new Angular2App(defaults, {
    vendorNpmFiles: [
      'angularfire2/**/*.js',
      'firebase/lib/*.js',
      'ng2-bs3-modal/**/*.js'
    ]
  });
  return app.toTree();
};

Step 3: Build
ng build
Check /dist/vendor for ng2-bs3-modal folder

Step 4: Include Scripts and CSS in index.html
Open index.html
In the head include:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">

In the body (with the other script src tags) include:

<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>

Step 5: System.js
In index.html, in System.config({}) add 'ng2-bs3-modal' to packages and map.

Example:

System.config({
      packages: {
        app: {
          format: 'register',
          defaultExtension: 'js'
        },
        'ng2-material': {
            format: 'cjs',
            defaultExtension: 'js'
        },
        angularfire2: {
            defaultExtension: 'js',
            main: 'angularfire2.js'
        },
        'ng2-bs3-modal': {
            defaultExtension: 'js',
            main: 'ng2-bs3-modal.js'
        }
      },
      map: {
        firebase: 'vendor/firebase/lib/firebase-web.js',
        angularfire2: 'vendor/angularfire2',
        'ng2-bs3-modal': 'vendor/ng2-bs3-modal'
      }
    });
System.import('app.js').then(null, console.error.bind(console));

Step 6: Import in component ts file and include in directives array

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

directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES, MATERIAL_DIRECTIVES, MODAL_DIRECTIVES],

Should now be able to use ng2-bs3-modal with you angular-cli project.

dougludlow commented

👍

Thanks @arproudlock, I've added a link from the readme to this issue for an example using angular-cli. You're awesome!

haneyman commented

This was helpful but it looks like things have changed with the CLI. I am using version 1.0.0-beta.1:
Step 2 should now be: In file angular-cli-build.js, add ng2-bs3-modal/**/*.js
Step 5. should now be: In file system-config.ts, add ng2-bs3-modal to the barrels array, add vendor/ng2-bs3-modal to the system.config map

  • 👍3
Deleted user commented

I'm trying to adhere to the "do not use jQuery" recommendation so will look around for a "pure" Angular 2.0 modal if one is available.

sudhashri commented

I have followed all the sets mentioned in Post 1 and 3 but I get the following error.
zone.js:101 GET http://localhost:4200/vendor/ng2-bs3-modal/ng2-bs3-modal 404 (Not Found)

My files can be found in this post. Should I make any changes to my files to make Modal work?

madhurahuja commented

Hi Sudhashri, you can get rid of this error by using
defaultJSExtensions: true
Put this in System.config.

sudhashri commented

Adding defaultJSExtensions: true did the trick for me. Thank you @madhurahuja

  • 👍1
sverma16 commented

I am not able to make this work still. Here are the steps I did.

  1. ng new trial
  2. installed bootstrap3 and ng2-bs3-modal
  3. Added 'ng2-bs3-modal/*/.js' to vendorNPM files in angular-cli-build.js
  4. ng build and check dist folder - All OK
  5. Followed step 4 except changing bootstrap version to 3.3.7 : All OK
  6. Step 5: In system-config.ts. Added the 'ng2-bs3-modal': 'vendor/ng2-bs3-modal' to map
    and also defaultJSExtensions: true,
  7. In my In system-config.ts packages is set to the following.
    packages: cliSystemConfigPackages

The moment I try to tweak packages to add
'ng2-bs3-modal': {
defaultExtension: 'js',
main: 'ng2-bs3-modal.js'
}

I start getting this error : zone.js:101 GET http://localhost:4200/vendor/@angular/platform-browser-dynamic.js 404 (Not Found)

  1. Alternatively, If I keep the packages: cliSystemConfigPackages intact and add the following directive to my component
    directives: [MODAL_DIRECTIVES],

I start getting this error:
zone.js:101 GET http://localhost:4200/vendor/ng2-bs3-modal/ng2-bs3-modal.js 404 (Not Found)

Pl help. I have tried a clean install and tweaking many things but cannot get this to work. Can someone will more expertise help everyone by cleaning up the instructions.

  • 👍1
RodEsV commented

Any update ?

dougludlow commented

I have a working angular-cli demo here: https://github.com/dougludlow/ng2-bs3-modal-demo-angular-cli

  • 👍1