What is the functionality of angular-cli@webpack?

Question

After working with angular-cli using systemJS, I have become comfortable with the build process, test cases, and component interaction.

Recently, I made the switch from angular-cli to angular-cli@webpack.

However, I am now facing confusion on a few points:

Can you explain how the webpack build process works?
How do I go about installing third-party libraries like lodash, ng2-bootstrap, etc. with this webpack configuration since I do not see a webpack.config.ts file?
Why can't I see any bundle containing JS files of my application?
All I can see are TypeScript files for my application. Why is that?

Thank you in advance for your help.

Answer 1

Answer №1

Executing the command ng build will compile all files and store the output in the Dist folder
To include an external dependency, use
```
npm install 'external-dependency'
```
and then import it into the necessary files (including app.module.ts)
Prior to step 1, make sure to run ng build
Refer to step 1 for further details

Answer 2

Executing the command ng build will compile all files and store the output in the Dist folder
To include an external dependency, use
```
npm install 'external-dependency'
```
and then import it into the necessary files (including app.module.ts)
Prior to step 1, make sure to run ng build
Refer to step 1 for further details

Answer 3

webpack processes the entry point and generates the desired output. Here's an example:

 entry: {
        'app': './main.ts'// your entry point
 }, 
output: {
   path: helpers.root('dist'),
   filename: 'bundle.js' // your build file
}

Simply install dependencies with npm and require them in your project. Webpack will handle bundling them into your build.

Example

npm install lodash

And in your project:

require("lodash")

When you use ng-serve to run the application, it serves from memory without building physical files, which is why you don't see any files.
If you use ng-build instead of ng-serve, physical files will be built in the dist folder and become visible.

Answer 4

webpack processes the entry point and generates the desired output. Here's an example:

 entry: {
        'app': './main.ts'// your entry point
 }, 
output: {
   path: helpers.root('dist'),
   filename: 'bundle.js' // your build file
}

Simply install dependencies with npm and require them in your project. Webpack will handle bundling them into your build.

Example

npm install lodash

And in your project:

require("lodash")

When you use ng-serve to run the application, it serves from memory without building physical files, which is why you don't see any files.
If you use ng-build instead of ng-serve, physical files will be built in the dist folder and become visible.