Question

尝试了不同的方法。

仍有错误

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

错误：加载http://localhost:8080/node_modules/ng2-bootstrap/ng2-bootstrap.js（...）

时出现XHR错误（404 Not Found）

这是我的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 config

Answer 2

打开 systemjs.config.js 文件
在地图对象中添加' ng2-bootstrap'：'node_modules / ng2-bootstrap / bundles / ng2-bootstrap.umd.js'，

3.将此导入{DatepickerModule}从'ng2-bootstrap'; 添加到我的 app.module.ts 文件修复了我的问题，希望有所帮助

Answer 3

打开

systemjs.config.js

添加此路径：

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

地图对象

中的

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

3 个答案: