CODEWITHSUNDEEP
angularwebpack
Ola Zeyad
Ola Zeyad

Reputation: 113

how to use angular2 with webpack

I try to use angular2 with webpack i follow the steps from angular guide and when run my project there is no errors and the output is:

 70% 3/3 build modules http://localhost:8080/
webpack result is served from http://localhost:8080/
content is served from D:\angular-webpack
404s will fallback to /index.html
chunk    {0} app.js, app.css (app) 3.56 kB {2} [rendered]
chunk    {1} polyfills.js (polyfills) 467 kB [rendered]
chunk    {2} vendor.js (vendor) 2.34 MB {1} [rendered]
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 321 bytes [rendered]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 1.96 kB [rendered]
webpack: bundle is now VALID.

but i don't know what after this how to use it to deploy my project in production? also the dist folder is allways empty

Upvotes: 1

Views: 191

Answers (3)

Shaiban Siddiqui
Shaiban Siddiqui

Reputation: 26

You are running webpack dev server command - npm start, to launch your app go to http://localhost:8080/ . To deploy your project in production you should run npm build , it will create dist folder and produce a production bundle of your application.

See "scripts": in package.json

Upvotes: 1

Nige
Nige

Reputation: 1233

Your question is extremely broad to give you a definite answer to your problem, how ever this might help you and other users on Stackoverflow.

I highly recommend viewing this boilerplate repository (https://github.com/AngularClass/angular2-webpack-starter/) using webpack2 and updates with the latest version of angular2.

It may abit more complex than you would like it to be, but you can take alot of direction from this repo like:

  • How to run a decent development workflow ( hmr and webpack watch )
  • How to compile your code to production ( minified and available in a dist folder )
  • structured and working e2e testing and unit testing

This isn't an exact answer but I think this will help direct alot of users with any webpack related setup questions

Here's the repo: https://github.com/AngularClass/angular2-webpack-starter/

I've been following it from the start and is my GOTO resource to get direction for setup on any new projects I start.

Hope this helps somewhat!

Upvotes: 0

hakany
hakany

Reputation: 7264

to deploy your project in production run ng build --prod in command line. by doing this files to dist folder will be added.

Hope this helps.

Upvotes: 0

Related Questions