我在使用Angular2时有一个问题,我使用ng serve
命令启动我的应用程序,在我的控制台中我看到了:
上一个图像显示了重新编译应用程序时的日志,之后重新加载了应用程序,我看到了下一个: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"
}
}