javascript - 无法通过 systemjs 导入 ng-bootstrap

Question

这是我的任务:

1. 使用 npm install --save 加载 @ng-bootstrap/ng-bootstrap@ng-bootstrap/ng-bootstrap
2. 通过 systemjs 加载 @ng-bootstrap/ng-bootstrap(我可以在 Safari 加载的资源中看到 ng-bootstrap.js!)，我也尝试了几种组合，结果相同。
3. 在主模块中导入:import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
4. 在主模块的导入部分调用 NgbModule.forRoot()

Error: undefined is not an object (evaluating 'ng_bootstrap_1.NgbModule.forRoot')

我已经尝试过 console.log(NgbModule.forRoot) 并在导入后立即得到 undefined 。

系统:

    (function(global) {


    var map = {
        app: 'app',
        '@angular' : 'lib/@angular',
        'rxjs': 'lib/rxjs',
        '@ng-bootstrap/ng-bootstrap': 'https://npmcdn.com/@ng-bootstrap/ng-bootstrap'
        };


    var packages  = {
        app: {
            main: './bootstrap.js',
            defaultExtension: 'js'
        },
        rxjs: {
            defaultExtension: 'js'
        },
        '@ng-bootstrap/ng-bootstrap': {
            main: './bundles/ng-bootstrap.js',
            defaultExtension: 'js'
        }
    };


    var ngPackageNames= [
        'common',
        'compiler',
        'core',
        'forms',
        'http',
        'router',
        'platform-browser',
        'platform-browser-dynamic'
    ];

    ngPackageNames.forEach(function(pkgName) {
        packages['@angular/' + pkgName] = {main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js'};

    });

    System.config({
        defaultJSExtension: true,
        transpiler: null, 
        packages: packages,
        map: map
    });


}) (this);

应用程序模块.ts:

    import { NgModule }       from '@angular/core';
    import { BrowserModule }  from '@angular/platform-browser';
    import { FormsModule }    from '@angular/forms';
    import { RouterModule }   from '@angular/router';
    import { HttpModule, RequestOptions } from '@angular/http';
    import { LocationStrategy, HashLocationStrategy } from '@angular/common';
    import { NgbModule }      from '@ng-bootstrap/ng-bootstrap';

    import { AppComponent }       from './app.component';
    import { AppRoutes }       from './app.routes';

    import { HomeModule } from './home/home.module';
    import { AuthenticationService } from './authentication/authentication.service';
    import { AuthenticationModule } from './authentication/authentication.module';
    import { ArticlesModule } from './articles/articles.module';


    @NgModule({
      imports: [
        BrowserModule,
        HttpModule,
        FormsModule,
        AuthenticationModule,
        ArticlesModule,
        HomeModule,
        RouterModule.forRoot(AppRoutes),
        NgbModule.forRoot()
      ],
      declarations: [
        AppComponent
      ],
      providers: [
        AuthenticationService
      ],
      bootstrap: [AppComponent]
    })



    export class AppModule { }

 tsconfig: 

    {
    "compilerOptions": {
        "target": "es6",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules"
    ]
}

Answer 1

我遇到了同样的问题。

对我来说，问题只存在于以 es2015 作为目标编译时。我现在将其更改为 es5 并且可以正常工作。也许这可以帮助您快速解决问题。

"target": "es5",
    "module": "commonjs",
    "declaration": false,
    "removeComments": true,
    "noLib": false,
    "lib": [
      "es2016",
      "dom"
    ],

荷兰。 @ng-bootstrap 与 SystemJS 一起使用的方式似乎存在问题。