feat(@angular/cli): new project landing page (#6144)

Fix #5928
Fix #6125

Author: sumitarora

packages/@angular/cli/blueprints/ng/files/__path__/app/app.component.html

@@ -1,4 +1,21 @@
-<h1>
-  {{title}}
-</h1><% if (routing) { %>
+<!--The whole content below can be removed with the new code.-->
+<div style="text-align:center">
+  <h1>
+    Welcome to {{title}}!!
+  </h1>
+  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=" />
+</div>
+<h2>Here are some links to help you start: </h2>
+<ul>
+  <li>
+    <h2><a target="_blank" href="https://angular.io/docs/ts/latest/tutorial/">Tour of Heros</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2>
+  </li>
+</ul>
+<% if (routing) { %>
 <router-outlet></router-outlet><% } %>

packages/@angular/cli/blueprints/ng/files/__path__/app/app.component.spec.ts

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

packages/@angular/cli/blueprints/ng/files/__path__/app/app.component.ts

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

packages/@angular/cli/blueprints/ng/files/__path__/app/app.module.ts

@@ -1,7 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
 <% if (routing) { %>
 import { AppRoutingModule } from './app-routing.module';<% } %>
 import { AppComponent } from './app.component';
@@ -11,9 +9,7 @@ import { AppComponent } from './app.component';
     AppComponent
   ],
   imports: [
-    BrowserModule,
-    FormsModule,
-    HttpModule<% if (routing) { %>,
+    BrowserModule<% if (routing) { %>,
     AppRoutingModule<% } %>
   ],
   providers: [],

packages/@angular/cli/blueprints/ng/files/__path__/index.html

@@ -9,6 +9,6 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-  <<%= prefix %>-root>Loading...</<%= prefix %>-root>
+  <<%= prefix %>-root></<%= prefix %>-root>
 </body>
 </html>

packages/@angular/cli/blueprints/ng/files/e2e/app.e2e-spec.ts

@@ -7,8 +7,8 @@ describe('<%= htmlComponentName %> App', () => {
     page = new <%= jsComponentName %>Page();
   });
 
-  it('should display message saying app works', () => {
+  it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getParagraphText()).toEqual('<%= prefix %> works!');
+    expect(page.getParagraphText()).toEqual('Welcome to <%= prefix %>!!');
   });
 });

packages/@angular/cli/blueprints/ng/files/package.json

