Det er længe siden jeg har oprettet et helt ny projekt i Angular, og faktisk har jeg ikke skrevet om det siden Angular 6. Så her får du en hurtig intro til at oprette et helt nyt Angular 13 projekt med Bootstrap 5.
|
1 2 3 4 |
ng new --skip-install ? What name would you like to use for the new workspace and initial project? mitNyeProjekt ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ] |
Med --skip-install bliver projektet blot oprettet. Der installeres ingen pakker. Det foretrækker jeg fordi jeg har oplevet at der er rod i afhængigheder allerede ved første installation. Derfor tjekker jeg package.json og foretager nødvendige ændringer i versionsnumre. Derefter installerer jeg:
|
1 |
npm install |
Her er min package.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
{ "name": "mitNyeProjekt", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "^13.3.11", "@angular/common": "^13.3.11", "@angular/compiler": "^13.3.11", "@angular/core": "^13.3.11", "@angular/forms": "^13.3.11", "@angular/platform-browser": "^13.3.11", "@angular/platform-browser-dynamic": "^13.3.11", "@angular/router": "^13.3.11", "rxjs": "^6.6.7", "tslib": "^2.2.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^13.3.8", "@angular/cli": "^13.3.8", "@angular/compiler-cli": "^13.3.11", "@types/jasmine": "^3.10.6", "@types/node": "^16.0.0", "jasmine-core": "^3.8.0", "karma": "^6.3.2", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.6.0", "typescript": "4.6.4" } } |
Bootstrap 5 tilføjes som følger:
|
1 |
ng add @ng-bootstrap/ng-bootstrap |
Kommandoen giver følgende output:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Using package manager: npm Found compatible package version: @ng-bootstrap/ng-bootstrap@12.1.2. Package information loaded. The package @ng-bootstrap/ng-bootstrap@12.1.2 will be installed and executed. Would you like to proceed? Yes Package successfully installed. UPDATE package.json (1237 bytes) Packages installed successfully. UPDATE src/app/app.module.ts (489 bytes) UPDATE src/styles.scss (155 bytes) UPDATE src/polyfills.ts (3049 bytes) |