shlomiassaf / ngx-modialog

Modal / Dialog for Angular
http://shlomiassaf.github.io/ngx-modialog
MIT License
686 stars 242 forks source link

Angular2-modal traceur 404 (Not Found) issue #259

Closed vijender1256 closed 7 years ago

vijender1256 commented 7 years ago

When Trying to get angular2-modal working, I am getting below error: ( I am using angular "~2.1.1")

image

Below is my system.config.js file:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'build/lib/js/'
        },
        //map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'build/dist/app',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

            // other libraries
            'rxjs': 'npm:rxjs',
            'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
            "ng2-pagination": "npm:ng2-pagination",
            'ng2-webstorage': 'npm:ng2-webstorage',
            'angular2-modal': 'https://npmcdn.com/angular2-modal@2.0.2'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            'app': {
                main: 'main.js',
                defaultExtension: 'js'
            },
            'rxjs': {
                defaultExtension: 'js'
            },
            'angular2-in-memory-web-api': {
                main: 'index.js',
                defaultExtension: 'js'
            },
            "ng2-pagination": { main: "index.js", defaultExtension: "js" },
            'ng2-webstorage': { main: 'bundles/core.umd.js', defaultExtension: 'js' },
            'angular2-modal': { defaultExtension: 'js', main: '/bundles/angular2-modal.umd.js' },
            // Plugins also need mappings.
            'angular2-modal/plugins/bootstrap': { defaultExtension: 'js', main: 'index' },
            'angular2-modal/plugins/vex': { defaultExtension: 'js', main: 'index' },
            'angular2-modal/plugins/js-native': { defaultExtension: 'js', main: 'index' }
        }
    });
})(this);

And here is my app.module.ts file:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { routing, appRoutingProviders } from "./app.routing";
import { Routes, RouterModule } from "@angular/router";
import { CashierRiskProfileModule } from "./cashierriskprofile/cashierriskprofile.module";
import { ExceptionDashboardModule } from "./exceptiondashboard/exceptiondashboard.module";
import { ReportModule } from "./reports/report.module";
import { SharedModule } from "./shared/shared.module";
import { ModalModule } from 'angular2-modal';
import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap';

const routes: Routes = [
];

@NgModule({
    imports: [
        BrowserModule,
        routing,
        CashierRiskProfileModule,
        ExceptionDashboardModule,
        ReportModule,
        SharedModule.forRoot(),
        RouterModule.forRoot(routes, { useHash: true }),
        ModalModule.forRoot(),
        BootstrapModalModule,
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        appRoutingProviders
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

What is the issue ?, is it a bug that will be fixed ?

vijender1256 commented 7 years ago

fixed this issue with following setting in systemjs.config.json:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'build/lib/js/'
        },
        //map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'build/dist/app',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

            // other libraries
            'rxjs': 'npm:rxjs',
            'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
            "ng2-pagination": "npm:ng2-pagination",
            'ng2-webstorage': 'npm:ng2-webstorage',
            'angular2-modal': 'npm:angular2-modal',
            'angular2-modal/plugins/bootstrap': 'npm:angular2-modal/bundles/angular2-modal.bootstrap.umd.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            'app': {
                main: 'main.js',
                defaultExtension: 'js'
            },
            'rxjs': {
                defaultExtension: 'js'
            },
            'angular2-in-memory-web-api': {
                main: 'index.js',
                defaultExtension: 'js'
            },
            "ng2-pagination": { main: "index.js", defaultExtension: "js" },
            'ng2-webstorage': { main: 'bundles/core.umd.js', defaultExtension: 'js' },

            'angular2-modal': { defaultExtension: 'js', main: '/bundles/angular2-modal.umd.js' }
        }
    });
})(this);