Angular 2在重新编译时显示空白页

时间:2017-05-16 16:14:01

标签: javascript angular

我在使用Angular2时有一个问题,我使用ng serve命令启动我的应用程序,在我的控制台中我看到了:

Angular re compilation

上一个图像显示了重新编译应用程序时的日志,之后重新加载了应用程序,我看到了下一个:blank page angular 2 on recompilation

只有一个空白页面,我也注意到了这一点:

<!doctype html>
<html>
<head>
<base href="./">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link rel="shortcut icon" href="assets/img/favicon.png">
<title>Home</title>
<!-- Icons -->
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/simple-line-icons.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/daterangepicker.css">
<link rel="stylesheet" href="assets/css/loaders.css">
<link rel="stylesheet" media="screen" href="node_modules/handsontable/dist/handsontable.full.css">
<link rel="stylesheet" href="node_modules/ladda/dist/ladda.min.css">
<link rel="manifest" href="assets/manifest.json">

<script src="node_modules/handsontable/dist/handsontable.full.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/daterangepicker.js"></script>
</head>
<body class="app header-fixed  aside-menu-fixed aside-menu-hidden">
<script>window.__theme = 'bs4';</script>
</body>
</html>

没有包含Angular 2的任何代码,如果我再次使用ng serve杀死进程并重新启动应用程序,我得到了这个:

<!doctype html>
<html>
<head>
<base href="./">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link rel="shortcut icon" href="assets/img/favicon.png">
<title>Home</title>
<!-- Icons -->
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/simple-line-icons.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/daterangepicker.css">
<link rel="stylesheet" href="assets/css/loaders.css">
<link rel="stylesheet" media="screen" href="node_modules/handsontable/dist/handsontable.full.css">
<link rel="stylesheet" href="node_modules/ladda/dist/ladda.min.css">
<link rel="manifest" href="assets/manifest.json">

<script src="node_modules/handsontable/dist/handsontable.full.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/daterangepicker.js"></script>
</head>
<body class="app header-fixed  aside-menu-fixed aside-menu-hidden">
<script>window.__theme = 'bs4';</script>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="scripts.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>

这行代码<script>window.__theme = 'bs4';</script>的底部是Angular编译脚本。

我的配置有什么不好?

这是我的package.json内容:

{ "name": "front-end", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/common": "^2.4.0", "@angular/compiler": "^2.4.0", "@angular/core": "^2.4.0", "@angular/forms": "^2.4.0", "@angular/http": "^2.4.0", "@angular/platform-browser": "^2.4.0", "@angular/platform-browser-dynamic": "^2.4.0", "@angular/router": "^3.4.0", "ag-grid": "^9.0.2", "ag-grid-angular": "^9.0.0", "angular2-ladda": "^1.2.1", "angularfire2": "^4.0.0-rc.0", "core-js": "^2.4.1", "firebase": "^3.9.0", "handsontable": "^0.31.2", "ng2-bootstrap": "1.4.0", "ng2-charts": "1.5.0", "ng2-handsontable": "^0.48.0", "rxjs": "^5.1.0", "typescript": "^2.3.2", "zone.js": "^0.7.6" }, "devDependencies": { "@angular/cli": "1.0.0-rc.4", "@angular/compiler-cli": "^2.4.0", "@types/jasmine": "2.5.38", "@types/node": "~6.0.60", "codelyzer": "~2.0.0", "jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~3.2.0", "karma": "~1.4.1", "karma-chrome-launcher": "~2.0.0", "karma-cli": "~1.0.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "karma-coverage-istanbul-reporter": "^0.2.0", "protractor": "~5.1.0", "ts-node": "~2.0.0", "tslint": "~4.5.0", "typescript": "~2.0.0" } }

0 个答案:

没有答案