You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The `@NgModule` decorator identifies `AppModule` as an `NgModule` class.
21
19
`@NgModule` takes a _metadata_ object that tells Angular how to compile and launch the application.
22
20
23
-
***_imports_**— the `BrowserModule` that this and every application needs to run in a browser.
24
-
***_declarations_**— the application's lone component, which is also ...
25
-
***_bootstrap_**— the _root_ component that Angular creates and inserts into the `index.html` host web page.
21
+
The `@NgModule` properties for the minimal `AppModule` generated by the CLI are as follows:
26
22
27
-
The [NgModules](guide/ngmodule) guide dives deeply into the details of NgModules.
28
-
All you need to know at the moment is a few basics about these three properties.
23
+
***[_declarations_](#declarations)**— declares the application components. At the moment, there is only the `AppComponent`.
29
24
30
25
31
-
{@aimports}
26
+
***[_imports_](#imports)**— the `BrowserModule`, which this and every application must import in order to run the app in a browser.
32
27
33
28
34
-
### The _imports_ array
29
+
***[_providers_](#providers)**— there are none to start but you are likely to add some soon.
35
30
36
-
NgModules are a way to consolidate features that belong together into discrete units.
37
-
Many features of Angular itself are organized as NgModules.
38
-
HTTP services are in the `HttpModule`. The router is in the `RouterModule`.
39
-
Eventually you may create a feature module.
40
31
41
-
Add a module to the `imports` array when the application requires its features.
32
+
***[_bootstrap_](#bootstrap-array)**—the _root_`AppComponent` that Angular creates and inserts into the `index.html` host web page.
42
33
43
-
_This_ application, like most applications, executes in a browser.
44
-
Every application that executes in a browser needs the `BrowserModule` from `@angular/platform-browser`.
45
-
So every such application includes the `BrowserModule` in its _root_`AppModule`'s `imports` array.
46
-
Other guide and cookbook pages will tell you when you need to add additional modules to this array.
34
+
The [Angular Modules (NgModules)](guide/ngmodule) guide dives deeply into the details of `@NgModule`.
35
+
All you need to know at the moment is a few basics about these four properties.
36
+
37
+
{@a declarations}
47
38
48
39
49
-
<divclass="alert is-important">
40
+
### The _declarations_ array
50
41
42
+
You tell Angular which components belong to the `AppModule` by listing it in the module's `declarations` array.
43
+
As you create more components, you'll add them to `declarations`.
51
44
45
+
You must declare _every_ component in an Angular Module class.
46
+
If you use a component without declaring it, you'll see a clear error message in the browser console.
47
+
48
+
You'll learn to create two other kinds of classes —
49
+
[directives](guide/attribute-directives) and [pipes](guide/pipes)—
50
+
that you must also add to the `declarations` array.
52
51
53
-
**Only `NgModule` classes** go in the `imports` array. Do not put any other kind of class in `imports`.
52
+
<divclass="alert is-important">
54
53
54
+
**Only _declarables_**—_components_, _directives_ and _pipes_— belong in the `declarations` array.
55
+
Do not put any other kind of class in `declarations`. Do _not_ declare `NgModule` classes. Do _not_ declare service classes. Do _not_ declare model classes.
55
56
56
57
</div>
57
58
59
+
{@a imports}
58
60
61
+
### The _imports_ array
59
62
60
-
<divclass="l-sub-section">
63
+
Angular Modules are a way to consolidate features that belong together into discrete units.
64
+
Many features of Angular itself are organized as Angular Modules.
65
+
HTTP services are in the `HttpClientModule`. The router is in the `RouterModule`.
66
+
Eventually you may create your own modules.
67
+
68
+
Add a module to the `imports` array when the application requires its features.
69
+
70
+
_This_ application, like most applications, executes in a browser.
71
+
Every application that executes in a browser needs the `BrowserModule` from `@angular/platform-browser`.
72
+
So every such application includes the `BrowserModule` in its _root_`AppModule`'s `imports` array.
73
+
Other guide pages will tell you when you need to add additional modules to this array.
61
74
75
+
<divclass="alert is-important">
62
76
77
+
**Only `@NgModule` classes** go in the `imports` array. Do not put any other kind of class in `imports`.
78
+
</div>
79
+
80
+
<divclass="l-sub-section">
63
81
64
82
The `import` statements at the top of the file and the NgModule's `imports` array
65
83
are unrelated and have completely different jobs.
@@ -70,44 +88,30 @@ You add `import` statements to almost every application file.
70
88
They have nothing to do with Angular and Angular knows nothing about them.
71
89
72
90
The _module's_`imports` array appears _exclusively_ in the `@NgModule` metadata object.
73
-
It tells Angular about specific _other_NgModules—all of them classes decorated
91
+
It tells Angular about specific _other_Angular Modules—all of them classes decorated
74
92
with `@NgModule`—that the application needs to function properly.
75
93
76
94
</div>
77
95
96
+
{@a providers}
78
97
98
+
### The _providers_ array
79
99
80
-
{@a declarations}
100
+
Angular apps rely on [_dependency injection (DI)_](guide/dependency-injection)
101
+
to deliver services to various parts of the application.
81
102
103
+
Before DI can inject a service, it must create that service with the help of a _provider_.
104
+
You can tell DI about a service's _provider_ in a number of ways.
105
+
Among the most popular ways is to register the service in the root `ngModule.providers` array, which will make that service available _everywhere_.
82
106
83
-
### The _declarations_ array
84
-
85
-
You tell Angular which components belong to the `AppModule` by listing it in the module's `declarations` array.
86
-
As you create more components, you'll add them to `declarations`.
87
-
88
-
You must declare _every_ component in an `NgModule` class.
89
-
If you use a component without declaring it, you'll see a clear error message in the browser console.
90
-
91
-
You'll learn to create two other kinds of classes —
92
-
[directives](guide/attribute-directives) and [pipes](guide/pipes)—
93
-
that you must also add to the `declarations` array.
94
-
95
-
96
-
<divclass="alert is-important">
97
-
98
-
99
-
100
-
**Only _declarables_**—_components_, _directives_ and _pipes_— belong in the `declarations` array.
101
-
Do not put any other kind of class in `declarations`; _not_`NgModule` classes, _not_ service classes, _not_ model classes.
102
-
103
-
104
-
</div>
105
-
107
+
For example, a data service provided in the `AppModule`s _providers_ can be injected into any
108
+
component anywhere in the application.
106
109
110
+
You don't have any services to provide yet.
111
+
But you will create some before long and you may chose to provide many of them here.
107
112
108
113
{@a bootstrap-array}
109
114
110
-
111
115
### The _bootstrap_ array
112
116
113
117
You launch the application by [_bootstrapping_](#main) the root `AppModule`.
@@ -124,58 +128,42 @@ You can call the one _root_ component anything you want but most developers call
124
128
125
129
Which brings us to the _bootstrapping_ process itself.
126
130
127
-
128
131
{@a main}
129
132
130
133
## Bootstrap in _main.ts_
131
134
132
-
There are many ways to bootstrap an application.
133
-
The variations depend upon how you want to compile the application and where you want to run it.
134
-
135
-
In the beginning, you will compile the application dynamically with the _Just-in-Time (JIT)_ compiler
136
-
and you'll run it in a browser. You can learn about other options later.
137
-
138
-
The recommended place to bootstrap a JIT-compiled browser application is in a separate file
0 commit comments