如何正确设置Angular 2项目

Question

我使用以下示例项目来学习Angular 2：

https://bitbucket.org/syncfusiontech/angular-2-succinctly/overview

我做了以下事情：

1. 在git clone https://bitbucket.org/syncfusiontech/angular-2-succinctly/overview之后我执行了以下命令：
2. cd AsBook
3. npm install
4. npm start

新的浏览器实例已打开，但仍保留消息Loading...。

在浏览器调试模式下，我看到以下错误：

jquery.min.js Failed to load resource: the server responded with a status of 404 (Not Found) jquery.min.js Failed to load resource: the server responded with a status of 404 (Not Found) bootstrap.min.js:6 Uncaught ZoneAwareErrormessage: (...)name: (...)originalStack: (...)stack: (...)toSource: function ()toString: function ()zoneAwareStack: (...)__zone_symbol__error: Error: Bootstrap's JavaScript requires jQuery at http://localhost:3000/node_modules/bootstrap/dist/js/bootstrap.min.js:6:37 [<root>]get message: function ()set message: function (value)get name: function ()set name: function (value)arguments: (...)caller: (...)length: 1name: "set"prototype: Object__proto__: function ()[[FunctionLocation]]: zone.js:899[[Scopes]]: Scopes[4]get originalStack: function ()set originalStack: function (value)get stack: function ()set stack: function (value)get zoneAwareStack: function ()set zoneAwareStack: function (value)__proto__: Object :3000/app/main.js Failed to load resource: the server responded with a status of 404 (Not Found) localhost/:23 ZoneAwareError (anonymous) @ localhost/:23

如何更正package.json文件以正确设置？

package.json：

{ "name": "helloworld", "version": "1.0.0", "description": "First Angular-2 application", "author":"Joe Booth", "scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" }, "license": "UNLICENSED", "private": true, "dependencies": { "@angular/common": "~2.3.0", "@angular/compiler": "~2.3.0", "@angular/core": "~2.3.0", "@angular/forms": "~2.3.0", "@angular/http": "~2.3.0", "@angular/platform-browser": "~2.3.0", "@angular/platform-browser-dynamic": "~2.3.0", "@angular/router": "~3.3.0", "bootstrap": "^3.3.6", "systemjs": "0.19.39",
"angular-in-memory-web-api": "~0.1.16", "core-js": "^2.4.1", "reflect-metadata": "^0.1.8", "rxjs": "5.0.0-rc.4", "zone.js": "^0.7.2" }, "devDependencies": { "concurrently": "^3.0.0", "lite-server": "^2.2.2", "typescript": "^2.0.3",
"typings": "^1.4.0"
} }

Answer 1

在index.html中，我看到了

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

尝试执行

npm i jquery --save