@@ -8,7 +8,7 @@ include ../_util-fns
8
8
:marked
9
9
Read more in the ["RC5 and NgModules" announcement](https://angularjs.blogspot.com).
10
10
11
- Learn the details of NgModule in the [Angular Module](../guide/ngmodule) chapter.
11
+ Learn the details of NgModule in the [Angular Module](../guide/ngmodule.html ) chapter.
12
12
:marked
13
13
The new `@NgModule` decorator gives you module-level components, directives, and pipes without
14
14
the need to specify them repeatedly in every component of your application.
@@ -44,25 +44,31 @@ include ../_util-fns
44
44
Check out the upgrade in [one commit](https://github.com/StephenFluin/ngmodule-migration/commit/9f9c6ae099346e491fc31d77bf65ed440e1f164c).
45
45
46
46
## 1. Update to RC5
47
- If you use npm, you should be able to either update your package.json file and run npm install.
47
+ If you use npm, you should be able to either update your ` package.json` file and run ` npm install` .
48
48
Or alternatively you can run the following command:
49
49
50
- ```bash
51
- npm install @angular/{core,common,compiler,angular-cli,platform-browser,platform-browser-dynamic}@2.0.0-rc.5 --save
52
- ```
50
+ code-example( format ='.' language ='bash' ) .
51
+ npm install @angular/{core, common, compiler, platform-browser, platform-browser-dynamic} --save
53
52
54
- You should also update any libraries you are using
53
+ :marked
54
+ Update your optional libraries
55
55
56
- ``` bash
57
- npm install @angular/router@3.0.0-rc.1
58
- npm install @angular/forms@1.0.0-rc.1
56
+ code-example ( format = '.' language = ' bash' ) .
57
+ npm install @angular/router
58
+ npm install @angular/forms
59
59
npm install @angular2-material/{button,card,toolbar,etc}@experimental
60
- ```
61
60
62
- ## 2. Create an NgModule
61
+ :marked
62
+ Update the Angular CLI if you're using that tool
63
+
64
+ code-example( format ='.' language ='bash' ) .
65
+ npm install @angular/angular-cli @angular/tsc-wrapped --save-dev
66
+
67
+ :marked
68
+ ## 2. Create an _NgModule_
63
69
Create a new file called app.module.ts. Populate it with your root component as follows:
64
70
65
- ``` javascript
71
+ code-example ( format = '.' language = ' javascript' ) .
66
72
import { NgModule } from '@angular/core';
67
73
import { BrowserModule } from '@angular/platform-browser';
68
74
import { AppComponent } from './app.component';
@@ -73,24 +79,23 @@ include ../_util-fns
73
79
bootstrap: [AppComponent],
74
80
})
75
81
export class AppModule {}
76
- ```
77
-
78
82
83
+ :marked
79
84
## 3. Update your bootstrap
80
- Update your `main.ts` file to bootstrap using the Just in Time compiler.
85
+ Update your `main.ts` file to bootstrap using the " Just in Time" (JIT) compiler.
81
86
82
- ``` javascript
87
+ code-example ( format = '.' language = ' javascript' ) .
83
88
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
84
89
import { AppModule } from './app/app.module';
85
90
86
91
platformBrowserDynamic().bootstrapModule(AppModule);
87
- ```
88
92
89
- ## 4. Update your 3rd party libraries
90
- Remove any 3rd party libraries from you AppComponent’s providers.
91
- You’ll want to move these to your NgModule’s imports, while updating to use each library’s provided Module(s).
93
+ :marked
94
+ ## 4. Import library modules in your _NgModule_
95
+ Remove the Angular and 3rd party library providers from your `AppComponent` providers
96
+ and switch to `NgModule` imports as seen in this example.
92
97
93
- ``` javascript
98
+ code-example ( format = '.' language = ' javascript' ) .
94
99
imports: [
95
100
BrowserModule,
96
101
// Router
@@ -104,16 +109,18 @@ include ../_util-fns
104
109
MdCardModule,
105
110
MdInputModule,
106
111
],
107
- ```
108
112
113
+ :marked
109
114
## 5. Cleanup
110
- As of RC5, we allow you to leave `directives` and `pipes` in your `@Component` decorators.
111
- In fact, we automatically hoist (add) them to the NgModule that they belong to.
115
+ For RC5, you can leave your components, directives and pipes
116
+ in the `directives` and `pipes` properties of your `@Component` metadata.
117
+ In fact, we automatically hoist (add) them to the NgModule to which they belong.
112
118
113
119
.alert.is-important
114
120
:marked
115
- This behavior is provided temporarily for backward compatibility. It will soon be removed.
121
+ This option is temporary for backward compatibility.
122
+ It will be removed in the final release of Angular 2.0.
116
123
117
- Stay ahead of this deprecation by removing them from your components and placing them into your `NgModule` declarations
118
- as soon as possible.
119
- : marked
124
+ Get ahead of the game and start moving your component `directives` and `pipes`
125
+ into module `declarations` as soon as possible.
126
+ We intend to delete _all_ deprecated class, methods, and properties in the next RC.
0 commit comments