Skip to content

task#00 preparation

Jump to bottom
bacn edited this page Sep 16, 2020 · 1 revision

#Preparation with angular-cli

Prerequisites

Both the CLI and generated project have dependencies that require Node 10.3 or Node 12.0 or higher, together with NPM 6.7.0 or higher.

Links

Updating Angular CLI

If you're using Angular CLI beta.28 or less, you need to uninstall angular-cli package. It should be done due to changing of package's name and scope from angular-cli to @angular/cli:

Clean up old version

npm uninstall -g angular-cli

New Installation

Global package:

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

MacOS

If you get errors during installation about access denied you can try to install node.js with nvm (node version manager). hints

Create a new project

Create new project with angular-cli:

ng new PROJECT_NAME

Go into project directory:

cd PROJECT_NAME

Replace PROJECT_NAME with e.g. auction-tutorial-y2020.

  • The new command will ask you about adding a routing... please press yes.
  • For the stylesheet format you can use scss. We will use in the tutorial scss. Task#07 will instruct you how to refactor if you have chosen css for now.
ng new auction-tutorial-y2020
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use?
  CSS
❯ SCSS   [ https://sass-lang.com/documentation/syntax#scss                ](https://sass-lang.com/documentation/syntax#scss )
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ](https://sass-lang.com/documentation/syntax#the-indented-syntax )
  Less   [ http://lesscss.org                                             ](http://lesscss.org  )
  Stylus [ http://stylus-lang.com                                         ](http://stylus-lang.com)

Start project (watchers + build process):

ng serve

Open project in browser

inital-angular-page

Make it work with Internet Explorer 10

  • open the file polyfills.ts
  • uncomment the import statements

run the neccessary npm commands

npm install --save classlist.js
npm install --save intl
npm install --save web-animations-js

Hints

  • update npm via
    npm -g i npm

or use nvm (node version manager).

Create a new project with Webstorm or IntelliJ or other IDE

  • Go to the Webstorm menu and choose File->New->Project
  • Choose Angular CLI

Clone this wiki locally