Repository files navigation

A complete, yet simple, starter for Angular v2+ using Webpack.

This seed repo serves as an Angular starter for anyone looking to get up and running with Angular and TypeScript fast. UsingWebpack for building our files and assisting with boilerplate. We're also using Protractor for our end-to-end story and Karma for our unit tests.

• Best practices in file and application organization forAngular.
• Ready to go build system usingWebpack for working withTypeScript.
• Testing Angular code withJasmine andKarma.
• Coverage withIstanbul
• End-to-end Angular code usingProtractor.
• Stylesheets withSASS (not required, it supports regular css too).
• Error reported withTSLint andCodelyzer.
• Documentation withTypeDoc.

Warning: Make sure you're using the latest version of Node.js and NPM

# clone our repo$ git clone https://github.com/preboot/angular-webpack.git my-app# change directory to your app$cd my-app# install the dependencies with npm$ npm install# start the server$ npm start

go tohttp://localhost:8080 in your browser.

• Getting Started
  • Dependencies
  • Installing
  • Developing
  • Testing
  • Production
  • Documentation
• Frequently asked questions
• TypeScript
• License

What you need to run this app:

• node andnpm (UseNVM)
• Ensure you're running Node (v6.x.x+) and NPM (3.x.x+)

• fork this repo
• clone your fork
• npm install to install all dependencies

After you have installed all dependencies you can now start developing with:

• npm start

It will start a local server usingwebpack-dev-server which will watch, build (in-memory), and reload for you. The application can be checked athttp://localhost:8080.

As an alternative, you can work using Hot Module Replacement (HMR):

• npm run start:hmr

And you are all set! You can now modify your components on the fly without having to reload the entire page.

• single run:npm test
• live mode (TDD style):npm run test-watch

• single run:
  • in a tab,if not already running!:npm start
  • in a new tab:npm run webdriver-start
  • in another new tab:npm run e2e
• interactive mode:
  • instead of the last command above, you can run:npm run e2e-live
  • when debugging or first writing test suites, you may find it helpful to try out Protractor commands without starting up the entire test suite. You can do this with the element explorer.
  • you can learn more aboutProtractor Interactive Mode here

To build your application, run:

• npm run build

You can now go to/dist and deploy that to your server!

You can generate api docs (usingTypeDoc) for your code with the following:

• npm run docs

No, Webpack will add all the needed Javascript bundles as script tags and all the CSS files as link tags. The advantage is that you don't need to modify the index.html every time you build your solution to update the hashes.

It's simple, just install the lib via npm and import it in your code when you need it. Don't forget that you need to configure some external libs in thebootstrap of your application.

Just install the lib and import the css files invendor.ts. For example this is how to do it with bootstrap:

npm install bootstrap@next --save

And invendor.ts add the following:

import'bootstrap/dist/css/bootstrap.css';

To take full advantage of TypeScript with autocomplete you would have to use an editor with the correct TypeScript plugins.

We have good experience using these editors:

• Visual Studio Code
• Webstorm 11+
• Atom withTypeScript plugin
• Sublime Text withTypescript-Sublime-Plugin

MIT