Skip to content

Commit 2db4568

Browse files
filipesilvafilipesilva
authored
Merge branch 'master' into webpack-update-instructions
2 parents 519d8e3 + d5e1c55 commit 2db4568

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+1464
-8077
lines changed

‎README.md

+58-23
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,7 @@ You can install and update your projects using [these instructions](https://gith
2424

2525
## Prerequisites
2626

27-
The generated project has dependencies that require
28-
* **Node 4 or greater**.
29-
* **Typings v1 or greater**.
27+
The generated project has dependencies that require **Node 4 or greater**.
3028

3129
## Table of Contents
3230

@@ -36,7 +34,7 @@ The generated project has dependencies that require
3634
* [Generating Components, Directives, Pipes and Services](#generating-components-directives-pipes-and-services)
3735
* [Generating a Route](#generating-a-route)
3836
* [Creating a Build](#creating-a-build)
39-
* [Environments](#environments)
37+
* [Build Targets and Environment Files](#build-targets-and-environment-files)
4038
* [Bundling](#bundling)
4139
* [Running Unit Tests](#running-unit-tests)
4240
* [Running End-to-End Tests](#running-end-to-end-tests)
@@ -120,17 +118,33 @@ ng build
120118

121119
The build artifacts will be stored in the `dist/` directory.
122120

123-
### Environments
121+
### Build Targets and Environment Files
124122

125-
At build time, the `src/app/environment.ts` will be replaced by either
126-
`config/environment.dev.ts` or `config/environment.prod.ts`, depending on the
127-
current cli environment. The resulting file will be `dist/app/environment.ts`.
123+
A build can specify both a build target (`development` or `production`) and an
124+
environment file to be used with that build. By default, the development build
125+
target is used.
128126

129-
Environment defaults to `dev`, but you can generate a production build via
130-
the `-prod` flag in either `ng build -prod` or `ng serve -prod`.
127+
At build time, `src/app/environments/environment.ts` will be replaced by
128+
`src/app/environments/environment.{NAME}.ts` where `NAME` is the argument
129+
provided to the `--environment` flag.
130+
131+
These options also apply to the serve command. If you do not pass a value for `environment`,
132+
it will default to `dev` for `development` and `prod` for `production`.
133+
134+
```bash
135+
# these are equivalent
136+
ng build --target=production --environment=prod
137+
ng build --prod --env=prod
138+
ng build --prod
139+
# and so are these
140+
ng build --target=development --environment=dev
141+
ng build --dev --e=dev
142+
ng build --dev
143+
ng build
144+
```
131145

132146
You can also add your own env files other than `dev` and `prod` by creating a
133-
`config/environment.{NAME}.ts` and use them by using the `--env=NAME`
147+
`src/app/environments/environment.{NAME}.ts` and use them by using the `--env=NAME`
134148
flag on the build/serve commands.
135149

136150
### Bundling
@@ -144,13 +158,7 @@ all dependencies into a single file, and make use of tree-shaking techniques.
144158
ng test
145159
```
146160

147-
Tests will execute after a build is executed via [Karma](http://karma-runner.github.io/0.13/index.html), and it will automatically watch your files for changes.
148-
149-
You can run tests a single time via `--watch=false`, and turn off building of the app via `--build=false` (useful for running it at the same time as `ng serve`).
150-
151-
**WARNING:** On Windows, `ng test` is hitting a file descriptor limit (see https://github.com/angular/angular-cli/issues/977).
152-
The solution for now is to instead run `ng serve` and `ng test --build=false` in separate console windows.
153-
161+
Tests will execute after a build is executed via [Karma](http://karma-runner.github.io/0.13/index.html), and it will automatically watch your files for changes. You can run tests a single time via `--watch=false`.
154162

155163
### Running end-to-end tests
156164

@@ -204,7 +212,7 @@ You can modify the these scripts in `package.json` to run whatever tool you pref
204212

205213
### Support for offline applications
206214

207-
The index.html file includes a commented-out code snippet for installing the angular2-service-worker. This support is experimental, please see the angular/mobile-toolkit project and https://mobile.angular.io/ for documentation on how to make use of this functionality.
215+
Angular-CLI includes support for offline applications via the `--mobile` flag on `ng new`. Support is experimental, please see the angular/mobile-toolkit project and https://mobile.angular.io/ for documentation on how to make use of this functionality.
208216

209217
### Commands autocompletion
210218

@@ -231,19 +239,44 @@ source ~/.bash_profile
231239

232240
### CSS Preprocessor integration
233241

234-
We support all major CSS preprocessors:
242+
Angular-CLI supports all major CSS preprocessors:
235243
- sass (node-sass)
236244
- less (less)
237245
- compass (compass-importer + node-sass)
238246
- stylus (stylus)
239247

240-
To use one just install for example `npm install node-sass` and rename `.css` files in your project to `.scss` or `.sass`. They will be compiled automatically.
248+
To use these prepocessors simply add the file to your component's `styreUrl`:
249+
250+
```
251+
@Component({
252+
moduleId: module.id,
253+
selector: 'app-root',
254+
templateUrl: 'app.component.html',
255+
styleUrls: ['app.component.scss']
256+
})
257+
export class AppComponent {
258+
title = 'app works!';
259+
}
260+
```
261+
262+
When generating a new project you can also define which extention you want for
263+
style files:
241264

242-
The `Angular2App`'s options argument has `sassCompiler`, `lessCompiler`, `stylusCompiler` and `compassCompiler` options that are passed directly to their respective CSS preprocessors.
265+
```bash
266+
ng new sassy-project --style=sass
267+
268+
```
243269

244270
### 3rd Party Library Installation
245271

246-
The installation of 3rd party libraries are well described at our [Wiki Page](https://github.com/angular/angular-cli/wiki/3rd-party-libs)
272+
Simply install your library via `npm install lib-name` and import it in your code.
273+
274+
If the library does not include typings, you can install them using npm:
275+
276+
```bash
277+
npm install moment
278+
npm install @types/moment
279+
```
247280

248281
### Updating angular-cli
249282

@@ -313,6 +346,8 @@ the local `angular-cli` from the project which was fetched remotely from npm.
313346
Now the `angular-cli` you cloned before is in three places:
314347
The folder you cloned it into, npm's folder where it stores global packages and the `angular-cli` project you just created.
315348

349+
You can also use `ng new foo --link-cli` to automatically link the `angular-cli` package.
350+
316351
Please read the official [npm-link documentation](https://www.npmjs.org/doc/cli/npm-link.html)
317352
and the [npm-link cheatsheet](http://browsenpm.org/help#linkinganynpmpackagelocally) for more information.
318353

‎addon/ng2/blueprints/component/files/__path__/__name__.component.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Component, OnInit } from '@angular/core';
22

33
@Component({
4-
moduleId: module.id,
54
selector: '<%= selector %>',<% if(inlineTemplate) { %>
65
template: `
76
<p>
@@ -10,7 +9,7 @@ import { Component, OnInit } from '@angular/core';
109
`,<% } else { %>
1110
templateUrl: '<%= dasherizedModuleName %>.component.html',<% } if(inlineStyle) { %>
1211
styles: []<% } else { %>
13-
styleUrls: ['<%= dasherizedModuleName %>.component.css']<% } %>
12+
styleUrls: ['<%= dasherizedModuleName %>.component.<%= styleExt %>']<% } %>
1413
})
1514
export class <%= classifiedModuleName %>Component implements OnInit {
1615

‎addon/ng2/blueprints/component/index.js

+3-15
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ module.exports = {
5454
route: options.route,
5555
isLazyRoute: !!options.isLazyRoute,
5656
isAppComponent: !!options.isAppComponent,
57-
selector: this.selector
57+
selector: this.selector,
58+
styleExt: this.styleExt
5859
};
5960
},
6061

@@ -114,20 +115,7 @@ module.exports = {
114115
}
115116

116117
if (!options.flat) {
117-
var filePath = path.join(this.project.ngConfig.defaults.sourceDir, 'system-config.ts');
118-
var barrelUrl = this.appDir.replace(/\\/g, '/');
119-
if (barrelUrl[0] === '/') {
120-
barrelUrl = barrelUrl.substr(1);
121-
}
122-
123-
return addBarrelRegistration(this, this.generatePath)
124-
.then(() => {
125-
return this.insertIntoFile(
126-
filePath,
127-
` '${barrelUrl}',`,
128-
{ before: ' /** @cli-barrel */' }
129-
);
130-
});
118+
return addBarrelRegistration(this, this.generatePath);
131119
} else {
132120
return addBarrelRegistration(
133121
this,

‎addon/ng2/blueprints/mobile/files/__path__/main-app-shell.ts

+32-17
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,44 @@
1+
import 'angular2-universal-polyfills';
12
import { provide } from '@angular/core';
23
import { APP_BASE_HREF } from '@angular/common';
34
import { APP_SHELL_BUILD_PROVIDERS } from '@angular/app-shell';
4-
import { AppComponent } from './app/';
5-
import {
6-
REQUEST_URL,
7-
ORIGIN_URL
5+
import {
6+
REQUEST_URL,
7+
ORIGIN_URL,
8+
Bootloader,
9+
BootloaderConfig,
10+
AppConfig
811
} from 'angular2-universal';
12+
import { AppComponent } from './app/';
913

10-
export const options = {
11-
directives: [
12-
// The component that will become the main App Shell
13-
AppComponent
14-
],
14+
const bootloaderConfig: BootloaderConfig = {
1515
platformProviders: [
1616
APP_SHELL_BUILD_PROVIDERS,
1717
provide(ORIGIN_URL, {
18-
useValue: ''
19-
})
18+
useValue: 'http://localhost:4200' // full urls are needed for node xhr
19+
}),
20+
provide(APP_BASE_HREF, { useValue: '/' }),
21+
],
22+
async: true,
23+
preboot: false
24+
}
25+
26+
const appConfig: AppConfig = {
27+
directives: [
28+
// The component that will become the main App Shell
29+
AppComponent
2030
],
2131
providers: [
2232
// What URL should Angular be treating the app as if navigating
23-
provide(APP_BASE_HREF, {useValue: '/'}),
24-
provide(REQUEST_URL, {useValue: '/'})
25-
],
26-
async: false,
27-
preboot: false
28-
};
33+
provide(REQUEST_URL, { useValue: '/' })
34+
]
35+
}
36+
37+
export function getBootloader() : Bootloader {
38+
return new Bootloader(bootloaderConfig);
39+
}
2940

41+
export function serialize(bootloader: Bootloader, template: string) : string {
42+
appConfig.template = template;
43+
return bootloader.serializeApplication(appConfig);
44+
}

‎addon/ng2/blueprints/mobile/files/__path__/system-import.js

-2
This file was deleted.

‎addon/ng2/blueprints/ng2/files/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app w
77

88
## Code scaffolding
99

10-
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/route/class`.
10+
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.
1111

1212
## Build
1313

‎addon/ng2/blueprints/ng2/files/__path__/app/app.component.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Component } from '@angular/core';<% if (isMobile) { %>
22
import { APP_SHELL_DIRECTIVES } from '@angular/app-shell';<% } %>
33

44
@Component({
5-
moduleId: module.id,
65
selector: '<%= prefix %>-root',
76
<% if (isMobile) { %>template: `
87
<h1>
@@ -11,7 +10,7 @@ import { APP_SHELL_DIRECTIVES } from '@angular/app-shell';<% } %>
1110
`,
1211
styles: [],
1312
directives: [APP_SHELL_DIRECTIVES]<% } else { %>templateUrl: 'app.component.html',
14-
styleUrls: ['app.component.css']<% } %>
13+
styleUrls: ['app.component.<%= styleExt %>']<% } %>
1514
})
1615
export class AppComponent {
1716
title = 'app works!';

‎addon/ng2/blueprints/ng2/files/__path__/app/environment.ts

-7
This file was deleted.

‎addon/ng2/blueprints/ng2/files/config/environment.dev.ts renamed to ‎addon/ng2/blueprints/ng2/files/__path__/app/environments/environment.dev.ts

File renamed without changes.

‎addon/ng2/blueprints/ng2/files/config/environment.prod.ts renamed to ‎addon/ng2/blueprints/ng2/files/__path__/app/environments/environment.prod.ts

File renamed without changes.

‎addon/ng2/blueprints/ng2/files/__path__/app/environments/environment.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// The file for the current environment will overwrite this one during build.
2+
// Different environments can be found in ./environment.{dev|prod}.ts, and
3+
// you can create your own and use it with the --env flag.
4+
// The build system defaults to the dev environment.
5+
6+
export const environment = {
7+
production: false
8+
};

‎addon/ng2/blueprints/ng2/files/__path__/app/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
export * from './environment';
1+
export * from './environments/environment';
22
export * from './app.component';

‎addon/ng2/blueprints/ng2/files/__path__/index.html

+12-39
Original file line numberDiff line numberDiff line change
@@ -5,53 +5,26 @@
55
<title><%= jsComponentName %></title>
66
<base href="/">
77

8-
{{#unless environment.production}}
9-
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>
10-
{{/unless}}
118
<meta name="viewport" content="width=device-width, initial-scale=1">
129
<link rel="icon" type="image/x-icon" href="favicon.ico"><% if (isMobile) { %>
1310
<meta name="apple-mobile-web-app-capable" content="yes">
1411
<meta name="theme-color" content="#000000">
1512
<link rel="manifest" href="/manifest.webapp">
16-
{{#each mobile.icons}}
17-
<link rel="{{rel}}" {{#if sizes}}sizes="{{sizes}}" {{/if}}href="{{href}}">
18-
{{/each}}
19-
20-
{{#if environment.production}}
21-
<script type="text/javascript">
22-
if ('serviceWorker' in navigator) {
23-
navigator.serviceWorker.register('/worker.js').catch(function(err) {
24-
console.log('Error installing service worker: ', err);
25-
});
26-
}
27-
</script>
28-
{{/if}}
13+
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
14+
<link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-touch-icon-57x57.png">
15+
<link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-touch-icon-60x60.png">
16+
<link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-touch-icon-72x72.png">
17+
<link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-touch-icon-76x76.png">
18+
<link rel="apple-touch-icon" sizes="114x114" href="/icons/apple-touch-icon-114x114.png">
19+
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-touch-icon-120x120.png">
20+
<link rel="apple-touch-icon" sizes="144x144" href="/icons/apple-touch-icon-144x144.png">
21+
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-touch-icon-152x152.png">
22+
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180x180.png">
23+
<link rel="apple-touch-startup-image" href="/icons/apple-touch-icon-180x180.png">
2924
<% } %>
25+
3026
</head>
3127
<body>
3228
<<%= prefix %>-root>Loading...</<%= prefix %>-root>
33-
<% if (isMobile) { %>
34-
{{#if environment.production}}
35-
<script src="/app-concat.js" async></script>
36-
{{else}}
37-
{{#each scripts.polyfills}}
38-
<script src="{{.}}"></script>
39-
{{/each}}
40-
<script>
41-
System.import('system-config.js').then(function () {
42-
System.import('main');
43-
}).catch(console.error.bind(console));
44-
</script>
45-
{{/if}}
46-
<% } else { %>
47-
{{#each scripts.polyfills}}
48-
<script src="{{.}}"></script>
49-
{{/each}}
50-
<script>
51-
System.import('system-config.js').then(function () {
52-
System.import('main');
53-
}).catch(console.error.bind(console));
54-
</script>
55-
<% } %>
5629
</body>
5730
</html>

‎addon/ng2/blueprints/ng2/files/__path__/polyfills.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// Prefer CoreJS over the polyfills above
2+
import 'core-js/es6/symbol';
3+
import 'core-js/es6/object';
4+
import 'core-js/es6/function';
5+
import 'core-js/es6/parse-int';
6+
import 'core-js/es6/parse-float';
7+
import 'core-js/es6/number';
8+
import 'core-js/es6/math';
9+
import 'core-js/es6/string';
10+
import 'core-js/es6/date';
11+
import 'core-js/es6/array';
12+
import 'core-js/es6/regexp';
13+
import 'core-js/es6/map';
14+
import 'core-js/es6/set';
15+
import 'core-js/es6/reflect';
16+
17+
import 'core-js/es7/reflect';
18+
import 'zone.js/dist/zone';

0 commit comments

Comments
 (0)