0

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?

Ng2-Fun
  • 3,307
  • 9
  • 27
  • 47

2 Answers2

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.

Paul Samsotha
  • 205,037
  • 37
  • 486
  • 720
  • Yes, the quick start repo use Karma for testing. The way you mentioned seems not good for maintain: whenever there is a new package added, you need to add it in both system.config.js and karma.conf.js files. I thought systemjs.config.extras.js may be used for adding new package there and be shared by both functionality implementation and testing. Or I could be wrong. – Ng2-Fun Nov 22 '16 at 16:41
0

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].scripts 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.

Nicolas Henneaux
  • 11,507
  • 11
  • 57
  • 82
  • Thanks for your suggestion. However, our team already decided not to use angular-cli, part of the reason is it seems doesn't work well with PhpStorm IDE. So I have to work based on the quick start example. – Ng2-Fun Nov 21 '16 at 21:51