1. Чтобы установить Angular дадим следующую команду:
npm install -g angular-cli@latest
Результат:
C:\angular>npm install -g angular-cli@latest
2. Теперь проверим версию:
ng --version
У меня результат такой:
C:\angular>ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 12.2.3 Node: 12.18.1 Package Manager: npm 6.14.5 OS: win32 x64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.1202.3 (cli-only) @angular-devkit/core 12.2.3 (cli-only) @angular-devkit/schematics 12.2.3 (cli-only) @schematics/angular 12.2.3 (cli-only)
3. Создадим проект firstapp:
ng new firstapp
Во время создания проекта Angular меня спросил про routing и bstylesheet, я выбрал по умолчанию routing=No, stylesheet=CSS:
C:\angular>ng new firstapp ? Would you like to add Angular routing? No ? Which stylesheet format would you like to use? CSS
Результат:
C:\angular>ng new firstapp ? Would you like to add Angular routing? No ? Which stylesheet format would you like to use? CSS CREATE firstapp/angular.json (3051 bytes) CREATE firstapp/package.json (1070 bytes) CREATE firstapp/README.md (1054 bytes) CREATE firstapp/tsconfig.json (783 bytes) CREATE firstapp/.editorconfig (274 bytes) CREATE firstapp/.gitignore (604 bytes) CREATE firstapp/.browserslistrc (703 bytes) CREATE firstapp/karma.conf.js (1425 bytes) CREATE firstapp/tsconfig.app.json (287 bytes) CREATE firstapp/tsconfig.spec.json (333 bytes) CREATE firstapp/src/favicon.ico (948 bytes) CREATE firstapp/src/index.html (294 bytes) CREATE firstapp/src/main.ts (372 bytes) CREATE firstapp/src/polyfills.ts (2820 bytes) CREATE firstapp/src/styles.css (80 bytes) CREATE firstapp/src/test.ts (788 bytes) CREATE firstapp/src/assets/.gitkeep (0 bytes) CREATE firstapp/src/environments/environment.prod.ts (51 bytes) CREATE firstapp/src/environments/environment.ts (658 bytes) CREATE firstapp/src/app/app.module.ts (314 bytes) CREATE firstapp/src/app/app.component.html (24585 bytes) CREATE firstapp/src/app/app.component.spec.ts (962 bytes) CREATE firstapp/src/app/app.component.ts (212 bytes) CREATE firstapp/src/app/app.component.css (0 bytes) √ Packages installed successfully.
4. Перейдём в папку firstapp:
cd firstapp
5. Чтобы запустить проект введём команду ng serve:
- Generating browser application bundles (phase: setup)...Compiling @angular/core : es2015 as esm2015 Compiling @angular/common : es2015 as esm2015 Compiling @angular/platform-browser : es2015 as esm2015 Compiling @angular/platform-browser-dynamic : es2015 as esm2015 √ Browser application bundle generation complete. Initial Chunk Files | Names | Size vendor.js | vendor | 2.09 MB polyfills.js | polyfills | 510.54 kB styles.css, styles.js | styles | 383.33 kB main.js | main | 55.03 kB runtime.js | runtime | 6.62 kB | Initial Total | 3.02 MB Build at: 2021-08-28T21:29:26.503Z - Hash: bfa2161563c995dd720fb - Time: 187636ms ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** √ Compiled successfully. √ Browser application bundle generation complete. 5 unchanged chunks Build at: 2021-08-28T21:29:44.072Z - Hash: 2a5dbd9b5758732e39ab - Time: 12568ms √ Compiled successfully.
6. В браузере введём адрес localhost:4200, вуаля!: