使用 ng-bootstrap 404 错误开始使用 Angular2 RC5

Question

我按照 ng-bootstrap 网站上的安装说明使用了 Angular2 的全新 git 克隆，但是当 NgbModule 在 [=14 的导入数组中时收到 404 错误=].

步骤：

克隆了 Angular2 的快速入门 git 回购 github.com/angular/quickstart

将 app.module.ts 编辑为以下内容：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";

@NgModule({
  imports: [ NgbModule, BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

确保 bootstrap@4.0.0-alpha.3、ng-bootstrap 和 angular2 RC5 已安装
将 bootstrap .css 和 .js 脚本标签添加到 index.html
npm start 生成正在加载...页面，没有其他内容，可以在 Web 控制台中看到 404 错误

尝试通过 node_module 显式设置导入路径时会发生同样的情况，例如。 import { NgbModule } from "../node_modules/@ng-bootstrap/ng-bootstrap";

感谢任何帮助。

更新 1：

在项目根文件 systemjs.config.js 中添加了 @ng-bootstrap 行。浏览器控制台出现类似 404 错误。

systemjs.config.js:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',

    '@ng-bootstrap':              'node_modules/@ng-bootstrap',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };

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

  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }

  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }

  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);

  // No umd for router yet
  packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };

  var config = {
    map: map,
    packages: packages
  };

  System.config(config);

})(this);

更新 2

已将 index.js 文件添加到 systemjs.config.js 中的包中，并且根据屏幕截图 here 收到有关单个文件的错误：

systemjs.config.js（节选）

 //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    '@ng-bootstrap/ng-bootstrap': { main: 'index.js', defaultExtension: 'js' },
  };

Answer 1

看来你在systemjs配置中没有添加@ng-bootstrap的路径，

在 systemjs.config.js

中添加 @ng-bootstrap 的路径

希望对您有所帮助！！

Answer 2

找到解决办法。问题确实出在systemjs.config.js。按照说明进行操作，现在问题已解决。谢谢

使用 ng-bootstrap 404 错误开始使用 Angular2 RC5

Getting started Angular2 RC5 with ng-bootstrap 404 Error

ng-bootstrap

angular

更新 1：

更新 2