fix(generate): use prefix when initializing app (#2046)

README.md

@@ -13,16 +13,16 @@ Prototype of a CLI for Angular 2 applications based on the [ember-cli](http://ww
 
 This project is very much still a work in progress.
 
-The CLI is now in beta. 
+The CLI is now in beta.
 If you wish to collaborate while the project is still young, check out [our issue list](https://github.com/angular/angular-cli/issues).
 
 ## Webpack update
 
-We changed the build system between beta.10 and beta.12, from SystemJS to Webpack. 
-And with it comes a lot of benefits. 
+We changed the build system between beta.10 and beta.14, from SystemJS to Webpack.
+And with it comes a lot of benefits.
 To take advantage of these, your app built with the old beta will need to migrate.
 
-You can update your `beta.10` projects to `beta.12` by following [these instructions](https://github.com/angular/angular-cli/wiki/Upgrading-from-Beta.10-to-Beta.14).
+You can update your `beta.10` projects to `beta.14` by following [these instructions](https://github.com/angular/angular-cli/wiki/Upgrading-from-Beta.10-to-Beta.14).
 
 ## Prerequisites
 
@@ -41,6 +41,7 @@ The generated project has dependencies that require **Node 4.x.x and NPM 3.x.x**
 * [Adding extra files to the build](#adding-extra-files-to-the-build)
 * [Running Unit Tests](#running-unit-tests)
 * [Running End-to-End Tests](#running-end-to-end-tests)
+* [Proxy To Backend](#proxy-to-backend)
 * [Deploying the App via GitHub Pages](#deploying-the-app-via-github-pages)
 * [Linting and formatting code](#linting-and-formatting-code)
 * [Support for offline applications](#support-for-offline-applications)
@@ -108,6 +109,7 @@ Service   | `ng g service my-new-service`
 Class     | `ng g class my-new-class`
 Interface | `ng g interface my-new-interface`
 Enum      | `ng g enum my-new-enum`
+Module    | `ng g module my-module`
 
 ### Generating a route
 
@@ -125,8 +127,8 @@ The build artifacts will be stored in the `dist/` directory.
 
 ### Build Targets and Environment Files
 
-`ng build` can specify both a build target (`--target=production` or `--target=development`) and an 
-environment file to be used with that build (`--environment=dev` or `--environment=prod`). 
+`ng build` can specify both a build target (`--target=production` or `--target=development`) and an
+environment file to be used with that build (`--environment=dev` or `--environment=prod`).
 By default, the development build target and environment are used.
 
 The mapping used to determine which environment file is used can be found in `angular-cli.json`:
@@ -156,7 +158,7 @@ ng build
 
 You can also add your own env files other than `dev` and `prod` by doing the following:
 - create a `src/environments/environment.NAME.ts`
-- add `{ "NAME": 'src/environments/environment.NAME.ts' }` to the the `apps[0].environments` object in `angular-cli.json` 
+- add `{ "NAME": 'src/environments/environment.NAME.ts' }` to the the `apps[0].environments` object in `angular-cli.json`
 - use them via the `--env=NAME` flag on the build/serve commands.
 
 ### Base tag handling in index.html
@@ -171,7 +173,7 @@ ng build --bh /myUrl/
 
 ### Bundling
 
-All builds make use of bundling, and using the `--prod` flag in  `ng build --prod` 
+All builds make use of bundling, and using the `--prod` flag in  `ng build --prod`
 or `ng serve --prod` will also make use of uglifying and tree-shaking functionality.
 
 ### Running unit tests
@@ -192,6 +194,33 @@ Before running the tests make sure you are serving the app via `ng serve`.
 
 End-to-end tests are run via [Protractor](https://angular.github.io/protractor/).
 
+### Proxy To Backend
+Using the proxying support in webpack's dev server we can highjack certain urls and send them to a backend server.
+We do this by passing a file to `--proxy-config`
+
+Say we have a server running on `http://localhost:3000/api` and we want all calls th `http://localhost:4200/api` to go to that server.
+
+We create a file next to projects `package.json` called `proxy.conf.json`
+with the content
+
+```
+{
+  "/api": {
+    "target": "http://localhost:3000",
+    "secure": false
+  }
+}
+```
+
+You can read more about what options are available here [webpack-dev-server proxy settings](https://webpack.github.io/docs/webpack-dev-server.html#proxy)
+
+and then we edit the `package.json` file's start script to be
+
+```
+"start": "ng serve --proxy-config proxy.conf.json",
+```
+
+now run it with `npm start`
 
 ### Deploying the app via GitHub Pages
 
@@ -262,11 +291,11 @@ source ~/.bash_profile
 
 ### Global styles
 
-The `styles.css` file allows users to add global styles and supports 
-[CSS imports](https://developer.mozilla.org/en/docs/Web/CSS/@import). 
+The `styles.css` file allows users to add global styles and supports
+[CSS imports](https://developer.mozilla.org/en/docs/Web/CSS/@import).
 
-If the project is created with the `--style=sass` option, this will be a `.sass` 
-file instead, and the same applies to `scss/less/styl`. 
+If the project is created with the `--style=sass` option, this will be a `.sass`
+file instead, and the same applies to `scss/less/styl`.
 
 You can add more global styles via the `apps[0].styles` property in `angular-cli.json`.
 
@@ -316,11 +345,11 @@ npm install @types/d3 --save-dev
 
 ### Global Library Installation
 
-Some javascript libraries need to be added to the global scope, and loaded as if 
-they were in a script tag. We can do this using the `apps[0].scripts` and 
+Some javascript libraries need to be added to the global scope, and loaded as if
+they were in a script tag. We can do this using the `apps[0].scripts` and
 `apps[0].styles` properties of `angular-cli.json`.
 
-As an example, to use [Boostrap 4](http://v4-alpha.getbootstrap.com/) this is 
+As an example, to use [Boostrap 4](http://v4-alpha.getbootstrap.com/) this is
 what you need to do:
 
 First install Bootstrap from `npm`:
@@ -329,7 +358,7 @@ First install Bootstrap from `npm`:
 npm install bootstrap@next
 ```
 
-Then add the needed script files to to `apps[0].scripts`.
+Then add the needed script files to `apps[0].scripts`:
 
 ```
 "scripts": [
@@ -342,12 +371,12 @@ Then add the needed script files to to `apps[0].scripts`.
 Finally add the Bootstrap CSS to the `apps[0].styles` array:
 ```
 "styles": [
-  "styles.css",
-  "../node_modules/bootstrap/dist/css/bootstrap.css"
+  "../node_modules/bootstrap/dist/css/bootstrap.css",
+  "styles.css"
 ],
 ```
 
-Restart `ng serve` if you're running it, and Bootstrap 4 should be working on 
+Restart `ng serve` if you're running it, and Bootstrap 4 should be working on
 your app.
 
 ### Updating angular-cli
@@ -372,7 +401,7 @@ Running `ng init` will check for changes in all the auto-generated files created
 
 Carefully read the diffs for each code file, and either accept the changes or incorporate them manually after `ng init` finishes.
 
-**The main cause of errors after an update is failing to incorporate these updates into your code**. 
+**The main cause of errors after an update is failing to incorporate these updates into your code**.
 
 You can find more details about changes between versions in [CHANGELOG.md](https://github.com/angular/angular-cli/blob/master/CHANGELOG.md).
 

packages/angular-cli/blueprints/directive/files/__path__/__name__.directive.ts

@@ -1,7 +1,7 @@
 import { Directive } from '@angular/core';
 
 @Directive({
-  selector: '[<%= rawEntityName %>]'
+  selector: '[<%= selector %>]'
 })
 export class <%= classifiedModuleName %>Directive {
 

packages/angular-cli/blueprints/directive/index.js

@@ -31,17 +31,17 @@ module.exports = {
         this.project.ngConfig.apps[0].prefix) {
       defaultPrefix = this.project.ngConfig.apps[0].prefix;
     }
-    var prefix = this.options.prefix ? defaultPrefix : '';
+    var prefix = this.options.prefix ? `${defaultPrefix}-` : '';
 
-    this.rawEntityName = prefix + parsedPath.name;
+    this.selector = stringUtils.camelize(prefix + parsedPath.name);
     return parsedPath.name;
   },
 
   locals: function (options) {
     return {
       dynamicPath: this.dynamicPath.dir,
       flat: options.flat,
-      rawEntityName: this.rawEntityName
+      selector: this.selector
     };
   },
 

packages/angular-cli/blueprints/module/files/__path__/__name__-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  providers: []
+})
+export class <%= classifiedModuleName %>RoutingModule { }

packages/angular-cli/blueprints/module/files/__path__/__name__.module.ts

@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';<% if (routing) { %>
-import { <%= camelizedModuleName %>Routing } from './<%= dasherizedModuleName %>.routing';<% } %>
+import { <%= classifiedModuleName %>RoutingModule } from './<%= dasherizedModuleName %>-routing.module';<% } %>
 
 @NgModule({
   imports: [
     CommonModule<% if (routing) { %>,
-    <%= camelizedModuleName %>Routing<% } %>
+    <%= classifiedModuleName %>RoutingModule<% } %>
   ],
   declarations: []
 })

packages/angular-cli/blueprints/module/index.js

@@ -34,7 +34,7 @@ module.exports = {
       fileList = fileList.filter(p => p.indexOf('__name__.module.spec.ts') < 0);
     }
     if (this.options && !this.options.routing) {
-      fileList = fileList.filter(p => p.indexOf('__name__.routing.ts') < 0);
+      fileList = fileList.filter(p => p.indexOf('__name__-routing.module.ts') < 0);
     }
 
     return fileList;

packages/angular-cli/blueprints/ng2/files/__path__/app/app-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+  providers: []
+})
+export class <%= classifiedModuleName %>RoutingModule { }

packages/angular-cli/blueprints/ng2/files/__path__/app/app.component.spec.ts

@@ -21,13 +21,13 @@ describe('App: <%= jsComponentName %>', () => {
   it(`should have as title 'app works!'`, async(() => {
     let fixture = TestBed.createComponent(AppComponent);
     let app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app works!');
+    expect(app.title).toEqual('<%= prefix %> works!');
   }));
 
   it('should render title in a h1 tag', async(() => {
     let fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     let compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+    expect(compiled.querySelector('h1').textContent).toContain('<%= prefix %> works!');
   }));
 });

packages/angular-cli/blueprints/ng2/files/__path__/app/app.component.ts

@@ -13,5 +13,5 @@ import { APP_SHELL_DIRECTIVES } from '@angular/app-shell';<% } %>
   styleUrls: ['./app.component.<%= styleExt %>']<% } %>
 })
 export class AppComponent {
-  title = 'app works!';
+  title = '<%= prefix %> works!';
 }

packages/angular-cli/blueprints/ng2/files/__path__/app/app.module.ts

@@ -1,7 +1,8 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { HttpModule } from '@angular/http';<% if (routing) { %>
+import { <%= classifiedModuleName %>RoutingModule } from './<%= dasherizedModuleName %>-routing.module';<% } %>
 
 import { AppComponent } from './app.component';
 
@@ -12,7 +13,8 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule<% if (routing) { %>,
+    <%= classifiedModuleName %>RoutingModule<% } %>
   ],
   providers: [],
   bootstrap: [AppComponent]

packages/angular-cli/blueprints/ng2/files/__path__/index.html

@@ -22,7 +22,6 @@
   <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180x180.png">
   <link rel="apple-touch-startup-image" href="/icons/apple-touch-icon-180x180.png">
   <% } %>
-
 </head>
 <body>
   <<%= prefix %>-root>Loading...</<%= prefix %>-root>

packages/angular-cli/blueprints/ng2/files/e2e/app.po.ts

@@ -1,4 +1,4 @@
-import { browser, element, by } from 'protractor/globals';
+import { browser, element, by } from 'protractor';
 
 export class <%= jsComponentName %>Page {
   navigateTo() {

packages/angular-cli/blueprints/ng2/files/package.json

@@ -43,7 +43,7 @@
     "karma-cli": "^1.0.1",
     "karma-jasmine": "^1.0.2",
     "karma-remap-istanbul": "^0.2.1",
-    "protractor": "4.0.5",
+    "protractor": "4.0.9",
     "ts-node": "1.2.1",
     "tslint": "3.13.0",
     "typescript": "2.0.2"

packages/angular-cli/blueprints/ng2/index.js

@@ -10,7 +10,8 @@ module.exports = {
     { name: 'source-dir', type: String, default: 'src', aliases: ['sd'] },
     { name: 'prefix', type: String, default: 'app', aliases: ['p'] },
     { name: 'style', type: String, default: 'css' },
-    { name: 'mobile', type: Boolean, default: false }
+    { name: 'mobile', type: Boolean, default: false },
+    { name: 'routing', type: Boolean, default: false }
   ],
 
   afterInstall: function (options) {
@@ -38,7 +39,8 @@ module.exports = {
       prefix: options.prefix,
       styleExt: this.styleExt,
       relativeRootPath: relativeRootPath,
-      isMobile: options.mobile
+      isMobile: options.mobile,
+      routing: options.routing
     };
   },
 
@@ -48,6 +50,9 @@ module.exports = {
       fileList = fileList.filter(p => p.indexOf('__name__.component.html') < 0);
       fileList = fileList.filter(p => p.indexOf('__name__.component.__styleext__') < 0);
     }
+    if (this.options && !this.options.routing) {
+      fileList = fileList.filter(p => p.indexOf('__name__-routing.module.ts') < 0);
+    }
 
     return fileList;
   },

packages/angular-cli/commands/init.ts

@@ -26,7 +26,8 @@ const InitCommand: any = Command.extend({
     { name: 'source-dir', type: String, default: 'src', aliases: ['sd'] },
     { name: 'style', type: String, default: 'css' },
     { name: 'prefix', type: String, default: 'app', aliases: ['p'] },
-    { name: 'mobile', type: Boolean, default: false }
+    { name: 'mobile', type: Boolean, default: false },
+    { name: 'routing', type: Boolean, default: false }
   ],
 
   anonymousOptions: ['<glob-pattern>'],
@@ -104,7 +105,8 @@ const InitCommand: any = Command.extend({
       sourceDir: commandOptions.sourceDir,
       style: commandOptions.style,
       prefix: commandOptions.prefix,
-      mobile: commandOptions.mobile
+      mobile: commandOptions.mobile,
+      routing: commandOptions.routing
     };
 
     if (!validProjectName(packageName)) {

packages/angular-cli/commands/new.ts

@@ -24,7 +24,8 @@ const NewCommand = Command.extend({
     { name: 'source-dir', type: String, default: 'src', aliases: ['sd'] },
     { name: 'style', type: String, default: 'css' },
     { name: 'prefix', type: String, default: 'app', aliases: ['p'] },
-    { name: 'mobile', type: Boolean, default: false }
+    { name: 'mobile', type: Boolean, default: false },
+    { name: 'routing', type: Boolean, default: false }
   ],
 
   run: function (commandOptions: any, rawArgs: string[]) {

packages/angular-cli/lib/config/schema.d.ts

@@ -59,5 +59,6 @@ export interface CliConfig {
     defaults?: {
         styleExt?: string;
         prefixInterfaces?: boolean;
+        poll?: number;
     };
 }

packages/angular-cli/lib/config/schema.json

@@ -135,10 +135,13 @@
         },
         "prefixInterfaces": {
           "type": "boolean"
+        },
+        "poll": {
+          "type": "number"
         }
       },
       "additionalProperties": false
     }
   },
   "additionalProperties": false
-}
+}