带有ng-bootstrap 404错误的Angular2 RC5入门

angular ng-bootstrap

1755 观看

2回复

339 作者的声誉

我已经按照ng-bootstrap网站上的说明进行了安装,并使用了Angular2的新git克隆,但是当NgbModule在的导入数组中时收到404错误@NgModule

错误的屏幕截图:404错误加载@ ng-bootstrap

脚步:

  1. 克隆了Angular2的快速入门git repo github.com/angular/quickstart
  2. 编辑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 { }
    
  3. 确保bootstrap@4.0.0-alpha.3已安装ng-bootstrap和angular2 RC5

  4. 将Bootstrap .css和.js脚本标签添加到 index.html
  5. npm start 产生Loading ...页面,仅此而已,在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中的包中,并且按照以下屏幕截图所示单个文件上收到错误:

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' },
  };
作者: Nelson 的来源 发布者: 2016 年 8 月 22 日

回应 (2)


1

12709 作者的声誉

似乎您尚未@ng-bootstrap在systemjs配置中添加的路径,

@ng-bootstrapsystemjs.config.js中添加路径

希望这可以帮助!!

作者: Madhu Ranjan 发布者: 22.08.2016 12:55

3

339 作者的声誉

决定

找到了解决方案。问题确实出在systemjs.config.js上。按照说明进行操作,现在问题已解决。谢谢

如何通过system.js将引导程序添加到Angular2

作者: Nelson 发布者: 23.08.2016 08:25
32x32