Angular2快速入门：我应该如何包括新的npm软件包？

Question

I setup the environment by cloning the angular2 quick start repo: https://github.com/angular/quickstart . After I added new package into system.config.js file, the app runs but "npm test" failed. I noticed that there is an empty file named systemjs.config.extras.js, should I add some code there?

Question: how should add a new npm package to angular2 quick start example so that both "npm start" and "npm test" can pass?

Answer 1

After I added new package into system.config.js file, the app runs but "npm test" failed

I'm assuming you are using Karma. What you need to do is add that third-party lib to the files array in the karma.conf.js file.

How it works is that karma starts a server, and adds all the files listed in the files array, to the list of files that the server is available to serve. So when SystemJS tries to load the file, if it is not in the karma files , then the file doesn't exist on the server. So you will get a 404 when trying to retrieve that file from SystemJS.

Answer 2

You should try angular-cli which is the recommended way to work with angular2. To create a new project you have to install angular-cli with the command

npm install -g angular-cli

then you can create a new angular2 project with

ng new your-new-project-name

and finally to add a new global dependency by following this guide ( https://github.com/angular/angular-cli#global-library-installation ). I reproduce the content here for bootstrap.

npm install bootstrap@next

Then add the needed script files to apps[0].script s in agular-cli.json file:

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

Finally add the Bootstrap CSS to the apps[0].styles array in agular-cli.json :

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "styles.css"
],

Finally you can deploy your application using ng serve from the root of the newly created project.