Question

这是我的任务：

使用npm install --save加载@ ng-bootstrap / ng-bootstrap @ NG-自举/ NG的自举
通过systemjs的Loadig @ ng-bootstrap / ng-bootstrap（我可以在Safari中看到加载资源中的ng-bootstrap.js！），我也尝试了几种具有相同结果的组合。
在主模块中导入：从＆＃39; @ ng-bootstrap / ng-bootstrap＆＃39;;
在导入主模块的一部分

错误：undefined不是对象（评估＆＃39; ng_bootstrap_1.NgbModule.forRoot＆＃39;）

我已经尝试过console.log（NgbModule.forRoot）并在导入后立即进行了未定义。

systemjs：

    (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);

app.module.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"
    ],

Ntl分配。 @ ng-bootstrap与SystemJS一起使用的方式似乎有问题。

无法通过systemjs导入ng-bootstrap

1 个答案: