Total.js + Angular2 + Webpack

How integrate Angular2, Total.js and Webpack modules ?

Assumptions and Benefits our project:

  • Design and build modular applications based on components
  • Use Total.js, Angular2, Typescript and  tsc transpiler
  • Possibility to select rendering side of angular2 – client or server
  • Our purpose: Use Webpack to create few bundled files for production version

Below presented skeleton/project You can find on my GitHub repository:

Structure of directories is following:

  1. Expanded structure directories of total.js:
  2. Expanded structure directories of Angular2:

The most important:

In case of catalogs structure:

  1. /client – Angular2 directory
  2. Remaining directories – Total.js

In case of configuration Total.js:

  1. You have to define Angular2 directory in config file.
  2. You have to block  total.js process  of compiling script – for this process will be responsible Webpack and Angular2
  3. If You want use /public to storage css, img or another files then You have change “directory-public” to correct directory e.g. /public/

Last very important file is webpack config called as webpack.config.js responsible for create bundle from all files located in server / directory

The last operation it is installation process all necessary modules:

  1. Install the total.js, webpack, babel modules  in project directory
    npm install 
  2. Install the dependencies for Angular2  in /client
    npm run build

  3. Start the server from the root directory of project
    npm run start
  4. Visit http://localhost:8000
    That’s all – Now You can create Amazing and Professional SPA applications
February 10th, 2017

  • Youre so cool! I dont suppose Ive learn something like this before. So nice to find any individual with some authentic thoughts on this subject. realy thank you for starting this up. this website is one thing that is needed on the internet, someone with slightly originality. helpful job for bringing something new to the internet!.

  • I enjoy you because of your own efforts on this web page. Gloria really loves carrying out investigations and it is simple to grasp why. Most of us know all of the compelling mode you create valuable guidelines through your web blog and as well strongly encourage contribution from the others on that area so our daughter has always been starting to learn a great deal. Take pleasure in the rest of the year. You are always performing a really great job..