How to set up a project build workflow for an Angular 2 web application from scratch using npm, TypeScript, and Webpack.

In this first part we start with an empty folder, add an index.html file and the code for a basic Angular component. Then we write a package.json file with all the Angular modules and dependencies, briefly explain what each dependency is for, and finally use npm to download them all.

This is an extract from my “Angular 2 From The Ground Up” course. You can get early access to the full course here:

Code snippets (updated for Angular 2.0.1):

Update: after Angular 2.0.0-rc.5 the code in main.ts needs to be slightly different and you also need an app.module.ts. See steps 2 to 4 in the Angular QuickStart page:

NPM packages:
Angular modules:
core-js:
reflect-metadata:
rxjs:
zone.js:

Nguồn:https://u-os.org/

Xem Thêm Bài Viết Khác:https://u-os.org/cong-nghe

Author

24 Comments

  1. Pradyumna Barik Reply

    Hi I'm a big fan of you teaching style. Could you please give an example of Subscription with explanation in angular6. Thanks in Advance.

  2. Thanks your taturials are very good.But one main issue which I am facing is that My dist folder is not show in my Project but in commamd prompt every thing is working and Webpack run Successfully.

  3. Santhosh Kumar Reply

    Great tutorial. Very helpful. But it is expecting module.ts file . Otherwise it is throwing an error : "No Ngmodule metadata found". It is working fine after adding that. Anyway thank you so much.

  4. Akash Solanki Reply

    Thanks for a nice video Mirko.
    Could you tell me how '@angular/core' is resolved in this example because no path to the package has been mentioned anywhere?

  5. Luis Martinez Reply

    Amazing the way you explain every dependency! it shows how much you know. Thanks for sharing this

  6. Hans Schenker bei Google Reply

    Very detailed and elaborated tutorials on Angular 2 see :https://www.udemy.com/angular-2-from-the-ground-up/?couponCode=YTUJRBTSDI

  7. stevenjchang Reply

    a coding teacher that talks intelligently enough to not annoy me but dumb enough for me to understand. nice job on the tutorial!

  8. Great tutorial, Mirko!! On to part 2! I'm really interested in how WebPack and Angular2 play together. 🙂

  9. this is the best and most clearest angular2 tutorial i ever seen.Thank you so much!!!

  10. Junior Molaga Reply

    the most pure and elegant tutorial i saw!
    you make angular seem so simple

  11. Norbertsson Reply

    npm init creates the package.json file for you. There is no need to set it up manually.

Write A Comment