Question

我无法通过从/Scripts/app.modules.js研究错误加载/ng2-bootstrap/alert.js为“ng2-bootstrap / alert”来找到解决方案。

我在 System.config.js 中尝试了这些建议的解决方案，但它们无法解决问题：

class User < ActiveRecord::Base
     has_many :entries
     has_many :organization_users
     has_many :organizations, :through => :organization_users
end

class Entry < ActiveRecord::Base
     belongs_to :user
end

class Organization < ActiveRecord::Base
     has_many :organization_users
     has_many :users, :through => :organization_users
end

class OrganizationUser < ActiveRecord::Base
     belongs_to :user
     belongs_to :organization
end

这是我的 Packages.json ，其中我读过“@ ng-bootstrap / ng-bootstrap”：“^ 1.0.0-alpha.20”，是正确的语法。这也无济于事。

map: {

 1. 'ng2-bootstrap': 'node_modules/ng2-bootstrap' or 
 2. 'ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js'

}

packages: {

 1. 'ng2-bootstrap': { defaultExtension: 'js' },
 2. 'ng2-bootstrap': { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' },

}

This is my **System.config.js** which I have read is likely the source of the issue.

   (function (global) {

    window.System.config({

        paths: {
            // paths serve as alias
            'npm:': '/libs/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: '/Scripts',
            // 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',
            'moment': 'node_modules/moment/moment.js',
            'ng2-bootstrap': 'node_modules/ng2-bootstrap'
        },
        // 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-bootstrap': { format: 'cjs', main: 
    'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' },
            'moment': { main: 'moment.js', defaultExtension: 'js' }
        }
    });
    var ngBootstrapPackageNames = [
        'accordion',
        'alert',
        'bundles',
        'buttons',
        'carousel',
        'collapse',
        'dropdown',
        'esm',
        'modal',
        'pagination',
        'popover',
        'progressbar',
        'rating',
        'tabset',
        'timepicker',
        'tooltip',
        'typeahead',
        'util'
    ];

    function ngBootstrapPackIndex(pkgName) {
        //packages['@ng-bootstrap/ng-bootstrap/' + pkgName] = { main:
   'index.js', defaultExtension: 'js' };
    }
    ngBootstrapPackageNames.forEach(ngBootstrapPackIndex);

    })(this);

This is my **app.module.ts** which has been implied but does not seem to help.

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';

    import { AppRoutingModule } from './app.routing';
    import { AppComponent } from './app.component';
    import { CollapsiblePanelComponent } from 
    './bootstrap-    components/collapsiblePanel.component';
    import { InputGroupAddOnComponent } from 
    './bootstrap-components/input-group-addon.component';
    import { CreateRegimenComponent } from 
    './create-regimen/create-regimen.component'
    import { AlertComponent } from 'ng2-bootstrap/alert';
    import { CollapseModule } from 'ng2-bootstrap/collapse';
    import Approuting = require("./app.routing");

    //import { NgbModule } from '@ng-bootstrap/ng-bootstrap';


    @NgModule({
    imports: [
        CollapseModule,
        AlertComponent,
        FormsModule,
        HttpModule,
        //    InMemoryWebApiModule.forRoot(InMemoryDataService),
        AppRoutingModule,
        BrowserModule],
    declarations: [
        AppComponent,
        CollapsiblePanelComponent,
        InputGroupAddOnComponent,
        CreateRegimenComponent,
        CollapseModule
    ],
    bootstrap: [
        AppComponent,
        CollapsiblePanelComponent,
        AlertComponent,
        CollapseModule
    ]
    })

    export class AppModule { }

Here is my node_modules directory

如何在没有错误404的情况下加载ng2_bootstrap

Answer 1

我终于想出了如何加载ng2-bootstrap。对于那些尝试这样做的人来说，有许多建议在那里根本不起作用，至少截至2017年2月27日。所以对任何人来说都非常令人沮丧。这就是我从我找到的许多建议拼凑而成的内容。最重要的建议来自ng2-bootstrap本身。（虽然ng2-bootstrap也不完整）。

<强> System.js

(function (global) {
window.System.config({
paths: {
// paths serve as alias
'npm:': '/libs/',
'ng2-bootstrap/ng2-bootstrap': "node_modules/ng2-bootstrap/ng2-bootstrap"
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: '/Scripts',
// 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-bootstrap
**'moment': 'node_modules/moment',
'ng2-bootstrap': 'node_modules/ng2-bootstrap'**
},
// 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-bootstrap': { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' },
'moment': { main: 'moment.js', defaultExtension: 'js' }
}
});
})(this);

<强> app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { Routes, RouterModule } from '@angular/router';

import { appComponents as AppComponents, appRoutes as AppRoutes } from './app.routing';
import { AppComponent } from './app.component';
import { **ButtonsModule, DatepickerModule, AlertModule** } from **'ng2-bootstrap';**

import Approuting = require("./app.routing");

@NgModule({
imports: [
FormsModule,
HttpModule,
// InMemoryWebApiModule.forRoot(InMemoryDataService),
RouterModule.forRoot(AppRoutes),
AlertModule.forRoot(),
DatepickerModule.forRoot(),
ButtonsModule.forRoot(),
BrowserModule],
declarations: [
AppComponent,
IndexComponent,
IndexPatientsComponent
],
providers: [],
bootstrap: [
AppComponent
]
})

export class AppModule { }

从/Scripts/app.modules.js加载/ng2-bootstrap/alert.js为“ng2-bootstrap / alert”时出错

1 个答案: