Angular 4 Project Setup with Webpack



A complete tutorial on setting up a highly scalable and configurable Angular 4 project with Webpack. Learn how to optimize your web development throughput with this project configuration!

⭐ Video Outline ⭐

⌨ Intro: 0:00
⌨ Project Setup (Boiler Plate), and an intro to TypeScript: 0:32
⌨ Angular Setup: 5:48
⌨ Webpack Configuration (Webpack Common): 8:34
⌨ Webpack Dev and Prod Config: 9:07
⌨ Running the App: 32:32
⌨ Webpack Test Config: 35:05
⌨ AOT Build: 38:19

🔗 Github Repo: https://github.com/Bigless27/Angular-webpack-starter

Video by Jordan Lesson.
Contact: Jordantreylesson@gmail.com

Learn to code for free and get a developer job: https://www.freecodecamp.com

Read hundreds of articles on programming: https://medium.freecodecamp.com

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 13 Comments

  1. Harshit Pant

    You are the first guy I have seen that is using serif font in text editor instead of monospace. BTW very nice video.

  2. Dev N

    why didn't you use angular cli?

  3. Eric Lesniewski

    In order to get this to work, I had to add the following to the tsconfig.json files:

    "typeRoots": [
    "node_modules/@types"
    ]

    This is probably not the forum to put requests out there, but I am having difficulty with the npm run webpack-prod command line syntax. I had to add –config config/webpack.prod.js to the end of the command in order to get this to work. It completes, with errors:

    ERROR in chunk app [initial]
    webpack.prod.js
    Conflict: Multiple assets emit to the same filename webpack.prod.js

    ERROR in chunk polyfills [entry]
    webpack.prod.js
    Conflict: Multiple assets emit to the same filename webpack.prod.js

    I have found a suggestion to include the copy-webpack-plugin from (have not tried this myself, yet):
    https://github.com/webpack-contrib/copy-webpack-plugin

    Has anyone run into this problem and/or tried a solution. Thanks. Nice work on this video.

  4. Johan Roug

    hi. This is great. how can I use SCSS in this project ?

  5. Face Bundy

    Can you migrate the CommonsChunkPlugin to webpack 4? this plugin was deprecated and was replaced by SplitChunks

  6. RAJ JAISWAL

    Hi how to use webpack config with scss and angular 5. pls create a sample on gihub and link here.

  7. FrontEnd Miracle

    Great work with the video outline. I wish every youtube tutorial would show one.

  8. enviroment… ENVIRONMENT!!!
    File Name – it two different words. Why the hell "Filename".
    What the hell happening with developers, people who are supposed to be smart and intelligent???

Leave a Reply