仍然 ng2-bootstrap 在 Angular 2 中显示 404（未找到）

Question

尝试过不同的方法。

仍然有错误

GET http://localhost:8080/node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js 404（未找到）

错误：加载 XHR 错误（404 未找到）http://localhost:8080/node_modules/ng2-bootstrap/ng2-bootstrap.js(…)

这是我的 index.html:

<html>
<head>
<title>Angular 2 TypeScript Gulp QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Polyfill(s) for older browsers -->
<script src="lib/es6-shim/es6-shim.min.js"></script>
<script src="lib/zone.js/dist/zone.js"></script>
<script src="lib/reflect-metadata/Reflect.js"></script>
<script src="lib/systemjs/dist/system.src.js"></script>
<!--ng2-bootstrap-->
<script src="../node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<!--ng-bootstrap-->
<!--<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>-->
<script>
    System.import('app')
            .then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

这里是 systemjs.config.js:

(function (global) {

// map tells the System loader where to look for things
var map = {
    'app': 'app', // 'dist',
    'rxjs': 'lib/rxjs',
    '@angular': 'lib/@angular',
    'ng2-bootstrap': 'node_modules/ng2-bootstrap',
     moment: 'node_modules/moment/moment.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'},
    'ng2-bootstrap': {defaultJSExtensions: true}
};

var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade'
];

// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
    packages[pkgName] = {main: 'index.js', defaultExtension: 'js'};
});

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

// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) {
    global.filterSystemConfig(config);
}

System.config(config);

})(this);

这是 app.component.ts 的一部分：

//datepicker
import {DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

Answer 1

您可以随时参考 https://github.com/valor-software/angular2-quickstart 检查示例 system.js 配置

Answer 2

打开

systemjs.config.js

添加此路径：

'@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js'

在地图对象

Answer 3

打开systemjs.config.js文件
在 map[=24= 中添加这个 'ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js', ] 对象

3.adding 这个 从 'ng2-bootstrap'; 导入 { DatepickerModule } 到我的 app.module.ts 文件解决了我的问题，希望对您有所帮助

仍然 ng2-bootstrap 在 Angular 2 中显示 404（未找到）

Still ng2-bootstrap shows 404 (Not Found) in Angular 2

ng2-bootstrap

angular