Vad är nytt i vinkel 4?

Jan 31, 2026
Hur

I mars släppte vinkelgruppen version 4, och med det några spännande nya funktioner att utforska. I den här handledningen visar vi dig Hur man gör en app Med några av dessa nya funktioner, samt demonstrera några av de kraftfulla prestationsförbättrande, förändringar under huven.

Vad är nytt?

Vinkeltaget kallar det en "osynlig makeover", eftersom de flesta förändringarna är i bakgrunden snarare än med kärnkodningsfunktionalitet. En viktig förändring är flyttningen till före-tidskompilering som standard, vilket har potential att drastiskt förbättra prestanda när den används korrekt. Typescript 2.1+ stöds nu, vilket ger oss tillgång till alla nya egenskaper hos ES2015.

Det är inte att säga att det inte finns några anmärkningsvärda förändringar i grunderna - till exempel finns det en användbar ny mallbindande syntax som gör det möjligt för oss att förenkla vår kod genom att lägga till en annan möjlighet till ngif , och förmågan att tilldela lokala variabler inom en ngfor .

Missade jag 3,0?

Angular 4 är den första stora versionsfrisättningen av ramen som antagits av semantisk version. Så oroa dig inte, du saknade inte 3.0 - det fanns två stora uppdateringar, och båda rullades in i version 4.0.

Observera också att vinkel 1.x nu är känt som angularj, och vinkel 2+ är helt enkelt kallad. Var försiktig eftersom vissa tutorialer från tredje part och bibliotek inte har uppdaterat deras användning av dessa villkor.

Få handledningsfilerna

I den här handledningen arbetar vi med en blomsterbutik app. För att ladda ner exemplet-appen, gå till Filerilo , välj Gratis grejer och gratis innehåll bredvid handledningen. Obs! Första gången användare måste registrera sig för att använda Filsilo. När du är inloggad kan du ladda ner exemplet-appen här .

Låt oss börja!

01. Börja med nod

Download and install Node.js by following the instructions in the wizard

Hämta och installera Node.js genom att följa anvisningarna i guiden

Låt oss börja från början och använda vinklade CLI för att bygga en Hello World App. Om du vill uppdatera en befintlig app, hoppa till steg 4. Om du inte redan har det, Hämta nod , som kommer förpackat med NPM. Om du redan har nod, kontrollera det är minst nod 6.9.x och npm 3.x.x från kommandoraden. 

 $ node -v
v6.10.2
$ npm -v
3.10.10

02. Ställ in ett nytt projekt

Create a simple Hello World app in the Angular CLI

Skapa en enkel Hello World App i vinklade cli

Nu har vi en paketchef vi kan använda den för att installera vinkel och vinklad cli. Bland annat gör CLI att du enkelt skapar nya projekt och komponenter. 

 $ npm installera -g @ vinkel / cli
$ ng New My-First-Angular4-app # Angular CLI-kommandon använder 'ng'
$ ng Servera -Open # Detta kommando kommer att bootstrap din app och starta den i webbläsaren

03. Kontrollera versionering

Om du inte har sett ett vinkelprojekt innan du tar tid att bekanta dig med filstrukturen som genereras av CLI. För vårt nya projekt, vår paket.json Ska lista version 4.0.0 vinkliga paket. 

 "Beroende": {
"@ vinkel / vanlig": "^ 4.0.0",
"@ vinkel / kompilator": "^ 4.0.0",
"@ vinkel / kärna": "^ 4.0.0",
"@ vinkel / formulär": "^ 4.0.0",
"@ vinkel / http": "^ 4.0.0",
"@ vinkel / plattform-webbläsare": "^ 4.0.0",
"@ vinkel / plattform-webbläsare-dynamisk": "^ 4.0.0",
"@ vinkel / router": "^ 4.0.0" [...]}

04. Uppgradera till vinkel 4

Om du har en befintlig vinkelapp med 2.x-versioner listade, är det verkligen lätt att uppdatera till version 4 i de flesta fall. Vi behöver bara installera och uppdatera de relevanta paketen från kommandoraden. Mac: 

 $ npm installera @ vinkel / {common, compiler, compiler-cli, kärna, formulär, http, plattform-webbläsare, plattform-webbläsare-dynamisk, plattform-server, router, animationer} @latest typsnitt @ senaste -

Windows: 

& gt; NPM Installera @ vinkel / vanlig @ Angular / kompilator @ senaste @ vinkel / kompiler-cli @ senaste @ vinkel / kärna @ senast @ vinkel / formulär @ senast @ vinkel / http @ senaste @ vinkel / plattform-webbläsare @ senaste @angular / plattform-webbläsare-dynamisk @ senaste @ vinkel / plattform-server @ senaste @ vinkel / router @ senast @ vinkel / animationer @ senaste typsnittet @ senaste --Save

