带有ng-bootstrap 404错误的Angular2 RC5入门 [英] Getting started Angular2 RC5 with ng-bootstrap 404 Error
问题描述
我已经按照ng-bootstrap网站上的说明进行了安装,并使用了Angular2的新git克隆,但是当NgbModule在@NgModule
的导入数组中时收到404错误.
I have followed the instructions for installation on the ng-bootstrap website with a fresh git clone of Angular2, but receive a 404 Error when NgbModule is in the import array of @NgModule
.
错误的屏幕截图: 404加载@ ng-bootstrap时出错
步骤:
- 克隆Angular2的快速入门git repo 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
Make sure bootstrap@4.0.0-alpha.3
, ng-bootstrap and angular2 RC5 are installed
尝试通过node_module显式设置导入路径时,也会发生同样的情况. import { NgbModule } from "../node_modules/@ng-bootstrap/ng-bootstrap";
The same occurs when trying to set the import path explicitly through node_module eg. import { NgbModule } from "../node_modules/@ng-bootstrap/ng-bootstrap";
任何帮助表示赞赏.
在项目根文件 systemjs.config.js 中添加了@ ng-bootstrap行.浏览器控制台中出现类似的404错误.
Added @ng-bootstrap line to project root file systemjs.config.js. Similar 404 error in browser console.
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 中的包中,并且根据屏幕截图
Update 2
Added the index.js file to the packages in systemjs.config.js and am receiving errors on the individual files as per screencap 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' },
};
推荐答案
找到了解决方案.问题确实出在 systemjs.config.js 上.按照说明进行操作,现在问题已解决.谢谢
Found a solution. Problem indeed lies in systemjs.config.js. Followed instructions and now the issue is fixed. Thanks
这篇关于带有ng-bootstrap 404错误的Angular2 RC5入门的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!