@@ -67,19 +67,27 @@ a#toc
67
67
This alternative version configures _SystemJS_ to load _UMD_ versions of Angular
68
68
(and other third-party packages) from the web.
69
69
70
- Pay special attention to the `paths` key:
70
+ Modify `systemjs.config.server.js` as necessary to stay in sync with changes
71
+ you make to `systemjs.config.js`.
72
+
73
+ Notice the `paths` key:
71
74
72
75
+ makeExample('systemjs.config.server.js' , 'paths' , '' )( format ="." )
73
76
74
77
:marked
75
- In your usual SystemJS config the `npm` path points at your local `node_modules/`,
76
- but on the server config it points at https://unpkg.com/ - a site that hosts NPM packages.
78
+ In the standard SystemJS config, the `npm` path points to the `node_modules/`.
79
+ In this server config, it points to
80
+ <a href="https://unpkg.com/" target="_blank" title="unpkg.com">https://unpkg.com</a>,
81
+ a site that hosts _npm packages_,
82
+ and loads them from the web directly.
83
+ There are other service providers that do the same thing.
77
84
78
- This way you can load your node modules from the internet directly.
79
- You can use any other provider you which, as long as it serves the needed files.
85
+ If you are unwilling or unable to load packages from the open web,
86
+ the inventory in `systemjs.config.server.js` identifies the files and folders that
87
+ you would copy to a library folder on the server.
88
+ Then change the config's `'npm'` path to point to that folder.
80
89
81
- Modify `systemjs.config.server.js` as necessary to stay in sync with changes
82
- you make to `systemjs.config.js`.
90
+ ### Practice with an example
83
91
84
92
The following trivial router sample app shows these changes.
85
93
@@ -102,26 +110,25 @@ a#toc
102
110
app/hero-list.component.ts
103
111
` )
104
112
105
- .l-sub-section
106
- :marked
107
- Practice with this sample before attempting these techniques on your application.
113
+ :marked
114
+ Practice with this sample before attempting these techniques on your application.
108
115
109
- 1. Follow the [setup instructions](../guide/setup.html "Angular QuickStart setup") for creating a new project
110
- named <ngio-ex path="simple-deployment"></ngio-ex>.
116
+ 1. Follow the [setup instructions](../guide/setup.html "Angular QuickStart setup") for creating a new project
117
+ named <ngio-ex path="simple-deployment"></ngio-ex>.
111
118
112
- 1. Add the "Simple deployment" sample files shown above.
119
+ 1. Add the "Simple deployment" sample files shown above.
113
120
114
- 1. Run it with `npm start` as you would any project.
121
+ 1. Run it with `npm start` as you would any project.
115
122
116
- 1. Inspect the network traffic in the browser developer tools.
117
- Notice that it loads all packages from the web.
118
- You could delete the `node_modules` folder and the app would still run
119
- (although you wouldn't be able to recompile or launch `lite-server`
120
- until you restored it).
123
+ 1. Inspect the network traffic in the browser developer tools.
124
+ Notice that it loads all packages from the web.
125
+ You could delete the `node_modules` folder and the app would still run
126
+ (although you wouldn't be able to recompile or launch `lite-server`
127
+ until you restored it).
121
128
122
- 1. Deploy the sample to your server (minus the `node_modules` folder!).
129
+ 1. Deploy the sample to your server (minus the `node_modules` folder!).
123
130
124
- When you have that working, try the same process on your application.
131
+ When you have that working, try the same process on your application.
125
132
126
133
a#optimize
127
134
.l-main-section
0 commit comments