05. Ladda ner Tutorial App

Från och med nu arbetar vi med en vinkel 2 exempel app som du kan ladda ner från Filerilo (För fullständiga anteckningar om hur du gör det, se intro ovan). Observera att den här appen har skapats rent för illustrativa ändamål. När du har laddat ner APBOWER-appen i din rotkatalog, installera beroenden och lansera i webbläsaren. 

 $ npm installera
$ ng Serve --Open

06. Uppgradera blomstermarknaden till 4,0

Our custom modal module needs renaming [click the icon to enlarge)

Vår anpassade modalmodul behöver byta namn på [klicka på ikonen för att förstora)

Inom florist katalog, uppgradera till 4,0. Vi har några Unmet peerberoende Fel efter uppgradering.

07. Fixa peer beroendens

Peer-beroenden är att hantera projekt som har paket som bygger på olika versioner av samma beroenden. Du måste lägga till dessa manuellt till din paket.json fil. De peer beroenden som vi behöver för blomstermarken inkluderar äldre versioner av @ Angular / {Core, http} , rxjs och zone.js .

Granska felen i terminalutgången och lägg till varje saknad beroende av paket.json . 

 "Peerdependenser": {
  "@ vinkel / kärna": "& gt; = 2.0.0",
  "@ vinkel / http": "& gt; = 2.0.0",
  "rxjs": "^ 5.0.0",
  "Zone.js": "0.7.8"
  },

08. Se upp för namnändringar

Vår blomsterbutik app använder sig av en öppen källkod som kallas ng2-modal . Författaren har dock sedan uppdaterat sin namnkonvention till ngx-modal . Vi måste ändra vårt beroende namn och ng-modul importeras i enlighet med detta. 

 Package.json:
"Beroende": {
  [...]
  "NGX-modal": "0.0.25",
     [...]
  },
app / app.module.ts:
import {modalmodule} från 'ngx-modal';

09. Kontrollera versioner

Vår anpassade modalkomponent behöver också uppdatering till en nyare version, så var noga med att uppdatera den med NPM. 

 $ npm installera ngx-modal @ Senaste --Save

10. Kontrollera ditt arbete

Nu har vi lappat upp våra beroenden, det är en bra idé att rensa node_modules och bygga den igen från vår paket.json . Om allt går bra borde du ha en ren byggnad! Om du inte gör det kan något fortfarande saknas i dina beroendeversioner. Ta ett annat utseende. 

 $ RM -RF Node_Modules /
$ npm cache clean
$ npm installera
$ ng Serve --Open

Nästa sida: Steg 11-20

  • 1
  • 2

Nuvarande sida: Steg 1-10

Hur - Mest populära artiklar

Hur man kan rengöra penslar: Den slutgiltiga guiden

Hur Jan 31, 2026

(Bildkredit: Sonny Flanaghan) Att lära sig att rengöra penslar ordentligt är en viktig färdighet. Som ordspråket..

Hur man använder Cloud Storage som en kreativ

Hur Jan 31, 2026

(Bildkredit: Jan Vašek från Pixabay) Varför behöver du veta hur man använder molnlagring? Tja molnlagring är in..

3 Tips för att skapa fantastiskt tryckreklammaterial

Hur Jan 31, 2026

I en alltmer digitalt värld har smart utformat tryckt reklammaterial kraften att göra en allvarlig inverkan. Kanske är du en f..

Slå på dina menyer med animering med CSS

Hur Jan 31, 2026

Det är genom animering att vi gör världens känsla: dörrarna svänger öppna, bilar kör till sina destinationer, läppar cur..

Hur man börjar med Sass

Hur Jan 31, 2026

Sass är ett kraftfullt verktyg som ger många funktioner från andra programmeringsspråk till CSS - som funktioner,..

Skapa anpassade penslar i klippstudiofärg

Hur Jan 31, 2026

Varje första installation av klippstudiofärg innebär en upphetsad utforskning av dekorationssubtoolen. Det är ett verkligt smorgasbord av naturliga, onaturliga och rättvisa goofy borstar..

5 sätt att hantera kassaflödet effektivt

Hur Jan 31, 2026

Styrning av ditt kassaflöde är nyckeln till frilans framgång, och det finns några svåra och snabba regler för att se till a..

Kombinera traditionella och digitala färdigheter för att skapa ett komiskt skydd

Hur Jan 31, 2026

I åren blev jag skrämmad genom att arbeta digitalt. Något om plastbenet på en plastyta kände sig för att skada mig. Jag äl..

Kategorier