Could you be more specific on example?

[408796571]

I've been trying to integrating this with an Angular 2 based web app, but keep getting errors on modal not found error.

Please provide a new example, this is very important stuff you are working on, make it usable to the community.

Thanks!

[dougludlow]

Hi @Mark-Brightcloud, can you provide your code and actual error? There are so many ways to include ng2-bs3-modal; jspm, systemjs, webpack, rollup, etc.

[408796571]

@dougludlow WOW, thanks for the quick followup. Rather than posting my error, would it be possible that you can show me the complete implementation of using ViewChild? "Opening and closing the modal from a parent component" shows only the parent component, could you show me the child component as well ?

Again, many thanks.

[dougludlow]

Sure. Modifying that same example:

import { Component, ViewChild } from '@angular/core';
import { MODAL_DIRECTIVES, ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';

@Component({
    selector: 'parent-component',
    directives: [MODAL_DIRECTIVES],
    template: `
        <button (click)="open()">Click me</button>
        <modal #myModal>
            ...
        </modal>
    `
})
export class ParentComponent {
    @ViewChild('myModal')
    modal: ModalComponent;

    close() {
        this.modal.close();
    }

    open() {
        this.modal.open();
    }
}

You can also see it in the demo:

modal-demo.component.ts modal-demo.component.html

[dougludlow]

If the error is TypeError: this.$modal.modal is not a function., checkout #52. If you're getting TypeError: Cannot read property 'open' of undefined., checkout #50.

[408796571]

@dougludlow Yes, I am getting this error. TypeError: this.$modal.modal is not a function.

I made sure to load them all in my html file;

<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.js"></script>
<script src="node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.js"></script>

And when I inspect Resources in Chrome dev tool, it shows jquery, bootstrap.js and ng2-bs3-modal.js are all loaded, yet still with the same error printed in the console after I clicked on "Open me!"

Any idea?

[dougludlow]

Weird, no, that doesn't make any sense. You might take a look at the npm demo to get an idea on ordering imports, note that the ng2-bs3-modal bundle should be included after the System.config:

https://github.com/dougludlow/ng2-bs3-modal-demo-npm/blob/master/index.html#L48

[408796571]

@dougludlow

Hey, I got it working! You are right, it has to do the way jqyery and bootstrap load in my program. I took the time to re-learn the structure of angular 2 with webpack on importing packages and everything came together.

Really appreciate your help along the way, couldn't have done without your help! This is great stuff you are building, keep it going. I will be moving forward using this ng2-bs3-modal for the web app I'm working on.

Best.

[dougludlow]

@Mark-Brightcloud I guess I need to get a webpack demo put up. Any help there would be appreciated.

[408796571]

@dougludlow, Glad I can chip in. I'm also new to webpack though. How would you like me to help or where would you recommend to start?

[dougludlow]

If you want to post your webpack.config.js, that would be a good start. I can wrap it into a demo project some time.

[408796571]

Sure. I use bootstrap-loader to load native bootstrap libraries, and webpack plugin to load jquery. Configure the entry point to load bootstrap-loader module and app entry file. No need to load double ng2-bs3-modal module in webpack since it gets loaded in app.component.ts through webpack build as below:

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

webpack.config.js

const ProvidePlugin = require('webpack/lib/ProvidePlugin');

module.exports = {
    entry: [
        "./node_modules/bootstrap-loader",
        "./app"
    ],
    output: {
        filename: "./dist/bundle.js"
    },
    resolve: {
        extensions: ['', '.ts', '.js', '.json', '.css', '.html'],
        alias: {},
    },

    module: {
        loaders: [{
            test: /bootstrap-sass[\/\\]assets[\/\\]javascripts[\/\\]/,
            loader: 'imports?jQuery=jquery'
        }, {
            test: /\.ts/,
            loaders: ['ts-loader'],
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            loader: "style!css"
        }, {
            test: /\.(jpe?g|png|gif)$/i,
            loader: "file"
        }, {
            test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
            loader: 'url-loader'
        }]
    },

    plugins: [
        new ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ],

    devServer: {
        contentBase: './',
        host: 'localhost',
        port: "3000"
    }
}

There might be some refinement and optimization can be done, but this will kick off the basic webpack config for using ng2-bs-modal.

[dougludlow]

Great! Thanks!