@@ -12,11 +12,13 @@
   },
   "private": true,
   "dependencies": {
+    "@angular/animations": "^4.0.0",
     "@angular/common": "^4.0.0",
     "@angular/compiler": "^4.0.0",
     "@angular/core": "^4.0.0",
     "@angular/forms": "^4.0.0",
     "@angular/http": "^4.0.0",
+    "@angular/language-service": "^4.0.0",
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",

tests/e2e/tests/build/assets.ts

@@ -49,6 +49,27 @@ export default function () {
     .then(() => expectToFail(() => expectFileToExist('dist/assets/.gitkeep')))
     // Update app to test assets are present.
     .then(_ => !ejected && writeMultipleFiles({
+      'src/app/app.module.ts': `
+        import { BrowserModule } from '@angular/platform-browser';
+        import { NgModule } from '@angular/core';
+        import { FormsModule } from '@angular/forms';
+        import { HttpModule } from '@angular/http';
+        import { AppComponent } from './app.component';
+
+        @NgModule({
+          declarations: [
+            AppComponent
+          ],
+          imports: [
+            BrowserModule,
+            FormsModule,
+            HttpModule
+          ],
+          providers: [],
+          bootstrap: [AppComponent]
+        })
+        export class AppModule { }
+      `,
       'src/app/app.component.ts': `
         import { Component } from '@angular/core';
         import { Http, Response } from '@angular/http';
@@ -112,5 +133,5 @@ export default function () {
         });`,
     }))
     .then(() => !ejected && ng('test', '--single-run'))
-    .then(() => !ejected && ng('e2e', '--no-progress'));
+    .then(() => !ejected && ng('e2e'));
 }

tests/e2e/tests/misc/default-port.ts

@@ -12,7 +12,7 @@ export default function() {
     .then(() => ngServe())
     .then(() => request('http://localhost:4201/'))
     .then(body => {
-      if (!body.match(/<app-root>Loading...<\/app-root>/)) {
+      if (!body.match(/<app-root><\/app-root>/)) {
         throw new Error('Response does not match expected value.');
       }
     })

tests/e2e/tests/misc/deploy-url.ts

@@ -10,7 +10,7 @@ export default function () {
     .then(() => expectToFail(() => request('http://localhost:4200')))
     .then(() => request('http://localhost:4200/deployurl'))
     .then(body => {
-      if (!body.match(/<app-root>Loading...<\/app-root>/)) {
+      if (!body.match(/<app-root><\/app-root>/)) {
         throw new Error('Response does not match expected value.');
       }
     })

tests/e2e/tests/misc/fallback.ts

@@ -11,7 +11,7 @@ export default function () {
     .then(() => ngServe())
     .then(() => request('http://localhost:4200/'))
     .then(body => {
-      if (!body.match(/<app-root>Loading...<\/app-root>/)) {
+      if (!body.match(/<app-root><\/app-root>/)) {
         throw new Error('Response does not match expected value.');
       }
     })
@@ -25,7 +25,7 @@ export default function () {
     .then(() => ngServe())
     .then(() => request('http://localhost:4200/'))
     .then(body => {
-      if (!body.match(/<app-root>Loading...<\/app-root>/)) {
+      if (!body.match(/<app-root><\/app-root>/)) {
         throw new Error('Response does not match expected value.');
       }
     })

tests/e2e/tests/misc/live-reload.ts

@@ -36,6 +36,26 @@ export default function () {
 
   return Promise.resolve()
     .then(_ => writeMultipleFiles({
+      'src/app/app.module.ts': `
+        import { BrowserModule } from '@angular/platform-browser';
+        import { NgModule } from '@angular/core';
+        import { FormsModule } from '@angular/forms';
+        import { HttpModule } from '@angular/http';
+        import { AppComponent } from './app.component';
+        @NgModule({
+          declarations: [
+            AppComponent
+          ],
+          imports: [
+            BrowserModule,
+            FormsModule,
+            HttpModule
+          ],
+          providers: [],
+          bootstrap: [AppComponent]
+        })
+        export class AppModule { }
+      `,
       // e2e test that just opens the page and waits, so that the app runs.
       './e2e/app.e2e-spec.ts': `
         import { browser } from 'protractor';

tests/e2e/tests/misc/ssl-default-config.ts

@@ -12,7 +12,7 @@ export default function() {
     .then(() => ngServe())
     .then(() => request('https://localhost:4200/'))
     .then(body => {
-      if (!body.match(/<app-root>Loading...<\/app-root>/)) {
+      if (!body.match(/<app-root><\/app-root>/)) {
         throw new Error('Response does not match expected value.');
       }
     })

tests/e2e/tests/misc/ssl-default.ts

@@ -8,7 +8,7 @@ export default function() {
     .then(() => ngServe('--ssl', 'true'))
     .then(() => request('https://localhost:4200/'))
     .then(body => {
-      if (!body.match(/<app-root>Loading...<\/app-root>/)) {
+      if (!body.match(/<app-root><\/app-root>/)) {
         throw new Error('Response does not match expected value.');
       }
     })

tests/e2e/tests/misc/ssl-with-cert-config.ts

@@ -17,7 +17,7 @@ export default function() {
     .then(() => ngServe())
     .then(() => request('https://localhost:4200/'))
     .then(body => {
-      if (!body.match(/<app-root>Loading...<\/app-root>/)) {
+      if (!body.match(/<app-root><\/app-root>/)) {
         throw new Error('Response does not match expected value.');
       }
     })

tests/e2e/tests/misc/ssl-with-cert.ts

@@ -13,7 +13,7 @@ export default function() {
     ))
     .then(() => request('https://localhost:4200/'))
     .then(body => {
-      if (!body.match(/<app-root>Loading...<\/app-root>/)) {
+      if (!body.match(/<app-root><\/app-root>/)) {
         throw new Error('Response does not match expected value.');
       }
     })