diff --git a/README.md b/README.md index a91d41328aec..968a5bb591c7 100644 --- a/README.md +++ b/README.md @@ -18,9 +18,7 @@ If you wish to collaborate while the project is still young, check out [our issu ## Prerequisites -The generated project has dependencies that require -* **Node 4 or greater**. -* **Typings v1 or greater**. +The generated project has dependencies that require **Node 4 or greater**. ## Table of Contents @@ -30,7 +28,7 @@ The generated project has dependencies that require * [Generating Components, Directives, Pipes and Services](#generating-components-directives-pipes-and-services) * [Generating a Route](#generating-a-route) * [Creating a Build](#creating-a-build) -* [Environments](#environments) +* [Build Targets and Environment Files](#build-targets-and-environment-files) * [Bundling](#bundling) * [Running Unit Tests](#running-unit-tests) * [Running End-to-End Tests](#running-end-to-end-tests) @@ -114,17 +112,33 @@ ng build The build artifacts will be stored in the `dist/` directory. -### Environments +### Build Targets and Environment Files -At build time, the `src/app/environment.ts` will be replaced by either -`config/environment.dev.ts` or `config/environment.prod.ts`, depending on the -current cli environment. The resulting file will be `dist/app/environment.ts`. +A build can specify both a build target (`development` or `production`) and an +environment file to be used with that build. By default, the development build +target is used. -Environment defaults to `dev`, but you can generate a production build via -the `-prod` flag in either `ng build -prod` or `ng serve -prod`. +At build time, `src/app/environments/environment.ts` will be replaced by +`src/app/environments/environment.{NAME}.ts` where `NAME` is the argument +provided to the `--environment` flag. + +These options also apply to the serve command. If you do not pass a value for `environment`, +it will default to `dev` for `development` and `prod` for `production`. + +```bash +# these are equivalent +ng build --target=production --environment=prod +ng build --prod --env=prod +ng build --prod +# and so are these +ng build --target=development --environment=dev +ng build --dev --e=dev +ng build --dev +ng build +``` You can also add your own env files other than `dev` and `prod` by creating a -`config/environment.{NAME}.ts` and use them by using the `--env=NAME` +`src/app/environments/environment.{NAME}.ts` and use them by using the `--env=NAME` flag on the build/serve commands. ### Bundling @@ -138,13 +152,7 @@ all dependencies into a single file, and make use of tree-shaking techniques. ng test ``` -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`, and turn off building of the app via `--build=false` (useful for running it at the same time as `ng serve`). - -**WARNING:** On Windows, `ng test` is hitting a file descriptor limit (see https://github.com/angular/angular-cli/issues/977). -The solution for now is to instead run `ng serve` and `ng test --build=false` in separate console windows. - +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`. ### Running end-to-end tests @@ -198,7 +206,7 @@ You can modify the these scripts in `package.json` to run whatever tool you pref ### Support for offline applications -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. +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. ### Commands autocompletion @@ -225,19 +233,44 @@ source ~/.bash_profile ### CSS Preprocessor integration -We support all major CSS preprocessors: +Angular-CLI supports all major CSS preprocessors: - sass (node-sass) - less (less) - compass (compass-importer + node-sass) - stylus (stylus) -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. +To use these prepocessors simply add the file to your component's `styreUrl`: + +``` +@Component({ + moduleId: module.id, + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'] +}) +export class AppComponent { + title = 'app works!'; +} +``` + +When generating a new project you can also define which extention you want for +style files: -The `Angular2App`'s options argument has `sassCompiler`, `lessCompiler`, `stylusCompiler` and `compassCompiler` options that are passed directly to their respective CSS preprocessors. +```bash +ng new sassy-project --style=sass + +``` ### 3rd Party Library Installation -The installation of 3rd party libraries are well described at our [Wiki Page](https://github.com/angular/angular-cli/wiki/3rd-party-libs) +Simply install your library via `npm install lib-name` and import it in your code. + +If the library does not include typings, you can install them using npm: + +```bash +npm install moment +npm install @types/moment +``` ### Updating angular-cli @@ -307,6 +340,8 @@ the local `angular-cli` from the project which was fetched remotely from npm. Now the `angular-cli` you cloned before is in three places: The folder you cloned it into, npm's folder where it stores global packages and the `angular-cli` project you just created. +You can also use `ng new foo --link-cli` to automatically link the `angular-cli` package. + Please read the official [npm-link documentation](https://www.npmjs.org/doc/cli/npm-link.html) and the [npm-link cheatsheet](http://browsenpm.org/help#linkinganynpmpackagelocally) for more information. diff --git a/addon/ng2/blueprints/component/files/__path__/__name__.component.ts b/addon/ng2/blueprints/component/files/__path__/__name__.component.ts index cc31f7820898..afe021f7b9bb 100644 --- a/addon/ng2/blueprints/component/files/__path__/__name__.component.ts +++ b/addon/ng2/blueprints/component/files/__path__/__name__.component.ts @@ -1,7 +1,6 @@ import { Component, OnInit } from '@angular/core'; @Component({ - moduleId: module.id, selector: '<%= selector %>',<% if(inlineTemplate) { %> template: `
@@ -10,7 +9,7 @@ import { Component, OnInit } from '@angular/core'; `,<% } else { %> templateUrl: '<%= dasherizedModuleName %>.component.html',<% } if(inlineStyle) { %> styles: []<% } else { %> - styleUrls: ['<%= dasherizedModuleName %>.component.css']<% } %> + styleUrls: ['<%= dasherizedModuleName %>.component.<%= styleExt %>']<% } %> }) export class <%= classifiedModuleName %>Component implements OnInit { diff --git a/addon/ng2/blueprints/component/index.js b/addon/ng2/blueprints/component/index.js index 750b8beb25eb..7f8758026328 100644 --- a/addon/ng2/blueprints/component/index.js +++ b/addon/ng2/blueprints/component/index.js @@ -54,7 +54,8 @@ module.exports = { route: options.route, isLazyRoute: !!options.isLazyRoute, isAppComponent: !!options.isAppComponent, - selector: this.selector + selector: this.selector, + styleExt: this.styleExt }; }, @@ -114,20 +115,7 @@ module.exports = { } if (!options.flat) { - var filePath = path.join(this.project.ngConfig.defaults.sourceDir, 'system-config.ts'); - var barrelUrl = this.appDir.replace(/\\/g, '/'); - if (barrelUrl[0] === '/') { - barrelUrl = barrelUrl.substr(1); - } - - return addBarrelRegistration(this, this.generatePath) - .then(() => { - return this.insertIntoFile( - filePath, - ` '${barrelUrl}',`, - { before: ' /** @cli-barrel */' } - ); - }); + return addBarrelRegistration(this, this.generatePath); } else { return addBarrelRegistration( this, diff --git a/addon/ng2/blueprints/mobile/files/__path__/main-app-shell.ts b/addon/ng2/blueprints/mobile/files/__path__/main-app-shell.ts index 999059f8aa07..7d266b8426a4 100644 --- a/addon/ng2/blueprints/mobile/files/__path__/main-app-shell.ts +++ b/addon/ng2/blueprints/mobile/files/__path__/main-app-shell.ts @@ -1,29 +1,44 @@ +import 'angular2-universal-polyfills'; import { provide } from '@angular/core'; import { APP_BASE_HREF } from '@angular/common'; import { APP_SHELL_BUILD_PROVIDERS } from '@angular/app-shell'; -import { AppComponent } from './app/'; -import { - REQUEST_URL, - ORIGIN_URL +import { + REQUEST_URL, + ORIGIN_URL, + Bootloader, + BootloaderConfig, + AppConfig } from 'angular2-universal'; +import { AppComponent } from './app/'; -export const options = { - directives: [ - // The component that will become the main App Shell - AppComponent - ], +const bootloaderConfig: BootloaderConfig = { platformProviders: [ APP_SHELL_BUILD_PROVIDERS, provide(ORIGIN_URL, { - useValue: '' - }) + useValue: 'http://localhost:4200' // full urls are needed for node xhr + }), + provide(APP_BASE_HREF, { useValue: '/' }), + ], + async: true, + preboot: false +} + +const appConfig: AppConfig = { + directives: [ + // The component that will become the main App Shell + AppComponent ], providers: [ // What URL should Angular be treating the app as if navigating - provide(APP_BASE_HREF, {useValue: '/'}), - provide(REQUEST_URL, {useValue: '/'}) - ], - async: false, - preboot: false -}; + provide(REQUEST_URL, { useValue: '/' }) + ] +} + +export function getBootloader() : Bootloader { + return new Bootloader(bootloaderConfig); +} +export function serialize(bootloader: Bootloader, template: string) : string { + appConfig.template = template; + return bootloader.serializeApplication(appConfig); +} \ No newline at end of file diff --git a/addon/ng2/blueprints/mobile/files/__path__/system-import.js b/addon/ng2/blueprints/mobile/files/__path__/system-import.js deleted file mode 100644 index 40fb651c0954..000000000000 --- a/addon/ng2/blueprints/mobile/files/__path__/system-import.js +++ /dev/null @@ -1,2 +0,0 @@ -System.import('main') - .catch(console.error.bind(console)); diff --git a/addon/ng2/blueprints/ng2/files/README.md b/addon/ng2/blueprints/ng2/files/README.md index 33838bbe3127..79c75dd19e76 100755 --- a/addon/ng2/blueprints/ng2/files/README.md +++ b/addon/ng2/blueprints/ng2/files/README.md @@ -7,7 +7,7 @@ Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app w ## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/route/class`. +Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`. ## Build diff --git a/addon/ng2/blueprints/ng2/files/__path__/app/app.component.ts b/addon/ng2/blueprints/ng2/files/__path__/app/app.component.ts index 7fd0dc4b197d..e29b19409839 100644 --- a/addon/ng2/blueprints/ng2/files/__path__/app/app.component.ts +++ b/addon/ng2/blueprints/ng2/files/__path__/app/app.component.ts @@ -2,7 +2,6 @@ import { Component } from '@angular/core';<% if (isMobile) { %> import { APP_SHELL_DIRECTIVES } from '@angular/app-shell';<% } %> @Component({ - moduleId: module.id, selector: '<%= prefix %>-root', <% if (isMobile) { %>template: `