Getting Started with Angular 5

GitHub Repository

{{ file.path }}

{{ file.path }}

File: {{ currentFilename }}

Install npm

In order to get started, npm must be installed. To install it, follow the instructions at the package managers page.

Using npm

Angular 2 and Webpack are both based on npm. Any changes to TypeScript or CSS files will need to be re-webpacked by running npm run build. The run build argument is taken from scripts section of the package.json file:

{
	"scripts": {
		"build": "rimraf public_html/dist && webpack --config webpack/webpack.live.js --progress --profile --bail"
	}
}

The scripts section contains commands that need to be run again and again in a project. If your project has another repetitive task, another script may be added to the scripts section. The build script chains three commands run in sequence:

  1. rimraf public_html/dist: clean out the frontend facing webpack generated directory
  2. webpack --config webpack/webpack.live.js --progress --profile --bail: run webpack with the live configuration and build the Angular 4 app

Starting The Dev Server

The Dev Server is used to create a environment that allows users to test their Angular App in an efficient manner

  1. Startup the terminal.
    • Open the terminal by pressing - Space and typing Terminal
    • Open the terminal by pressing Ctrl - Alt - T
    • Open Git Bash from the Start Menu
  2. cd to the project directory
  3. Type npm start build
  4. If the dev-server is started successfully it will continue running in the background
  5. You must stop the dev server when you are no longer using it by pressing Ctrl
    c. Failing todo so will result in errors when restarting the Dev Server

If the local dev server doesn't produce any errors, it is very likely the remote build will not, either.

Running the Build Remotely

Running the build remotely is the final step in deploying an Angular app. The build will then be reflected on the server and will be what the end users will tangibly see. It is highly recommended the build first, so one can eliminate common errors first. To remotely build the app:

  1. Connect to the server using SSH.
  2. cd to the project directory
  3. Type npm run build

Once the remote build is complete, the site is immediately deployed and ready. Reload the site and ensure it is working as expected.

Angular 4 File Hierarchy

FileComment
.bootstraprcWebpack configuration for loading Bootstrap
package.jsonnpm package configuration
tsconfig.jsonTypeScript compiler configuration
src/app/app.component.tsMain Angular app component
src/app/app.module.tsMain Angular app module
src/app/app.routes.tsAngular routing configuration
src/app.cssApp CSS stylesheet
src/main.tsMain Angular & Webpack entry point
src/polyfills.tsLoads polyfills, requirements for Angular 4
src/vendor.tsLoads Angular 4 and any project specific external packages
webpack/helpers.jsHelper functions plagiarized from angular.io
webpack/index.phpMaster site wide template Webpack will modify
webpack/webpack.common.jsCommon Webpack configuration for multiple webpack configurations
webpack/webpack.live.jsLive Webpack configuration