7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

9.1 Building for Production

To wrap things up, I'll show you how to create a deployment-ready production build for our app. I'll also show you how to preview the production build using the Angular CLI.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


9.1 Building for Production

Hi folks. In this lesson, we're going to see how we can get our app ready to be deployed. We've finished development, we've written our unit tests, so now we're starting to think about deployment. Thankfully, the Angular CLI makes this process incredibly easy. So far, we've been using NgServe to run our application locally on a development server. But in this mode, Angular does things like loading the template asynchronously and compiling the application in the browser. These things are useful for development, but they aren't especially useful for production because they're not completely secure or as performant as they could be. In order to create a deployable production build then, we can run the NG build command and use the dash dash prod flag. So this build takes a bit longer than a regular development build becauseAangular will be pre-compiling templates and compiling the application. And it looks like we've got an error in the route's file. Let's just go and fix that. And it looks like we're missing a closing curly bracket here. And let's try that production build again. So this build will take a bit longer, because Angular will be pre-compiling all the templates and building the app. Once it finishes though, we should see a new dist folder, and inside here should be the deployable assets that the Angular CLI has created for us. So we can see that we have this dist folder now. And inside the dist folder, we have all our concatenated and minified files, we've got a separate one for the inline bundle. We've got one for the main bundle, so that's mostly all of our code. There's one there for the poly fills. And also, the fun files and a combined minified CSS file has been added too. So we'll still need a web server to actually be able to run the index.html page that's been put into the dist folder for us. Normally, I might use the built-in visual studio development server to run this file, but that's not gonna work in this case either. But luckily, the Angular CLI allows us to run the built-in development server in production mode. So we can add the hyphen hyphen prod flag to the NG Serve command. And this will do a production build, and it will then launch the Webpack Dev Server, so that we can preview the built version of the application. Everything looks the same as it did before. Let's just open up the console, and let's just open the sources panel this time. And we can see that we don't get access to any Webpack things. Sometimes, there's a Webpack expandable option down here and that contains all of the individual files. We don't have that this time. We just have the combined and concatenated files here. And we can see that it definitely is minified, so it definitely is part of our production build. So, in this lesson we've wrapped up the practical side of the course with a quick look at how we can create a deployable bundle that is ready for production using the Angular CLI. Thanks for watching.

Back to the top