├── .gitignore
├── LICENSE
├── README.md
├── agnular-gulp-starter.sln
├── angular-gulp-starter.csproj
├── angular-gulp-starter.csproj.user
├── app
    ├── app-routing.module.ts
    ├── app.component.scss
    ├── app.component.ts
    ├── app.module.ts
    ├── dashboard
    │   ├── dashboard-exports.ts
    │   ├── dashboard-imports.ts
    │   ├── dashboard-routing.module.ts
    │   ├── dashboard.component
    │   │   ├── dashboard.component.html
    │   │   ├── dashboard.component.scss
    │   │   └── dashboard.component.ts
    │   └── dashboard.module.ts
    ├── heroes
    │   ├── hero-detail.component
    │   │   ├── hero-detail.component.html
    │   │   ├── hero-detail.component.scss
    │   │   └── hero-detail.component.ts
    │   ├── hero-search.component
    │   │   ├── hero-search.component.html
    │   │   ├── hero-search.component.scss
    │   │   ├── hero-search.component.ts
    │   │   └── hero-search.service.ts
    │   ├── heroes-exports.ts
    │   ├── heroes-imports.ts
    │   ├── heroes-routing.module.ts
    │   ├── heroes.component
    │   │   ├── heroes.component.html
    │   │   ├── heroes.component.scss
    │   │   └── heroes.component.ts
    │   ├── heroes.module.ts
    │   └── services
    │   │   ├── hero.service.ts
    │   │   └── mock-heroes.ts
    ├── main-aot.ts
    ├── main.ts
    ├── models
    │   ├── hero.ts
    │   └── models-exports.ts
    └── rxjs-extensions.ts
├── assets
    ├── gif-load.gif
    ├── global.css
    ├── global.min.css
    └── global.scss
├── build-tools
    ├── build-scripts
    │   ├── bundling.js
    │   ├── compilation.js
    │   └── path-tools.js
    ├── express-http-server.dev.js
    ├── express-http-server.prod.js
    ├── rollup-config.js
    ├── systemjs-config.js
    ├── tsconfig.rxjs-to-es6.json
    └── variables.js
├── build.common.js
├── build.dev.js
├── build.prod.js
├── compilerconfig.json
├── compilerconfig.json.defaults
├── gulpfile.js
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.ngc.json
└── tsconfig.prod.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | dist-dev
 3 | temp
 4 | app-aot
 5 | app/**/*.js
 6 | app/**/*.js.map
 7 | app/**/*.css
 8 | app/**/*.metadata.json
 9 | npm-debug.log
10 | typings
11 | obj
12 | bin
13 | dist
14 | .vs
15 | rxjs-es


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 PFight
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Angular gulp starter
 2 | Simple dev/prod gulp build for Angular (2+) using systemjs, rollup, ngc (AOT), scss, and with dev/prod servers via express.
 3 | 
 4 | ### Setup
 5 | 
 6 |     npm install gulp -g
 7 |     npm install
 8 | 
 9 | ### See in action
10 | 
11 | [Try DEV build online](https://pfight.github.io/angular-gulp-starter-online-dev/)
12 | 
13 | [Try PROD build online](https://pfight.github.io/angular-gulp-starter-online-prod)
14 | 
15 | ### Commands
16 | 
17 | ##### Development buid
18 |     
19 |     gulp build-dev --color
20 | 
21 | Development build includes compilation of SCSS and TypeScript, and bundling of rxjs to single file.
22 | 
23 | ##### Production build
24 | 
25 |     gulp build-prod --color
26 | 
27 | Production build includes compilation of SCSS, AOT compilation and tree-shaking with Rollup. All result files moved to `dist` dir. Production build output do not conflicts with development.
28 | 
29 | ##### Start develoment server
30 | 
31 |     npm start
32 | 
33 | Server will be listening on [http://localhost:8181](http://localhost:8181).
34 | 
35 | ##### Start production test server
36 |     
37 |     npm run start-prod
38 | 
39 | Server will be listening on [http://localhost:8282](http://localhost:8282), with gzip content compression enabled.
40 | 
41 | ### Using Visual Studio
42 | 
43 | ##### Setup
44 | 
45 | 1. Setup [Visual Studio 2015](https://www.visualstudio.com/downloads/) (for example, Community Edition)
46 | 2. Setup [TypeScript for Visual Studio 2015](https://www.microsoft.com/ru-ru/download/confirmation.aspx?id=48593)
47 | 3. Setup [Web Compiler](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler) extension for working with SCSS from IDE.
48 | 4. Run `gulp build-dev --color` from terminal, to make rxjs bundle. 
49 | 
50 | ##### Working
51 | 
52 | TypeScript and SCSS set up to be compiled on file save. SystemJS loads every file separately, so you only need save your changes, and reload browser window.
53 | 
54 | To force recompilation of all files make rebuild of the solution (Alt+B, Alt+R). To force recompilation of SCSS file, `right click -> Web Compiler -> Re-compile file`
55 | 
56 | ### Installing dependencies
57 | 
58 | If library should be imported via `import` statement into TypeScript, then:
59 | 
60 | 1. For development: make sure, that TypeScript will find this library with `tsconfig.json`, and make sure, that SystemJS will find it by `buid-tools/systemjs-config.json`. In some cases nothing needed, in some cases you should map library name to its path, as it made for @angular modules.
61 | 2. For production: make sure, that TypeScript will find this library with `tsconfig.ngc.json`, `tsconfig.prod.json` and make sure, that Rollup will find it by `build-tools/rollup-config.js`. In most cases, `rollup-plugin-node-resolve` plugin will make the work without any setup.
62 | 
63 | If library should not be imported, and its only needed to add it page, then:
64 | 
65 | 1. For devleopment: add `<script>` tag into `index.html` in section `<!-- development -->`.
66 | 2. For production: add row to `build.prod.js` to function `commonBundle`; you can specify full path, or use `pathTools.resolvePackagePath` funciton to automaticly resolve library path.
67 | 
68 | ### Known issues
69 | 
70 | 1. Replace es6-shim with core-js, because es6-shim works extremely slow in IE.
71 | 2. Add minification and post-processing of CSS.
72 | 3. Resolve, why `packageConfigPaths` in systemjs-config does not work.
73 | 4. Add server-side rendering support.
74 | 5. Add testing support.
75 | 6. Remove unused dependencies.
76 | 
77 | ### See also
78 | 
79 | See branch hash-routing for enabling hash location strategy, instead of HTML5.
80 | See branch http2 for testing spdy in development server. By the way, there is no perfomance boost achieved.
81 | 
82 | 


--------------------------------------------------------------------------------
/agnular-gulp-starter.sln:
--------------------------------------------------------------------------------
 1 | 
 2 | Microsoft Visual Studio Solution File, Format Version 12.00
 3 | # Visual Studio 14
 4 | VisualStudioVersion = 14.0.25420.1
 5 | MinimumVisualStudioVersion = 10.0.40219.1
 6 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "angular-gulp-starter", "angular-gulp-starter.csproj", "{D181F1B6-4E62-4869-9E1C-73BB9F0DAAB7}"
 7 | EndProject
 8 | Global
 9 | 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
10 | 		Debug|Any CPU = Debug|Any CPU
11 | 		Release|Any CPU = Release|Any CPU
12 | 	EndGlobalSection
13 | 	GlobalSection(ProjectConfigurationPlatforms) = postSolution
14 | 		{D181F1B6-4E62-4869-9E1C-73BB9F0DAAB7}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15 | 		{D181F1B6-4E62-4869-9E1C-73BB9F0DAAB7}.Debug|Any CPU.Build.0 = Debug|Any CPU
16 | 		{D181F1B6-4E62-4869-9E1C-73BB9F0DAAB7}.Release|Any CPU.ActiveCfg = Release|Any CPU
17 | 		{D181F1B6-4E62-4869-9E1C-73BB9F0DAAB7}.Release|Any CPU.Build.0 = Release|Any CPU
18 | 	EndGlobalSection
19 | 	GlobalSection(SolutionProperties) = preSolution
20 | 		HideSolutionNode = FALSE
21 | 	EndGlobalSection
22 | EndGlobal
23 | 


--------------------------------------------------------------------------------
/angular-gulp-starter.csproj:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="utf-8"?>
  2 | <Project ToolsVersion="12.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  3 |   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />
  4 |   <PropertyGroup>
  5 |     <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
  6 |     <ProjectGuid>{D181F1B6-4E62-4869-9E1C-73BB9F0DAAB7}</ProjectGuid>
  7 |     <ProjectTypeGuids>{349c5851-65df-11da-9384-00065b846f21};{fae04ec0-301f-11d3-bf4b-00c04f79efbc}</ProjectTypeGuids>
  8 |     <OutputType>Library</OutputType>
  9 |     <OutputPath>bin</OutputPath>
 10 |     <TargetFrameworkVersion>v4.5.2</TargetFrameworkVersion>
 11 |     <DebugType>full</DebugType>
 12 |     <DebugSymbols>true</DebugSymbols>
 13 |     <TypeScriptToolsVersion>2.1</TypeScriptToolsVersion>
 14 |     <UseIISExpress>true</UseIISExpress>
 15 |     <IISExpressSSLPort />
 16 |     <IISExpressAnonymousAuthentication />
 17 |     <IISExpressWindowsAuthentication />
 18 |     <IISExpressUseClassicPipelineMode />
 19 |     <UseGlobalApplicationHostFile />
 20 |     <NuGetPackageImportStamp>
 21 |     </NuGetPackageImportStamp>
 22 |     <FileUpgradeFlags>
 23 |     </FileUpgradeFlags>
 24 |     <UpgradeBackupLocation>
 25 |     </UpgradeBackupLocation>
 26 |     <OldToolsVersion>12.0</OldToolsVersion>
 27 |   </PropertyGroup>
 28 |   <ItemGroup>
 29 |     <Service Include="{4A0DDDB5-7A95-4FBF-97CC-616D07737A77}" />
 30 |   </ItemGroup>
 31 |   <ItemGroup>
 32 |     <Content Include="app\app.component.css">
 33 |       <DependentUpon>app.component.scss</DependentUpon>
 34 |     </Content>
 35 |     <Content Include="app\dashboard\dashboard.component\dashboard.component.css">
 36 |       <DependentUpon>dashboard.component.scss</DependentUpon>
 37 |     </Content>
 38 |     <Content Include="app\dashboard\dashboard.component\dashboard.component.html" />
 39 |     <Content Include="app\heroes\hero-detail.component\hero-detail.component.css">
 40 |       <DependentUpon>hero-detail.component.scss</DependentUpon>
 41 |     </Content>
 42 |     <Content Include="app\heroes\hero-detail.component\hero-detail.component.html" />
 43 |     <Content Include="app\heroes\hero-search.component\hero-search.component.css">
 44 |       <DependentUpon>hero-search.component.scss</DependentUpon>
 45 |     </Content>
 46 |     <Content Include="app\heroes\hero-search.component\hero-search.component.html" />
 47 |     <Content Include="app\heroes\heroes.component\heroes.component.css">
 48 |       <DependentUpon>heroes.component.scss</DependentUpon>
 49 |     </Content>
 50 |     <Content Include="app\heroes\heroes.component\heroes.component.html" />
 51 |     <Content Include="assets\global.scss" />
 52 |     <Content Include="build-tools\systemjs-config.js" />
 53 |     <Content Include="index.html" />
 54 |     <Content Include="LICENSE" />
 55 |     <Content Include="package.json" />
 56 |     <Content Include="README.md" />
 57 |     <Content Include="tsconfig.json" />
 58 |     <Content Include="tsconfig.ngc.json" />
 59 |     <Content Include="tsconfig.prod.json" />
 60 |   </ItemGroup>
 61 |   <ItemGroup>
 62 |     <Content Include=".gitignore" />
 63 |     <Content Include="assets\done.png" />
 64 |     <Content Include="assets\gif-load.gif" />
 65 |     <Content Include="assets\global.css" />
 66 |     <Content Include="build-tools\build-scripts\bundling.js" />
 67 |     <Content Include="build-tools\build-scripts\compilation.js" />
 68 |     <Content Include="build-tools\build-scripts\path-tools.js" />
 69 |     <Content Include="build-tools\express-http-server.dev.js" />
 70 |     <Content Include="build-tools\express-http-server.prod.js" />
 71 |     <Content Include="build-tools\rollup-config.js" />
 72 |     <Content Include="build-tools\variables.js" />
 73 |     <Content Include="build.common.js" />
 74 |     <Content Include="build.dev.js" />
 75 |     <Content Include="build.prod.js" />
 76 |     <Content Include="gulpfile.js" />
 77 |   </ItemGroup>
 78 |   <ItemGroup>
 79 |     <TypeScriptCompile Include="app\app-routing.module.ts" />
 80 |     <TypeScriptCompile Include="app\app.component.ts" />
 81 |     <TypeScriptCompile Include="app\app.module.ts" />
 82 |     <TypeScriptCompile Include="app\dashboard\dashboard.component\dashboard.component.ts" />
 83 |     <TypeScriptCompile Include="app\dashboard\dashboard-exports.ts" />
 84 |     <TypeScriptCompile Include="app\dashboard\dashboard-imports.ts" />
 85 |     <TypeScriptCompile Include="app\dashboard\dashboard-routing.module.ts" />
 86 |     <TypeScriptCompile Include="app\dashboard\dashboard.module.ts" />
 87 |     <TypeScriptCompile Include="app\heroes\hero-detail.component\hero-detail.component.ts" />
 88 |     <TypeScriptCompile Include="app\heroes\hero-search.component\hero-search.component.ts" />
 89 |     <TypeScriptCompile Include="app\heroes\heroes.component\heroes.component.ts" />
 90 |     <TypeScriptCompile Include="app\heroes\heroes-imports.ts" />
 91 |     <TypeScriptCompile Include="app\heroes\heroes-routing.module.ts" />
 92 |     <TypeScriptCompile Include="app\heroes\heroes.module.ts" />
 93 |     <TypeScriptCompile Include="app\heroes\hero-search.component\hero-search.service.ts" />
 94 |     <TypeScriptCompile Include="app\heroes\heroes-exports.ts" />
 95 |     <TypeScriptCompile Include="app\heroes\services\hero.service.ts" />
 96 |     <TypeScriptCompile Include="app\heroes\services\mock-heroes.ts" />
 97 |     <TypeScriptCompile Include="app\main-aot.ts" />
 98 |     <TypeScriptCompile Include="app\main.ts" />
 99 |     <TypeScriptCompile Include="app\models\hero.ts" />
100 |     <TypeScriptCompile Include="app\models\models-exports.ts" />
101 |     <TypeScriptCompile Include="app\rxjs-extensions.ts" />
102 |   </ItemGroup>
103 |   <ItemGroup>
104 |     <Content Include="app\app.component.scss" />
105 |     <Content Include="app\dashboard\dashboard.component\dashboard.component.scss" />
106 |     <Content Include="app\heroes\hero-detail.component\hero-detail.component.scss" />
107 |     <Content Include="app\heroes\hero-search.component\hero-search.component.scss" />
108 |     <Content Include="app\heroes\heroes.component\heroes.component.scss" />
109 |     <Content Include="build-tools\tsconfig.rxjs-to-es6.json" />
110 |   </ItemGroup>
111 |   <ItemGroup>
112 |     <Content Include="compilerconfig.json" />
113 |     <None Include="compilerconfig.json.defaults" />
114 |   </ItemGroup>
115 |   <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
116 |   <ProjectExtensions>
117 |     <VisualStudio>
118 |       <FlavorProperties GUID="{349c5851-65df-11da-9384-00065b846f21}">
119 |         <WebProjectProperties>
120 |           <UseIIS>True</UseIIS>
121 |           <AutoAssignPort>True</AutoAssignPort>
122 |           <DevelopmentServerPort>1853</DevelopmentServerPort>
123 |           <DevelopmentServerVPath>/</DevelopmentServerVPath>
124 |           <IISUrl>http://localhost:1853/</IISUrl>
125 |           <NTLMAuthentication>False</NTLMAuthentication>
126 |           <UseCustomServer>False</UseCustomServer>
127 |           <CustomServerUrl>
128 |           </CustomServerUrl>
129 |           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
130 |         </WebProjectProperties>
131 |       </FlavorProperties>
132 |     </VisualStudio>
133 |   </ProjectExtensions>
134 |   <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
135 |     <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
136 |     <TypeScriptSourceMap>true</TypeScriptSourceMap>
137 |   </PropertyGroup>
138 |   <PropertyGroup Condition="'$(Configuration)' == 'Release'">
139 |     <TypeScriptRemoveComments>true</TypeScriptRemoveComments>
140 |     <TypeScriptSourceMap>false</TypeScriptSourceMap>
141 |   </PropertyGroup>
142 |   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />
143 |   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v14.0\WebApplications\Microsoft.WebApplication.targets" />
144 |   <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
145 |        Other similar extension points exist, see Microsoft.Common.targets.
146 |   <Target Name="BeforeBuild">
147 |   </Target>
148 |   <Target Name="AfterBuild">
149 |   </Target>
150 |   -->
151 | </Project>


--------------------------------------------------------------------------------
/angular-gulp-starter.csproj.user:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <Project ToolsVersion="14.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
 3 |   <PropertyGroup>
 4 |     <UseIISExpress>true</UseIISExpress>
 5 |     <ProjectView>ProjectFiles</ProjectView>
 6 |     <IISExpressSSLPort />
 7 |     <IISExpressAnonymousAuthentication />
 8 |     <IISExpressWindowsAuthentication />
 9 |     <IISExpressUseClassicPipelineMode />
10 |     <UseGlobalApplicationHostFile />
11 |   </PropertyGroup>
12 |   <ProjectExtensions>
13 |     <VisualStudio>
14 |       <FlavorProperties GUID="{349c5851-65df-11da-9384-00065b846f21}">
15 |         <WebProjectProperties>
16 |           <StartPageUrl>
17 |           </StartPageUrl>
18 |           <StartAction>CurrentPage</StartAction>
19 |           <AspNetDebugging>True</AspNetDebugging>
20 |           <SilverlightDebugging>False</SilverlightDebugging>
21 |           <NativeDebugging>False</NativeDebugging>
22 |           <SQLDebugging>False</SQLDebugging>
23 |           <ExternalProgram>
24 |           </ExternalProgram>
25 |           <StartExternalURL>
26 |           </StartExternalURL>
27 |           <StartCmdLineArguments>
28 |           </StartCmdLineArguments>
29 |           <StartWorkingDirectory>
30 |           </StartWorkingDirectory>
31 |           <EnableENC>True</EnableENC>
32 |           <AlwaysStartWebServerOnDebug>True</AlwaysStartWebServerOnDebug>
33 |         </WebProjectProperties>
34 |       </FlavorProperties>
35 |     </VisualStudio>
36 |   </ProjectExtensions>
37 | </Project>


--------------------------------------------------------------------------------
/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule }             from '@angular/core';
 2 | import { RouterModule, Routes } from '@angular/router';
 3 | 
 4 | const routes: Routes = [
 5 |   { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
 6 | ];
 7 | 
 8 | @NgModule({
 9 |   imports: [RouterModule.forRoot(routes)],
10 |   exports: [ RouterModule ]
11 | })
12 | export class AppRoutingModule {}


--------------------------------------------------------------------------------
/app/app.component.scss:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   font-size: 1.2em;
 3 |   color: #999;
 4 |   margin-bottom: 0;
 5 | }
 6 | h2 {
 7 |   font-size: 2em;
 8 |   margin-top: 0;
 9 |   padding-top: 0;
10 | }
11 | nav a {
12 |   padding: 5px 10px;
13 |   text-decoration: none;
14 |   margin-top: 10px;
15 |   display: inline-block;
16 |   background-color: #eee;
17 |   border-radius: 4px;
18 | }
19 | nav a:visited, a:link {
20 |   color: #607D8B;
21 | }
22 | nav a:hover {
23 |   color: #039be5;
24 |   background-color: #CFD8DC;
25 | }
26 | nav a.active {
27 |   color: #039be5;
28 | }
29 | 
30 | 
31 | /*
32 | Copyright 2016 Google Inc. All Rights Reserved.
33 | Use of this source code is governed by an MIT-style license that
34 | can be found in the LICENSE file at http://angular.io/license
35 | */


--------------------------------------------------------------------------------
/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   moduleId: module.id,
 5 |   selector: 'my-app',
 6 |   template: `
 7 |     <h1>{{title}}</h1>
 8 |     <nav>
 9 |       <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
10 |       <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
11 |     </nav>
12 |     <router-outlet></router-outlet>
13 |   `,
14 |   styleUrls: ['app.component.css']
15 | })
16 | export class AppComponent {
17 |   title = 'Tour of Heroes';
18 | }
19 | 
20 | 
21 | /*
22 | Copyright 2016 Google Inc. All Rights Reserved.
23 | Use of this source code is governed by an MIT-style license that
24 | can be found in the LICENSE file at http://angular.io/license
25 | */


--------------------------------------------------------------------------------
/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import './rxjs-extensions';
 2 | import { NgModule }      from '@angular/core';
 3 | 
 4 | import { DashboardModule } from './dashboard/dashboard.module';
 5 | import { HeroesModule } from './heroes/heroes.module';
 6 | import { AppRoutingModule } from './app-routing.module';
 7 | 
 8 | import { AppComponent } from './app.component';
 9 | 
10 | @NgModule({
11 |   imports: [
12 |     DashboardModule,
13 |     HeroesModule,
14 |     AppRoutingModule
15 |   ],
16 |   declarations: [
17 |     AppComponent
18 |   ],
19 |   providers: [ ],
20 |   bootstrap: [ AppComponent ]
21 | })
22 | export class AppModule { }


--------------------------------------------------------------------------------
/app/dashboard/dashboard-exports.ts:
--------------------------------------------------------------------------------
1 | export * from './dashboard.module';


--------------------------------------------------------------------------------
/app/dashboard/dashboard-imports.ts:
--------------------------------------------------------------------------------
1 | import * as Heroes from '../heroes/heroes-exports';
2 | import * as Models from '../models/models-exports';
3 | 
4 | // NGC bug fix (we can't use Heroes.HeroesModule in dashboard.module imports)
5 | var Modules = {
6 |   HeroesModule: Heroes.HeroesModule
7 | }
8 | 
9 | export { Heroes, Models, Modules };


--------------------------------------------------------------------------------
/app/dashboard/dashboard-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule }             from '@angular/core';
 2 | import { RouterModule, Routes } from '@angular/router';
 3 | 
 4 | import { DashboardComponent } from './dashboard.component/dashboard.component';
 5 | 
 6 | const routes: Routes = [
 7 |   { path: 'dashboard',  component: DashboardComponent },
 8 | ];
 9 | 
10 | @NgModule({
11 |   imports: [ RouterModule.forChild(routes) ],
12 |   exports: [ RouterModule ]
13 | })
14 | export class DashboardRoutingModule {}


--------------------------------------------------------------------------------
/app/dashboard/dashboard.component/dashboard.component.html:
--------------------------------------------------------------------------------
 1 | <h3>Top Heroes</h3>
 2 | <div class="grid grid-pad">
 3 |   <a *ngFor="let hero of heroes"  [routerLink]="['/detail', hero.id]"  class="col-1-4">
 4 |     <div class="module hero">
 5 |       <h4>{{hero.name}}</h4>
 6 |     </div>
 7 |   </a>
 8 | </div>
 9 | 
10 | 
11 | <!-- 
12 | Copyright 2016 Google Inc. All Rights Reserved.
13 | Use of this source code is governed by an MIT-style license that
14 | can be found in the LICENSE file at http://angular.io/license
15 | -->


--------------------------------------------------------------------------------
/app/dashboard/dashboard.component/dashboard.component.scss:
--------------------------------------------------------------------------------
 1 | [class*='col-'] {
 2 |   float: left;
 3 |   padding-right: 20px;
 4 |   padding-bottom: 20px;
 5 | }
 6 | [class*='col-']:last-of-type {
 7 |   padding-right: 0;
 8 | }
 9 | a {
10 |   text-decoration: none;
11 | }
12 | *, *:after, *:before {
13 |   -webkit-box-sizing: border-box;
14 |   -moz-box-sizing: border-box;
15 |   box-sizing: border-box;
16 | }
17 | h3 {
18 |   text-align: center; margin-bottom: 0;
19 | }
20 | h4 {
21 |   position: relative;
22 | }
23 | .grid {
24 |   margin: 0;
25 | }
26 | .col-1-4 {
27 |   width: 25%;
28 | }
29 | .module {
30 |   padding: 20px;
31 |   text-align: center;
32 |   color: #eee;
33 |   max-height: 120px;
34 |   min-width: 120px;
35 |   background-color: #607D8B;
36 |   border-radius: 2px;
37 | }
38 | .module:hover {
39 |   background-color: #EEE;
40 |   cursor: pointer;
41 |   color: #607d8b;
42 | }
43 | .grid-pad {
44 |   padding: 10px 0;
45 | }
46 | .grid-pad > [class*='col-']:last-of-type {
47 |   padding-right: 20px;
48 | }
49 | @media (max-width: 600px) {
50 |   .module {
51 |     font-size: 10px;
52 |     max-height: 75px; }
53 | }
54 | @media (max-width: 1024px) {
55 |   .grid {
56 |     margin: 0;
57 |   }
58 |   .module {
59 |     min-width: 60px;
60 |   }
61 | }
62 | 
63 | 
64 | /*
65 | Copyright 2016 Google Inc. All Rights Reserved.
66 | Use of this source code is governed by an MIT-style license that
67 | can be found in the LICENSE file at http://angular.io/license
68 | */


--------------------------------------------------------------------------------
/app/dashboard/dashboard.component/dashboard.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | import { Heroes, Models } from "../dashboard-imports";
 4 | 
 5 | @Component({
 6 |   moduleId: module.id,
 7 |   selector: 'my-dashboard',
 8 |   templateUrl: 'dashboard.component.html',
 9 |   styleUrls: [ 'dashboard.component.css' ]
10 | })
11 | export class DashboardComponent implements OnInit {
12 | 
13 |   heroes: Models.Hero[] = [];
14 | 
15 |   constructor(private heroService: Heroes.HeroService) { }
16 | 
17 |   ngOnInit(): void {
18 |     this.heroService.getHeroes()
19 |       .then(heroes => this.heroes = heroes.slice(1, 5));
20 |   }
21 | }
22 | 
23 | 
24 | /*
25 | Copyright 2016 Google Inc. All Rights Reserved.
26 | Use of this source code is governed by an MIT-style license that
27 | can be found in the LICENSE file at http://angular.io/license
28 | */


--------------------------------------------------------------------------------
/app/dashboard/dashboard.module.ts:
--------------------------------------------------------------------------------
 1 | import '../rxjs-extensions';
 2 | 
 3 | import { NgModule }      from '@angular/core';
 4 | import { BrowserModule } from '@angular/platform-browser';
 5 | import { FormsModule }   from '@angular/forms';
 6 | import { HttpModule }    from '@angular/http';
 7 | 
 8 | import { DashboardRoutingModule } from './dashboard-routing.module';
 9 | import { DashboardComponent } from './dashboard.component/dashboard.component';
10 | import { Modules } from './dashboard-imports';
11 | 
12 | @NgModule({
13 |   imports: [
14 |     BrowserModule,
15 |     FormsModule,
16 |     HttpModule,
17 |     DashboardRoutingModule,
18 |     Modules.HeroesModule
19 |   ],
20 |   declarations: [
21 |     DashboardComponent
22 |   ],
23 |   providers: [ ]
24 | })
25 | export class DashboardModule { }


--------------------------------------------------------------------------------
/app/heroes/hero-detail.component/hero-detail.component.html:
--------------------------------------------------------------------------------
 1 | <div *ngIf="hero">
 2 |   <h2>{{hero.name}} details!</h2>
 3 |   <div>
 4 |     <label>id: </label>{{hero.id}}</div>
 5 |   <div>
 6 |     <label>name: </label>
 7 |     <input [(ngModel)]="hero.name" placeholder="name" />
 8 |   </div>
 9 |   <button (click)="goBack()">Back</button>
10 | </div>
11 | 
12 | 
13 | <!-- 
14 | Copyright 2016 Google Inc. All Rights Reserved.
15 | Use of this source code is governed by an MIT-style license that
16 | can be found in the LICENSE file at http://angular.io/license
17 | -->


--------------------------------------------------------------------------------
/app/heroes/hero-detail.component/hero-detail.component.scss:
--------------------------------------------------------------------------------
 1 | label {
 2 |   display: inline-block;
 3 |   width: 3em;
 4 |   margin: .5em 0;
 5 |   color: #607D8B;
 6 |   font-weight: bold;
 7 | }
 8 | input {
 9 |   height: 2em;
10 |   font-size: 1em;
11 |   padding-left: .4em;
12 | }
13 | button {
14 |   margin-top: 20px;
15 |   font-family: Arial;
16 |   background-color: #eee;
17 |   border: none;
18 |   padding: 5px 10px;
19 |   border-radius: 4px;
20 |   cursor: pointer; cursor: hand;
21 | }
22 | button:hover {
23 |   background-color: #cfd8dc;
24 | }
25 | button:disabled {
26 |   background-color: #eee;
27 |   color: #ccc; 
28 |   cursor: auto;
29 | }
30 | 
31 | 
32 | /*
33 | Copyright 2016 Google Inc. All Rights Reserved.
34 | Use of this source code is governed by an MIT-style license that
35 | can be found in the LICENSE file at http://angular.io/license
36 | */


--------------------------------------------------------------------------------
/app/heroes/hero-detail.component/hero-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import 'rxjs/add/operator/switchMap';
 2 | import { Component, OnInit }      from '@angular/core';
 3 | import { ActivatedRoute, Params } from '@angular/router';
 4 | import { Location }               from '@angular/common';
 5 | 
 6 | import { Models } from '../heroes-imports';
 7 | import { HeroService } from '../services/hero.service';
 8 | 
 9 | @Component({
10 |   moduleId: module.id,
11 |   selector: 'my-hero-detail',
12 |   templateUrl: 'hero-detail.component.html',
13 |   styleUrls: ['hero-detail.component.css']
14 | })
15 | export class HeroDetailComponent implements OnInit {
16 |   hero: Models.Hero;
17 | 
18 |   constructor(
19 |     private heroService: HeroService,
20 |     private route: ActivatedRoute,
21 |     private location: Location
22 |   ) { }
23 | 
24 |   ngOnInit(): void {
25 |     this.route.params
26 |       .switchMap((params: Params) => this.heroService.getHero(+params['id']))
27 |       .subscribe(hero => this.hero = hero);
28 |   }
29 | 
30 |   goBack(): void {
31 |     this.location.back();
32 |   }
33 | }
34 | 
35 | /*
36 | Copyright 2016 Google Inc. All Rights Reserved.
37 | Use of this source code is governed by an MIT-style license that
38 | can be found in the LICENSE file at http://angular.io/license
39 | */


--------------------------------------------------------------------------------
/app/heroes/hero-search.component/hero-search.component.html:
--------------------------------------------------------------------------------
 1 | <div id="search-component">
 2 |   <h4>Hero Search</h4>
 3 |   <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
 4 |   <div>
 5 |     <div *ngFor="let hero of heroes | async"
 6 |          (click)="gotoDetail(hero)" class="search-result" >
 7 |       {{hero.name}}
 8 |     </div>
 9 |   </div>
10 | </div>
11 | 
12 | 
13 | <!-- 
14 | Copyright 2016 Google Inc. All Rights Reserved.
15 | Use of this source code is governed by an MIT-style license that
16 | can be found in the LICENSE file at http://angular.io/license
17 | -->


--------------------------------------------------------------------------------
/app/heroes/hero-search.component/hero-search.component.scss:
--------------------------------------------------------------------------------
 1 | .search-result{
 2 |   border-bottom: 1px solid gray;
 3 |   border-left: 1px solid gray;
 4 |   border-right: 1px solid gray;
 5 |   width:195px;
 6 |   height: 20px;
 7 |   padding: 5px;
 8 |   background-color: white;
 9 |   cursor: pointer;
10 | }
11 | 
12 | #search-box{
13 |   width: 200px;
14 |   height: 20px;
15 | }
16 | 
17 | 
18 | /*
19 | Copyright 2016 Google Inc. All Rights Reserved.
20 | Use of this source code is governed by an MIT-style license that
21 | can be found in the LICENSE file at http://angular.io/license
22 | */


--------------------------------------------------------------------------------
/app/heroes/hero-search.component/hero-search.component.ts:
--------------------------------------------------------------------------------
 1 | import * as Core from '@angular/core';
 2 | import { Router }            from '@angular/router';
 3 | import { Observable }        from 'rxjs/Observable';
 4 | import { Subject }           from 'rxjs/Subject';
 5 | 
 6 | import { HeroSearchService } from './hero-search.service';
 7 | import { Models } from '../heroes-imports';
 8 | 
 9 | @Core.Component({
10 |   moduleId: module.id,
11 |   selector: 'hero-search',
12 |   templateUrl: 'hero-search.component.html',
13 |   styleUrls: [ 'hero-search.component.css' ],
14 |   providers: [HeroSearchService]
15 | })
16 | export class HeroSearchComponent implements Core.OnInit {
17 |   heroes: Observable<Models.Hero[]>;
18 |   private searchTerms = new Subject<string>();
19 | 
20 |   constructor(
21 |     private heroSearchService: HeroSearchService,
22 |     private router: Router) {}
23 | 
24 |   // Push a search term into the observable stream.
25 |   search(term: string): void {
26 |     this.searchTerms.next(term);
27 |   }
28 | 
29 |   ngOnInit(): void {
30 |     this.heroes = this.searchTerms
31 |       .debounceTime(300)        // wait for 300ms pause in events
32 |       .distinctUntilChanged()   // ignore if next search term is same as previous
33 |       .switchMap(term => term   // switch to new observable each time
34 |         // return the http search observable
35 |         ? this.heroSearchService.search(term)
36 |         // or the observable of empty heroes if no search term
37 |         : Observable.of<Models.Hero[]>([]))
38 |       .catch(error => {
39 |         // TODO: real error handling
40 |         console.log(error);
41 |         return Observable.of<Models.Hero[]>([]);
42 |       });
43 |   }
44 | 
45 |   gotoDetail(hero: Models.Hero): void {
46 |     let link = ['/detail', hero.id];
47 |     this.router.navigate(link);
48 |   }
49 | }
50 | 
51 | 
52 | /*
53 | Copyright 2016 Google Inc. All Rights Reserved.
54 | Use of this source code is governed by an MIT-style license that
55 | can be found in the LICENSE file at http://angular.io/license
56 | */


--------------------------------------------------------------------------------
/app/heroes/hero-search.component/hero-search.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable }     from '@angular/core';
 2 | import { Http, Response } from '@angular/http';
 3 | import { Observable } from 'rxjs';
 4 | 
 5 | import { Models } from '../heroes-imports';
 6 | 
 7 | @Injectable()
 8 | export class HeroSearchService {
 9 | 
10 |   constructor(private http: Http) {}
11 | 
12 |   search(term: string): Observable<Models.Hero[]> {
13 |     return this.http
14 |                .get(`app/heroes/?name=${term}`)
15 |                .map((r: Response) => r.json().data as Models.Hero[]);
16 |   }
17 | }
18 | 
19 | 
20 | /*
21 | Copyright 2016 Google Inc. All Rights Reserved.
22 | Use of this source code is governed by an MIT-style license that
23 | can be found in the LICENSE file at http://angular.io/license
24 | */


--------------------------------------------------------------------------------
/app/heroes/heroes-exports.ts:
--------------------------------------------------------------------------------
1 | export * from './hero-search.component/hero-search.component';
2 | 
3 | export * from './services/hero.service';
4 | export * from './heroes.module';


--------------------------------------------------------------------------------
/app/heroes/heroes-imports.ts:
--------------------------------------------------------------------------------
1 | import * as Models from "../models/models-exports";
2 | export { Models };


--------------------------------------------------------------------------------
/app/heroes/heroes-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule }             from '@angular/core';
 2 | import { RouterModule, Routes } from '@angular/router';
 3 | 
 4 | import { HeroDetailComponent } from './hero-detail.component/hero-detail.component';
 5 | import { HeroesComponent } from './heroes.component/heroes.component';
 6 | 
 7 | const routes: Routes = [
 8 |   { path: 'detail/:id', component: HeroDetailComponent },
 9 |   { path: 'heroes', component: HeroesComponent }
10 | ];
11 | 
12 | @NgModule({
13 |   imports: [ RouterModule.forChild(routes) ],
14 |   exports: [ RouterModule ]
15 | })
16 | export class HeroesRoutingModule {}
17 | 
18 | 
19 | /*
20 | Copyright 2016 Google Inc. All Rights Reserved.
21 | Use of this source code is governed by an MIT-style license that
22 | can be found in the LICENSE file at http://angular.io/license
23 | */


--------------------------------------------------------------------------------
/app/heroes/heroes.component/heroes.component.html:
--------------------------------------------------------------------------------
 1 | <h2>My Heroes</h2>
 2 | <ul class="heroes">
 3 |   <li *ngFor="let hero of heroes"
 4 |     [class.selected]="hero === selectedHero"
 5 |     (click)="onSelect(hero)">
 6 |     <span class="badge">{{hero.id}}</span> {{hero.name}}
 7 |   </li>
 8 | </ul>
 9 | <div *ngIf="selectedHero">
10 |   <h2>
11 |     {{selectedHero.name | uppercase}} is my hero
12 |   </h2>
13 |   <button (click)="gotoDetail()">View Details</button>
14 | </div>
15 | 
16 | 
17 | <!-- 
18 | Copyright 2016 Google Inc. All Rights Reserved.
19 | Use of this source code is governed by an MIT-style license that
20 | can be found in the LICENSE file at http://angular.io/license
21 | -->


--------------------------------------------------------------------------------
/app/heroes/heroes.component/heroes.component.scss:
--------------------------------------------------------------------------------
 1 | .selected {
 2 |   background-color: #CFD8DC !important;
 3 |   color: white;
 4 | }
 5 | .heroes {
 6 |   margin: 0 0 2em 0;
 7 |   list-style-type: none;
 8 |   padding: 0;
 9 |   width: 15em;
10 | }
11 | .heroes li {
12 |   cursor: pointer;
13 |   position: relative;
14 |   left: 0;
15 |   background-color: #EEE;
16 |   margin: .5em;
17 |   padding: .3em 0;
18 |   height: 1.6em;
19 |   border-radius: 4px;
20 | }
21 | .heroes li:hover {
22 |   color: #607D8B;
23 |   background-color: #DDD;
24 |   left: .1em;
25 | }
26 | .heroes li.selected:hover {
27 |   background-color: #BBD8DC !important;
28 |   color: white;
29 | }
30 | .heroes .text {
31 |   position: relative;
32 |   top: -3px;
33 | }
34 | .heroes .badge {
35 |   display: inline-block;
36 |   font-size: small;
37 |   color: white;
38 |   padding: 0.8em 0.7em 0 0.7em;
39 |   background-color: #607D8B;
40 |   line-height: 1em;
41 |   position: relative;
42 |   left: -1px;
43 |   top: -4px;
44 |   height: 1.8em;
45 |   margin-right: .8em;
46 |   border-radius: 4px 0 0 4px;
47 | }
48 | button {
49 |   font-family: Arial;
50 |   background-color: #eee;
51 |   border: none;
52 |   padding: 5px 10px;
53 |   border-radius: 4px;
54 |   cursor: pointer;
55 |   cursor: hand;
56 | }
57 | button:hover {
58 |   background-color: #cfd8dc;
59 | }
60 | 
61 | 
62 | /*
63 | Copyright 2016 Google Inc. All Rights Reserved.
64 | Use of this source code is governed by an MIT-style license that
65 | can be found in the LICENSE file at http://angular.io/license
66 | */


--------------------------------------------------------------------------------
/app/heroes/heroes.component/heroes.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Router } from '@angular/router';
 3 | 
 4 | import { Models } from '../heroes-imports';
 5 | import { HeroService } from '../services/hero.service';
 6 | 
 7 | @Component({
 8 |   moduleId: module.id,
 9 |   selector: 'my-heroes',
10 |   templateUrl: 'heroes.component.html',
11 |   styleUrls: [ 'heroes.component.css' ]
12 | })
13 | export class HeroesComponent implements OnInit {
14 |   heroes: Models.Hero[];
15 |   selectedHero: Models.Hero;
16 | 
17 |   constructor(
18 |     private router: Router,
19 |     private heroService: HeroService) { }
20 | 
21 |   getHeroes(): void {
22 |     this.heroService.getHeroes().then(heroes => this.heroes = heroes);
23 |   }
24 | 
25 |   ngOnInit(): void {
26 |     this.getHeroes();
27 |   }
28 | 
29 |   onSelect(hero: Models.Hero): void {
30 |     this.selectedHero = hero;
31 |   }
32 | 
33 |   gotoDetail(): void {
34 |     this.router.navigate(['/detail', this.selectedHero.id]);
35 |   }
36 | }
37 | 
38 | 
39 | /*
40 | Copyright 2016 Google Inc. All Rights Reserved.
41 | Use of this source code is governed by an MIT-style license that
42 | can be found in the LICENSE file at http://angular.io/license
43 | */


--------------------------------------------------------------------------------
/app/heroes/heroes.module.ts:
--------------------------------------------------------------------------------
 1 | import '../rxjs-extensions';
 2 | 
 3 | import { NgModule }      from '@angular/core';
 4 | import { BrowserModule } from '@angular/platform-browser';
 5 | import { FormsModule }   from '@angular/forms';
 6 | import { HttpModule }    from '@angular/http';
 7 | 
 8 | import { HeroesRoutingModule } from './heroes-routing.module';
 9 | 
10 | import { HeroesComponent } from './heroes.component/heroes.component';
11 | import { HeroDetailComponent } from './hero-detail.component/hero-detail.component';
12 | import { HeroSearchComponent } from './hero-search.component/hero-search.component';
13 | import { HeroService } from './services/hero.service';
14 | 
15 | @NgModule({
16 |   imports: [
17 |     BrowserModule,
18 |     FormsModule,
19 |     HttpModule,
20 |     HeroesRoutingModule
21 |   ],
22 |   declarations: [
23 |     HeroDetailComponent,
24 |     HeroesComponent,
25 |     HeroSearchComponent
26 |   ],
27 |   providers: [ HeroService ],
28 |   exports: [ HeroSearchComponent ]
29 | })
30 | export class HeroesModule { }


--------------------------------------------------------------------------------
/app/heroes/services/hero.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | 
 3 | import { Models } from '../heroes-imports';
 4 | import { HEROES } from './mock-heroes';
 5 | 
 6 | @Injectable()
 7 | export class HeroService {
 8 |   getHeroes(): Promise<Models.Hero[]> {
 9 |     return Promise.resolve(HEROES);
10 |   }
11 | 
12 |   getHeroesSlowly(): Promise<Models.Hero[]> {
13 |     return new Promise(resolve => {
14 |       // Simulate server latency with 2 second delay
15 |       setTimeout(() => resolve(this.getHeroes()), 2000);
16 |     });
17 |   }
18 | 
19 |   getHero(id: number): Promise<Models.Hero> {
20 |     return this.getHeroes()
21 |       .then(heroes => heroes.find(hero => hero.id === id));
22 |   }
23 | }
24 | 
25 | /*
26 | Copyright 2016 Google Inc. All Rights Reserved.
27 | Use of this source code is governed by an MIT-style license that
28 | can be found in the LICENSE file at http://angular.io/license
29 | */


--------------------------------------------------------------------------------
/app/heroes/services/mock-heroes.ts:
--------------------------------------------------------------------------------
 1 | import { Models } from '../heroes-imports';
 2 | 
 3 | export var HEROES: Models.Hero[] = [
 4 |   {id: 11, name: 'Mr. Nice'},
 5 |   {id: 12, name: 'Narco'},
 6 |   {id: 13, name: 'Bombasto'},
 7 |   {id: 14, name: 'Celeritas'},
 8 |   {id: 15, name: 'Magneta'},
 9 |   {id: 16, name: 'RubberMan'},
10 |   {id: 17, name: 'Dynama'},
11 |   {id: 18, name: 'Dr IQ'},
12 |   {id: 19, name: 'Magma'},
13 |   {id: 20, name: 'Tornado'}
14 | ];
15 | 
16 | 
17 | /*
18 | Copyright 2016 Google Inc. All Rights Reserved.
19 | Use of this source code is governed by an MIT-style license that
20 | can be found in the LICENSE file at http://angular.io/license
21 | */


--------------------------------------------------------------------------------
/app/main-aot.ts:
--------------------------------------------------------------------------------
 1 | import { platformBrowser } from '@angular/platform-browser';
 2 | import { enableProdMode } from "@angular/core";
 3 | 
 4 | import { AppModuleNgFactory } from '../app-aot/app/app.module.ngfactory';
 5 | 
 6 | enableProdMode();
 7 | 
 8 | platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
 9 | 
10 | 
11 | /*
12 | Copyright 2016 Google Inc. All Rights Reserved.
13 | Use of this source code is governed by an MIT-style license that
14 | can be found in the LICENSE file at http://angular.io/license
15 | */


--------------------------------------------------------------------------------
/app/main.ts:
--------------------------------------------------------------------------------
 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 2 | 
 3 | import { AppModule } from './app.module';
 4 | 
 5 | platformBrowserDynamic().bootstrapModule(AppModule);
 6 | 
 7 | 
 8 | /*
 9 | Copyright 2016 Google Inc. All Rights Reserved.
10 | Use of this source code is governed by an MIT-style license that
11 | can be found in the LICENSE file at http://angular.io/license
12 | */


--------------------------------------------------------------------------------
/app/models/hero.ts:
--------------------------------------------------------------------------------
 1 | export class Hero {
 2 |   id: number;
 3 |   name: string;
 4 | }
 5 | 
 6 | 
 7 | /*
 8 | Copyright 2016 Google Inc. All Rights Reserved.
 9 | Use of this source code is governed by an MIT-style license that
10 | can be found in the LICENSE file at http://angular.io/license
11 | */


--------------------------------------------------------------------------------
/app/models/models-exports.ts:
--------------------------------------------------------------------------------
1 | export * from "./hero";


--------------------------------------------------------------------------------
/app/rxjs-extensions.ts:
--------------------------------------------------------------------------------
 1 | // Observable class extensions
 2 | import 'rxjs/add/observable/of';
 3 | import 'rxjs/add/observable/throw';
 4 | 
 5 | // Observable operators
 6 | import 'rxjs/add/operator/catch';
 7 | import 'rxjs/add/operator/debounceTime';
 8 | import 'rxjs/add/operator/distinctUntilChanged';
 9 | import 'rxjs/add/operator/do';
10 | import 'rxjs/add/operator/filter';
11 | import 'rxjs/add/operator/map';
12 | import 'rxjs/add/operator/switchMap';
13 | 
14 | 
15 | /*
16 | Copyright 2016 Google Inc. All Rights Reserved.
17 | Use of this source code is governed by an MIT-style license that
18 | can be found in the LICENSE file at http://angular.io/license
19 | */


--------------------------------------------------------------------------------
/assets/gif-load.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PFight/angular-gulp-starter/c2ec04544d0f624de07ec013d1c02c10fc20c129/assets/gif-load.gif


--------------------------------------------------------------------------------
/assets/global.css:
--------------------------------------------------------------------------------
  1 | .test-app .app-loading {
  2 |   text-align: center;
  3 |   margin-top: 100px;
  4 |   font-style: italic;
  5 |   color: gray;
  6 |   line-height: 20px; }
  7 |   .test-app .app-loading .loading-icon {
  8 |     background-image: url("./gif-load.gif");
  9 |     width: 20px;
 10 |     height: 20px;
 11 |     background-size: 20px 20px;
 12 |     display: inline-block;
 13 |     vertical-align: middle; }
 14 |   .test-app .app-loading .loading-text {
 15 |     vertical-align: middle;
 16 |     display: inline-block; }
 17 | 
 18 | h1 {
 19 |   color: #369;
 20 |   font-family: Arial, Helvetica, sans-serif;
 21 |   font-size: 250%; }
 22 | 
 23 | h2, h3 {
 24 |   color: #444;
 25 |   font-family: Arial, Helvetica, sans-serif;
 26 |   font-weight: lighter; }
 27 | 
 28 | body {
 29 |   margin: 2em; }
 30 | 
 31 | body, input[text], button {
 32 |   color: #888;
 33 |   font-family: Cambria, Georgia; }
 34 | 
 35 | a {
 36 |   cursor: pointer; }
 37 | 
 38 | button {
 39 |   font-family: Arial;
 40 |   background-color: #eee;
 41 |   border: none;
 42 |   padding: 5px 10px;
 43 |   border-radius: 4px;
 44 |   cursor: pointer; }
 45 |   button:hover {
 46 |     background-color: #cfd8dc; }
 47 |   button:disabled {
 48 |     background-color: #eee;
 49 |     color: #aaa;
 50 |     cursor: auto; }
 51 | 
 52 | /* Navigation link styles */
 53 | nav a {
 54 |   padding: 5px 10px;
 55 |   text-decoration: none;
 56 |   margin-right: 10px;
 57 |   margin-top: 10px;
 58 |   display: inline-block;
 59 |   background-color: #eee;
 60 |   border-radius: 4px; }
 61 |   nav a:visited, nav a:link {
 62 |     color: #607D8B; }
 63 |   nav a:hover {
 64 |     color: #039be5;
 65 |     background-color: #CFD8DC; }
 66 |   nav a.active {
 67 |     color: #039be5; }
 68 | 
 69 | /* items class */
 70 | .items {
 71 |   margin: 0 0 2em 0;
 72 |   list-style-type: none;
 73 |   padding: 0;
 74 |   width: 24em; }
 75 |   .items li {
 76 |     cursor: pointer;
 77 |     position: relative;
 78 |     left: 0;
 79 |     background-color: #EEE;
 80 |     margin: .5em;
 81 |     padding: .3em 0;
 82 |     height: 1.6em;
 83 |     border-radius: 4px; }
 84 |     .items li:hover {
 85 |       color: #607D8B;
 86 |       background-color: #DDD;
 87 |       left: .1em; }
 88 |     .items li.selected {
 89 |       background-color: #CFD8DC;
 90 |       color: white; }
 91 |       .items li.selected:hover {
 92 |         background-color: #BBD8DC; }
 93 |   .items .text {
 94 |     position: relative;
 95 |     top: -3px; }
 96 |   .items .badge {
 97 |     display: inline-block;
 98 |     font-size: small;
 99 |     color: white;
100 |     padding: 0.8em 0.7em 0 0.7em;
101 |     background-color: #607D8B;
102 |     line-height: 1em;
103 |     position: relative;
104 |     left: -1px;
105 |     top: -4px;
106 |     height: 1.8em;
107 |     margin-right: .8em;
108 |     border-radius: 4px 0 0 4px; }
109 | 
110 | /* everywhere else */
111 | * {
112 |   font-family: Arial, Helvetica, sans-serif; }
113 | 
114 | /*
115 | Copyright 2016 Google Inc. All Rights Reserved.
116 | Use of this source code is governed by an MIT-style license that
117 | can be found in the LICENSE file at http://angular.io/license
118 | */
119 | 


--------------------------------------------------------------------------------
/assets/global.min.css:
--------------------------------------------------------------------------------
1 | .test-app .app-loading{text-align:center;margin-top:100px;font-style:italic;color:#808080;line-height:20px;}.test-app .app-loading .loading-icon{background-image:url("gif-load.gif");width:20px;height:20px;background-size:20px 20px;display:inline-block;vertical-align:middle;}.test-app .app-loading .loading-text{vertical-align:middle;display:inline-block;}h1{color:#369;font-family:Arial,Helvetica,sans-serif;font-size:250%;}h2,h3{color:#444;font-family:Arial,Helvetica,sans-serif;font-weight:lighter;}body{margin:2em;}body,input[text],button{color:#888;font-family:Cambria,Georgia;}a{cursor:pointer;}button{font-family:Arial;background-color:#eee;border:none;padding:5px 10px;border-radius:4px;cursor:pointer;}button:hover{background-color:#cfd8dc;}button:disabled{background-color:#eee;color:#aaa;cursor:auto;}nav a{padding:5px 10px;text-decoration:none;margin-right:10px;margin-top:10px;display:inline-block;background-color:#eee;border-radius:4px;}nav a:visited,nav a:link{color:#607d8b;}nav a:hover{color:#039be5;background-color:#cfd8dc;}nav a.active{color:#039be5;}.items{margin:0 0 2em 0;list-style-type:none;padding:0;width:24em;}.items li{cursor:pointer;position:relative;left:0;background-color:#eee;margin:.5em;padding:.3em 0;height:1.6em;border-radius:4px;}.items li:hover{color:#607d8b;background-color:#ddd;left:.1em;}.items li.selected{background-color:#cfd8dc;color:#fff;}.items li.selected:hover{background-color:#bbd8dc;}.items .text{position:relative;top:-3px;}.items .badge{display:inline-block;font-size:small;color:#fff;padding:.8em .7em 0 .7em;background-color:#607d8b;line-height:1em;position:relative;left:-1px;top:-4px;height:1.8em;margin-right:.8em;border-radius:4px 0 0 4px;}*{font-family:Arial,Helvetica,sans-serif;}


--------------------------------------------------------------------------------
/assets/global.scss:
--------------------------------------------------------------------------------
  1 | // App loading placeholder styles
  2 | .test-app {
  3 |     .app-loading {
  4 |         text-align: center;
  5 |         margin-top: 100px;
  6 |         font-style: italic;
  7 |         color: gray;
  8 |         line-height: 20px;
  9 | 
 10 |         .loading-icon {
 11 |             background-image: url('./gif-load.gif');
 12 |             width: 20px;
 13 |             height: 20px;
 14 |             background-size: 20px 20px;
 15 |             display: inline-block;
 16 |             vertical-align: middle;
 17 |         }
 18 | 
 19 |         .loading-text {
 20 |             vertical-align: middle;
 21 |             display: inline-block;
 22 |         }
 23 |     }
 24 | }
 25 | 
 26 | // Angular Tour of Heroes styles
 27 | 
 28 | h1 {
 29 |     color: #369;
 30 |     font-family: Arial, Helvetica, sans-serif;
 31 |     font-size: 250%;
 32 | }
 33 | h2, h3 {
 34 |     color: #444;
 35 |     font-family: Arial, Helvetica, sans-serif;
 36 |     font-weight: lighter;
 37 | }
 38 | body {
 39 |     margin: 2em;
 40 | }
 41 | body, input[text], button {
 42 |     color: #888;
 43 |     font-family: Cambria, Georgia;
 44 | }
 45 | a {
 46 |     cursor: pointer;
 47 | }
 48 | button {
 49 |     font-family: Arial;
 50 |     background-color: #eee;
 51 |     border: none;
 52 |     padding: 5px 10px;
 53 |     border-radius: 4px;
 54 |     cursor: pointer;
 55 | 
 56 |     &:hover {
 57 |         background-color: #cfd8dc;
 58 |     }
 59 |     &:disabled {
 60 |         background-color: #eee;
 61 |         color: #aaa;
 62 |         cursor: auto;
 63 |     }
 64 | }
 65 | 
 66 | /* Navigation link styles */
 67 | nav a {
 68 |     padding: 5px 10px;
 69 |     text-decoration: none;
 70 |     margin-right: 10px;
 71 |     margin-top: 10px;
 72 |     display: inline-block;
 73 |     background-color: #eee;
 74 |     border-radius: 4px;
 75 | 
 76 |     &:visited, &:link {
 77 |         color: #607D8B;
 78 |     }
 79 |     &:hover {
 80 |         color: #039be5;
 81 |         background-color: #CFD8DC;
 82 |     }
 83 |     &.active {
 84 |         color: #039be5;
 85 |     }
 86 | }
 87 | 
 88 | /* items class */
 89 | .items {
 90 |     margin: 0 0 2em 0;
 91 |     list-style-type: none;
 92 |     padding: 0;
 93 |     width: 24em;
 94 |  
 95 |     li {
 96 |         cursor: pointer;
 97 |         position: relative;
 98 |         left: 0;
 99 |         background-color: #EEE;
100 |         margin: .5em;
101 |         padding: .3em 0;
102 |         height: 1.6em;
103 |         border-radius: 4px;
104 | 
105 |         &:hover {
106 |           color: #607D8B;
107 |           background-color: #DDD;
108 |           left: .1em;
109 |         }
110 |         &.selected {
111 |             background-color: #CFD8DC;
112 |             color: white;
113 |             &:hover {
114 |               background-color: #BBD8DC;
115 |             }
116 |         }
117 |     }
118 | 
119 |     .text {
120 |       position: relative;
121 |       top: -3px;
122 |     }
123 | 
124 |     .badge {
125 |         display: inline-block;
126 |         font-size: small;
127 |         color: white;
128 |         padding: 0.8em 0.7em 0 0.7em;
129 |         background-color: #607D8B;
130 |         line-height: 1em;
131 |         position: relative;
132 |         left: -1px;
133 |         top: -4px;
134 |         height: 1.8em;
135 |         margin-right: .8em;
136 |         border-radius: 4px 0 0 4px;
137 |     }
138 | }
139 | 
140 | /* everywhere else */
141 | * {
142 |   font-family: Arial, Helvetica, sans-serif;
143 | }
144 | 
145 | 
146 | /*
147 | Copyright 2016 Google Inc. All Rights Reserved.
148 | Use of this source code is governed by an MIT-style license that
149 | can be found in the LICENSE file at http://angular.io/license
150 | */


--------------------------------------------------------------------------------
/build-tools/build-scripts/bundling.js:
--------------------------------------------------------------------------------
  1 | var gulp = require('gulp');
  2 | var concat = require('gulp-concat');
  3 | var uglify = require('gulp-uglifyjs');
  4 | var ts = require('gulp-typescript');
  5 | var print = require('gulp-print');
  6 | var file = require('gulp-file');
  7 | var es = require('event-stream');
  8 | var fileExists = require('file-exists');
  9 | var gutil = require('gulp-util');
 10 | var colors = gutil.colors;
 11 | var rename = require('gulp-rename');
 12 | var rollup = require('rollup-stream');
 13 | var sourcemaps = require('gulp-sourcemaps');
 14 | var source = require('vinyl-source-stream');
 15 | var buffer = require('vinyl-buffer');
 16 | var nodePath = require('path');
 17 | var streamqueue = require('streamqueue');
 18 | var fs = require("fs");
 19 | var gulpif = require('gulp-if');
 20 | var globIntersection = require("glob-intersection");
 21 | 
 22 | var conf = require('./../variables.js');
 23 | var bundling = {};
 24 | 
 25 | 
 26 | 
 27 | /** Performs concatenation of specified packages to single bundle */
 28 | bundling.concatBundle = function(name, paths, options) {
 29 |     return bundleSingleFileHelper(name, options, (outputFileName) => {
 30 |         return gulp.src(paths)
 31 |             .pipe(print(f => bundleIn(name, f)))
 32 |             .pipe(concat(outputFileName))
 33 |             .pipe(gulpif(options.uglify, uglify()))
 34 |             .pipe(gulp.dest(options.destDir))
 35 |             .pipe(print(f => bundleOut(f, 'concatenation done!')));
 36 |     });
 37 | }
 38 | 
 39 | /** Uses rollup and tsc to make es5 bundle, that contains all specified packages mapped for use with SystemJS */
 40 | bundling.rollupPackages = function (name, packagesMap, rollupOptions, options) {
 41 |     return bundleSingleFileHelper(name, options, (outputFileName) => {
 42 |         var rollupEntry;
 43 |         var createRollupEntry = function () {
 44 |             var generate = generateRollupEntry(packagesMap, name);
 45 |             rollupEntry = generate.resultFiles[0];
 46 |             return generate.stream;
 47 |         }
 48 |         var makeRollup = function () {
 49 |             var config = getRollupConfig(rollupOptions, rollupEntry);
 50 |             var rolling = rollupBundle(config, outputFileName, options.destDir, options.uglify);
 51 |             return rolling.stream;
 52 |         }
 53 |         return streamqueue({ objectMode: true }, createRollupEntry, makeRollup);
 54 |     });
 55 | }
 56 | 
 57 | /** Uses rollup and tsc to make es5 bundle from single entry file */
 58 | bundling.rollupFromEntry = function (name, rollupEntry, rollupOptions, options) {
 59 |     return bundleSingleFileHelper(name, options, (outputFileName) => {
 60 |         var config = getRollupConfig(rollupOptions, rollupEntry);
 61 |         var rolling = rollupBundle(config, outputFileName, options.destDir, options.uglify);
 62 |         return rolling.stream;
 63 |     });
 64 | }
 65 | 
 66 | /* -------------------- Helpers ----------------------------*/
 67 | 
 68 | function bundleIn(name, file) {
 69 |     return colors.gray("[" + name + "] <-- ") + file;
 70 | }
 71 | 
 72 | function bundleOut(name, file) {
 73 |     return colors.gray("[" + name + "] --> ") + colors.magenta(file);
 74 | }
 75 | 
 76 | function bundleSingleFileHelper(name, options, bundleFunc) {
 77 |     var result = {};
 78 |     var outputFileName = name;
 79 |     var outputFilePath = nodePath.join(options.destDir || "./", outputFileName);
 80 | 
 81 |     result.resultFiles = [outputFilePath];
 82 |     if (!fileExists(outputFilePath) || options.cache === false) {
 83 |         result.stream = bundleFunc(outputFileName);
 84 |     } else {
 85 |         gutil.log(bundleOut(name, outputFilePath) + colors.gray(" already exists, skipping..."));
 86 |         result.stream = es.merge();
 87 |     }
 88 |     return result;
 89 | }
 90 | 
 91 | /** Generates .ts file, that imports all specified modules */
 92 | function generateRollupEntry(packagesMap, name) {
 93 |     var rollupEntryName = conf.TEMP_DIR + "/" + name + "-rollup-entry.generated.js";
 94 |     var pakages = Object.keys(packagesMap);
 95 |     var content = "";
 96 |     for (var pkgNum = 0; pkgNum < pakages.length; pkgNum++) {
 97 |         var packageName = pakages[pkgNum];
 98 |         var packagePath = packagesMap[packageName];
 99 | 
100 |         var pkgVar = "pkg" + pkgNum;
101 |         content += (
102 |             "import * as " + pkgVar + " from '" + packagePath + "'; \n" +
103 |             "System && System.set && System.set('" + packageName + "', System.newModule(" + pkgVar + "));\n\n"
104 |         );
105 |         gutil.log(bundleIn(nodePath.relative("./", rollupEntryName), packagePath));
106 |     }
107 |     var result = {};
108 |     result.resultFiles = [rollupEntryName];
109 |     result.stream = file(rollupEntryName, content, { src: true })
110 |         .pipe(gulp.dest('./'));
111 |     return result;
112 | };
113 | 
114 | /** Loads defaults from config file and adds support for GLOB matching in 'external' option */
115 | function getRollupConfig(rollupOptions, rollupEntry, configFile) {
116 |     var resultConfig = require(configFile || conf.ROLLUP_CONFIG);
117 |     resultConfig.entry = rollupEntry;
118 |     resultConfig.format = resultConfig.format || "cjs";
119 |     if (rollupOptions) {
120 |         for (var option in rollupOptions) {
121 |             if (option == "external") {
122 |                 // Support for GLOB matching in external option
123 |                 resultConfig.external = function (id) {
124 |                     return rollupOptions.external.some(
125 |                         x => globIntersection(x, id)
126 |                     );
127 |                 };
128 |             } else {
129 |                 resultConfig[option] = rollupOptions[option];
130 |             }
131 |         }
132 |     }
133 |     return resultConfig;
134 | }
135 | 
136 | /** Calls rollup and traspiles result to es5 */
137 | function rollupBundle(rollupConfig, outputFileName, destDir, uglifyResult) {
138 |     gutil.log(bundleOut(rollupConfig.entry, outputFileName + " " + colors.gray("rolling up...")));
139 |     var result = {};
140 |     result.resultFiles = [nodePath.join(destDir || "./", outputFileName)];
141 |     result.stream = rollup(rollupConfig)
142 |         .pipe(source(outputFileName, './'))
143 |         .pipe(buffer())
144 |         .pipe(ts({
145 |             target: "es5",
146 |             allowJs: true,
147 |             module: "commonjs",
148 |             moduleResolution: "node"
149 |         }))
150 |         .pipe(gulpif(uglifyResult, uglify()))
151 |         .pipe(gulp.dest(destDir || "./"))
152 |         .pipe(print(f => bundleOut(f, "rollup done!")));
153 |     return result;
154 | }
155 | 
156 | module.exports = bundling;
157 | 


--------------------------------------------------------------------------------
/build-tools/build-scripts/compilation.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var ts = require('gulp-typescript');
 3 | var print = require('gulp-print');
 4 | var sass = require('gulp-sass');
 5 | var gutil = require('gulp-util');
 6 | var colors = gutil.colors;
 7 | var sourcemaps = require('gulp-sourcemaps');
 8 | var gulpif = require('gulp-if');
 9 | var run = require('gulp-run');
10 | var ngc = require('gulp-ngc');
11 | 
12 | var compilation = {};
13 | 
14 | compilation.compileTypescript = function (tsconfigFile, destDir) {
15 |     gutil.log("Compiling typescript " + colors.magenta(tsconfigFile));
16 |     var tsProject = ts.createProject(tsconfigFile);
17 |     return tsProject.src()
18 |         .pipe(tsProject())
19 |         .js
20 |         .pipe(gulp.dest(destDir))
21 |         .pipe(print())
22 |         .on('end', () => gutil.log(gutil.colors.gray('[' + tsconfigFile + '] --> ') +
23 |             "compilation of typescript done (dest dir "
24 |             + gutil.colors.magenta(destDir) + ')'));
25 | }
26 | 
27 | compilation.compileSass = function(sourceDir, targetDir) {
28 |     gutil.log("Compiling SCSS in " + colors.magenta(sourceDir));
29 |     return gulp.src(sourceDir + '/**/*.scss')
30 |         .pipe(sass().on('error', sass.logError))
31 |         .pipe(gulp.dest(targetDir || sourceDir))
32 |         .pipe(print())
33 |         .on('end', () => gutil.log("Compilation of SCSS done."));
34 | }
35 | 
36 | compilation.compileAngularTemplates = function(configFilePath) {
37 |     gutil.log("Compiling templates with " + gutil.colors.magenta(configFilePath));
38 |     return ngc(configFilePath)
39 |         .on('end', () => gutil.log(
40 |             gutil.colors.gray('[' + configFilePath + '] --> ') +
41 |             "compilation of templates done."));
42 | }
43 | 
44 | 
45 | module.exports = compilation;
46 | 


--------------------------------------------------------------------------------
/build-tools/build-scripts/path-tools.js:
--------------------------------------------------------------------------------
 1 | var nodePath = require('path');
 2 | var resolve = require('browser-resolve');
 3 | var fs = require("fs");
 4 | var path = require('path');
 5 | 
 6 | var pathTools = {};
 7 | 
 8 | pathTools.normalizePathSeparators = function(path) {
 9 |     // Browser do not understands '\', so replace it with '/'
10 |     return path.split('\\').join('/');
11 | }
12 | 
13 | pathTools.resolvePackagePath = function(packageName, relativeDir) {
14 |     var pkgPath = resolve.sync(packageName);
15 |     var resolvedPath = nodePath.relative(relativeDir || "./", pkgPath);
16 |     var normalizedPath = pathTools.normalizePathSeparators(resolvedPath);
17 |     return normalizedPath;
18 | }
19 | 
20 | pathTools.resolvePackage = function (packageMap, packageName, packagePath) {
21 |     packageMap[packageName] = pathTools.resolvePackagePath(packagePath || packageName);
22 | }
23 | 
24 | 
25 | /** List all files in a directory recursively in a synchronous fashion */
26 | pathTools.walkFilesSync = function (dir, visitor) {
27 |     var files = fs.readdirSync(dir);
28 |     files.forEach(function (file) {
29 |         if (fs.statSync(path.join(dir, file)).isDirectory()) {
30 |             pathTools.walkFilesSync(path.join(dir, file), visitor);
31 |         }
32 |         else {
33 |             let filePath = path.join(dir, file);
34 |             visitor(filePath);
35 |         }
36 |     });
37 | };
38 | 
39 | module.exports = pathTools;
40 | 


--------------------------------------------------------------------------------
/build-tools/express-http-server.dev.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var compression = require('compression');
 3 | var openurl = require("openurl");
 4 | var nodePath = require('path');
 5 | 
 6 | var app = express();
 7 | 
 8 | app.use(express.static("./"));
 9 | 
10 | app.get('/*', function(req, res, next) {
11 |     var ext = nodePath.extname(req.path);
12 |     if (!ext) {
13 |         // Just send the index.html for routes
14 |         res.sendFile('./index.html', { root: "./" });
15 |     } else {
16 |         return next();
17 |     }
18 | });
19 | 
20 | app.get('*', function(req, res){
21 |   res.send('Not found', 404);
22 | });
23 | 
24 | setTimeout(()=> openurl.open("http://localhost:8181"), 500);
25 | 
26 | app.listen(8181, function () {
27 |   console.log('Listening on port 8181');
28 | });
29 | 


--------------------------------------------------------------------------------
/build-tools/express-http-server.prod.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var compression = require('compression');
 3 | var openurl = require("openurl");
 4 | var nodePath = require('path');
 5 | 
 6 | var app = express();
 7 | 
 8 | 
 9 | app.use(compression());
10 | app.use(express.static("./dist"));
11 | 
12 | app.get('/*', function(req, res, next) {
13 |     var ext = nodePath.extname(req.route.path);
14 |     if (!ext) {
15 |         // Just send the index.html for routes
16 |         res.sendFile('index.html', { root: "./dist" });
17 |     } else {
18 |         return next();
19 |     }
20 | });
21 | 
22 | app.get('*', function(req, res){
23 |   res.send('Not found', 404);
24 | });
25 | 
26 | setTimeout(()=> openurl.open("http://localhost:8282"), 500);
27 | 
28 | app.listen(8282, function () {
29 |   console.log('Listening on port 8282');
30 | });
31 | 


--------------------------------------------------------------------------------
/build-tools/rollup-config.js:
--------------------------------------------------------------------------------
 1 | var nodeResolve = require('rollup-plugin-node-resolve');
 2 | var nodePath = require("path");
 3 | var conf = require('./variables.js');
 4 | 
 5 | class RollupNG2 {
 6 |   resolveId(id, from) {
 7 |     if (id.startsWith('rxjs/')) {
 8 |         return nodePath.resolve(`${conf.RXJS_TO_ES_DIR}/${id.replace('rxjs/', '')}.js`);
 9 |     }
10 |     return undefined;
11 |   }
12 | }
13 | 
14 | const rollupNG2 = () => new RollupNG2();
15 | 
16 | module.exports = {
17 |   sourceMap: false,
18 |   treeshake: true,
19 |   format: 'iife',
20 |   context: 'window',
21 |   plugins: [
22 |     rollupNG2(),
23 |     nodeResolve({
24 |       jsnext: true, main: true, module: true
25 |     })
26 |   ],
27 |   onwarn: function ( message ) {
28 |     console.warn( message );
29 |   }
30 | };
31 | 


--------------------------------------------------------------------------------
/build-tools/systemjs-config.js:
--------------------------------------------------------------------------------
 1 | System.config({
 2 |   defaultJSExtensions: true,
 3 |   paths: {
 4 |     "*": "node_modules/*",
 5 |     "app/*": "app/*",
 6 |     "dist-dev/*": "dist-dev/*",
 7 |     "@angular/common": "node_modules/@angular/common/bundles/common.umd",
 8 |     "@angular/core": "node_modules/@angular/core/bundles/core.umd",
 9 |     "@angular/http": "node_modules/@angular/http/bundles/http.umd",
10 |     "@angular/compiler": "node_modules/@angular/compiler/bundles/compiler.umd",
11 |     "@angular/platform-browser-dynamic": "node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd",
12 |     "@angular/platform-browser": "node_modules/@angular/platform-browser/bundles/platform-browser.umd",
13 |     "@angular/router": "node_modules/@angular/router/bundles/router.umd",
14 |     "@angular/forms": "node_modules/@angular/forms/bundles/forms.umd"
15 |   },
16 |   packageConfigPaths: ["node_modules/*/package.json"]
17 | });
18 | 


--------------------------------------------------------------------------------
/build-tools/tsconfig.rxjs-to-es6.json:
--------------------------------------------------------------------------------
1 | {
2 |     "compilerOptions": {
3 |         "target": "es6",
4 |         "module": "es6",
5 |         "moduleResolution": "node"
6 |     },
7 |     "include": [ "../node_modules/rxjs/src/**/*.ts" ]
8 | }
9 | 


--------------------------------------------------------------------------------
/build-tools/variables.js:
--------------------------------------------------------------------------------
 1 | var nodePath = require('path');
 2 | 
 3 | var conf = {};
 4 | var root = nodePath.resolve(__dirname + "/..") + "/";
 5 | 
 6 | var APP_DIR_NAME = "app";
 7 | conf.APP_DIR = root + APP_DIR_NAME;
 8 | conf.TEMP_DIR = root + "temp";
 9 | conf.APP_PROD = root + "temp/app-prod-compiled";
10 | conf.APP_ROLLUP_ENTRY = conf.APP_PROD + "/" + APP_DIR_NAME + "/main-aot.js";
11 | conf.ROLLUP_CONFIG = root + "build-tools/rollup-config.js";
12 | conf.RXJS_TO_ES_TSCONFIG = root + "build-tools/tsconfig.rxjs-to-es6.json";
13 | conf.RXJS_TO_ES_DIR = conf.TEMP_DIR + "/rxjs-es";
14 | conf.NGC_TSCONFIG = root + "tsconfig.ngc.json";
15 | conf.PROD_TSCONFIG = root + "tsconfig.prod.json";
16 | conf.TSCONFIG = root + "tsconfig.json";
17 | 
18 | conf.DIST_DEV_DIR = root + "./dist-dev";
19 | conf.DIST_DIR = root + "./dist";
20 | conf.AOT_DIR = root + "app-aot";
21 | conf.ASSETS_DIR = root + "assets"
22 | 
23 | module.exports = conf;
24 | 


--------------------------------------------------------------------------------
/build.common.js:
--------------------------------------------------------------------------------
 1 | var es = require('event-stream');
 2 | var gutil = require('gulp-util');
 3 | var fs = require("fs");
 4 | 
 5 | var conf = require('./build-tools/variables.js');
 6 | var compilation = require('./build-tools/build-scripts/compilation.js');
 7 | 
 8 | var build = {};
 9 | 
10 | build.rxjsToEs = function (context) {
11 |     if (!fs.existsSync(conf.RXJS_TO_ES_DIR)) {
12 |         return compilation.compileTypescript(
13 |             conf.RXJS_TO_ES_TSCONFIG, conf.RXJS_TO_ES_DIR);
14 |     } else {
15 |         gutil.log(gutil.colors.magenta(conf.RXJS_TO_ES_DIR) + " already exists, skipping...");
16 |         return es.merge();
17 |     }
18 | }
19 | 
20 | module.exports = build;
21 | 


--------------------------------------------------------------------------------
/build.dev.js:
--------------------------------------------------------------------------------
 1 | var streamqueue = require('streamqueue')
 2 | var es = require('event-stream');
 3 | var del = require('del');
 4 | var fs = require("fs");
 5 | var path = require('path');
 6 | var resolve = require('browser-resolve');
 7 | var gutil = require('gulp-util');
 8 | 
 9 | var conf = require('./build-tools/variables.js');
10 | var bundling = require('./build-tools/build-scripts/bundling.js');
11 | var pathTools = require('./build-tools/build-scripts/path-tools.js');
12 | var compilation = require('./build-tools/build-scripts/compilation.js');
13 | var common = require('./build.common.js');
14 | 
15 | var build = {};
16 | 
17 | build.rxjsBundle = function (context) {
18 |     var rxjsEsDir = pathTools.normalizePathSeparators(conf.RXJS_TO_ES_DIR);
19 | 
20 |     // Make list of all rxjs modules
21 |     var packagesMap = {};
22 |     pathTools.walkFilesSync(rxjsEsDir, filePath => {
23 |         // Skip MicsJSDoc due to errors
24 |         if (filePath.indexOf('Rx.js') < 0 && filePath.indexOf('MiscJSDoc.js') < 0) {
25 |             // Get package name, removing folder path, extension and replacing \ to /
26 |             let packageName = pathTools.normalizePathSeparators(filePath)
27 |                 .replace(rxjsEsDir, 'rxjs').replace('.js', '');
28 |             packagesMap[packageName] = packageName;
29 |         }
30 |     });
31 | 
32 |     // Bundle it to the one file
33 |     var bundleName = "rxjs.js";
34 |     var bundle = bundling.rollupPackages(bundleName, packagesMap, { format: "cjs" },
35 |         { destDir: context.destDir, cache: true, uglify: false });
36 |     return bundle.stream;
37 | }
38 | 
39 | build.bundle = function(context) {
40 |     return streamqueue({ objectMode: true },
41 |         () => common.rxjsToEs(context),
42 |         () => build.rxjsBundle(context)
43 |     );
44 | }
45 | 
46 | build.compile = function(context) {
47 |     return es.merge([
48 |         compilation.compileTypescript(conf.TSCONFIG, conf.APP_DIR),
49 |         compilation.compileSass(conf.APP_DIR),
50 | 		compilation.compileSass(conf.ASSETS_DIR)
51 |     ]);
52 | }
53 | 
54 | build.build = function(context) {
55 |     return streamqueue({ objectMode: true },
56 |         () => build.compile(context),
57 |         () => build.bundle(context)
58 |     );
59 | }
60 | 
61 | build.clean = function(context) {
62 |     return del([
63 |         conf.APP_DIR + '/**/*.js',
64 |         conf.APP_DIR + '/**/*.js.map',
65 |         context.destDir,
66 |     ]);
67 | }
68 | 
69 | module.exports = build;
70 | 


--------------------------------------------------------------------------------
/build.prod.js:
--------------------------------------------------------------------------------
  1 | var gulp = require('gulp');
  2 | var gutil = require('gulp-util');
  3 | var colors = gutil.colors;
  4 | var nodePath = require('path');
  5 | var streamqueue = require('streamqueue');
  6 | var es = require('event-stream');
  7 | var del = require("del");
  8 | var vinylPaths = require('vinyl-paths');
  9 | var replace = require('gulp-replace');
 10 | var print = require('gulp-print');
 11 | 
 12 | 
 13 | var conf = require('./build-tools/variables.js');
 14 | var bundling = require('./build-tools/build-scripts/bundling.js');
 15 | var pathTools = require('./build-tools/build-scripts/path-tools.js');
 16 | var compilation = require('./build-tools/build-scripts/compilation.js');
 17 | var common = require('./build.common.js');
 18 | 
 19 | var build = {};
 20 | 
 21 | build.compile = function(context) {
 22 |     var compileProdSaas = function() {
 23 |         return compilation.compileSass(conf.APP_DIR);
 24 |     };
 25 |     var compileProdTemplates = function() {
 26 |         return compilation.compileAngularTemplates(conf.NGC_TSCONFIG);
 27 |     }
 28 |     var compileProdTypescript = function() {
 29 |         return compilation.compileTypescript(conf.PROD_TSCONFIG, conf.APP_PROD);
 30 |     }
 31 |     var rxjsToEs = function () {
 32 |         return 
 33 |     }
 34 | 
 35 |     return streamqueue({ objectMode: true },
 36 |         common.rxjsToEs(context),
 37 |         compileProdSaas,
 38 |         compileProdTemplates,
 39 |         compileProdTypescript
 40 |     );
 41 | };
 42 | 
 43 | 
 44 | build.commonBundle = function (context) {
 45 |     var packages = [
 46 |         pathTools.resolvePackagePath("zone.js"),
 47 |         pathTools.resolvePackagePath("reflect-metadata"),
 48 |         pathTools.resolvePackagePath("es6-shim"),
 49 |         pathTools.resolvePackagePath("tslib")
 50 |     ];
 51 | 
 52 |     var bundle = bundling.concatBundle("common.min.js", packages,
 53 |         { destDir: context.destDir, uglify: true, cache: true });
 54 |     return bundle.stream;
 55 | };
 56 | 
 57 | build.appBundle = function(context){
 58 |     let mainEntry = nodePath.join(conf.APP_ROLLUP_ENTRY);
 59 |     var bundle = bundling.rollupFromEntry("app.min.js", mainEntry, { format: "iife" },
 60 |         { destDir: context.destDir, uglify: true, cache: false });
 61 |     return bundle.stream;
 62 | };
 63 | 
 64 | build.assets = function(context) {
 65 |     return gulp.src( "./assets/**/*.*")
 66 |       .pipe(gulp.dest(nodePath.join(context.destDir, "assets")));
 67 | }
 68 | 
 69 | build.bundle = function(context) {
 70 |     return es.merge(
 71 |         build.commonBundle(context),
 72 |         build.appBundle(context),
 73 |         build.assets(context)
 74 |     );
 75 | }
 76 | 
 77 | build.processIndexHtml = function (context) {
 78 |     return gulp.src(context.indexHtmlPath)
 79 |         .pipe(replace('<!-- prod --', '<!-- prod -->'))
 80 |         .pipe(replace('-- end-prod -->', '<!-- end-prod -->'))
 81 |         .pipe(replace('<!-- dev -->', '<!-- dev --'))
 82 |         .pipe(replace('<!-- end-dev -->', '-- end-dev -->'))
 83 |         .pipe(gulp.dest(context.destDir))
 84 |         .pipe(print(file => { gutil.log('Processed --> ' + file) }));
 85 | }
 86 | 
 87 | build.build = function(context) {
 88 |     return streamqueue({ objectMode: true },
 89 |         () => build.clean(context),
 90 |         () => build.compile(context),
 91 |         () => build.bundle(context),
 92 |         () => build.processIndexHtml(context)
 93 |     );
 94 | }
 95 | 
 96 | build.clean = function (context) {
 97 |     gutil.log("Cleaning...");
 98 |     return gulp.src([
 99 |         conf.APP_DIR + "/**/*.js",
100 |         conf.APP_DIR + '/**/*.js.map',
101 |         conf.APP_DIR + '/**/*.metadata.json',
102 |         conf.DIST_DIR,
103 |         conf.AOT_DIR,
104 |         context.destDir
105 |     ])
106 |     .pipe(vinylPaths(del))
107 |     .on('end', () => gutil.log("Cleaning done."));
108 | };
109 | 
110 | module.exports = build;
111 | 


--------------------------------------------------------------------------------
/compilerconfig.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "outputFile": "assets/global.css",
 4 |     "inputFile": "assets/global.scss"
 5 |   },
 6 |   {
 7 |     "outputFile": "app/dashboard/components/dashboard/dashboard.component.css",
 8 |     "inputFile": "app/dashboard/components/dashboard/dashboard.component.scss"
 9 |   },
10 |   {
11 |     "outputFile": "app/heroes/components/hero-detail/hero-detail.component.css",
12 |     "inputFile": "app/heroes/components/hero-detail/hero-detail.component.scss"
13 |   },
14 |   {
15 |     "outputFile": "app/heroes/components/hero-search/hero-search.component.css",
16 |     "inputFile": "app/heroes/components/hero-search/hero-search.component.scss"
17 |   },
18 |   {
19 |     "outputFile": "app/heroes/components/heroes/heroes.component.css",
20 |     "inputFile": "app/heroes/components/heroes/heroes.component.scss"
21 |   },
22 |   {
23 |     "outputFile": "app/app.component.css",
24 |     "inputFile": "app/app.component.scss"
25 |   }
26 | ]


--------------------------------------------------------------------------------
/compilerconfig.json.defaults:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilers": {
 3 |     "less": {
 4 |       "autoPrefix": "",
 5 |       "cssComb": "none",
 6 |       "ieCompat": true,
 7 |       "strictMath": false,
 8 |       "strictUnits": false,
 9 |       "relativeUrls": true,
10 |       "rootPath": "",
11 |       "sourceMapRoot": "",
12 |       "sourceMapBasePath": "",
13 |       "sourceMap": false
14 |     },
15 |     "sass": {
16 |       "includePath": "",
17 |       "indentType": "space",
18 |       "indentWidth": 2,
19 |       "outputStyle": "nested",
20 |       "Precision": 5,
21 |       "relativeUrls": true,
22 |       "sourceMapRoot": "",
23 |       "sourceMap": false
24 |     },
25 |     "stylus": {
26 |       "sourceMap": false
27 |     },
28 |     "babel": {
29 |       "sourceMap": false
30 |     },
31 |     "coffeescript": {
32 |       "bare": false,
33 |       "runtimeMode": "node",
34 |       "sourceMap": false
35 |     }
36 |   },
37 |   "minifiers": {
38 |     "css": {
39 |       "enabled": false,
40 |       "termSemicolons": true,
41 |       "gzip": false
42 |     },
43 |     "javascript": {
44 |       "enabled": true,
45 |       "termSemicolons": true,
46 |       "gzip": false
47 |     }
48 |   }
49 | }


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var runSequence = require('run-sequence');
 3 | 
 4 | var conf = require('./build-tools/variables.js');
 5 | var dev = require('./build.dev.js');
 6 | var prod = require('./build.prod.js');
 7 | 
 8 | var devContext = {
 9 |     destDir: conf.DIST_DEV_DIR,
10 |     indexHtmlPath: "index.html"
11 | };
12 | 
13 | var prodContext = {
14 |     destDir: conf.DIST_DIR,
15 |     indexHtmlPath: "index.html"
16 | };
17 | 
18 | gulp.task("bundle-dev", function(){
19 |     return dev.bundle(devContext);
20 | });
21 | 
22 | gulp.task("compile-dev", function(){
23 |     return dev.compile(devContext);
24 | });
25 | 
26 | gulp.task("build-dev", function(){
27 |     return dev.build(devContext);
28 | });
29 | 
30 | gulp.task('clean-dev', function () {
31 |     return dev.clean(devContext);
32 | });
33 | 
34 | gulp.task("bundle-prod", function(){
35 |     return prod.bundle(prodContext);
36 | });
37 | 
38 | gulp.task("compile-prod", function(){
39 |     return prod.compile(prodContext);
40 | });
41 | 
42 | gulp.task("build-prod", function(){
43 |     return prod.build(prodContext);
44 | });
45 | 
46 | gulp.task('clean-prod', function () {
47 |     return prod.clean(prodContext);
48 | });
49 | 
50 | gulp.task('clean', function(callback) {
51 |   runSequence('clean-prod', 'clean-dev', callback);
52 | });
53 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title></title>
 6 |     <base href="./" />
 7 |     <link type="text/css" rel="stylesheet" href="assets/global.css">
 8 | </head>
 9 | <body>
10 |     <my-app class="test-app">
11 |         <div class="app-loading">
12 |             <div class="loading-icon"></div>
13 |             <div class="loading-text"> Loading...</div>
14 |         </div>
15 |     </my-app>
16 |   
17 |   <!-- dev -->
18 |     <script src="node_modules\zone.js\dist\zone.js"></script>
19 |     <script src="node_modules\reflect-metadata\Reflect.js"></script>
20 |     <script src="node_modules\es6-shim\es6-shim.js"></script>
21 |     <script src="node_modules\tslib\tslib.js"></script>
22 | 
23 |     <script src="node_modules/systemjs/dist/system.js"></script>
24 |     <script src="build-tools/systemjs-config.js"></script>
25 |     <script>
26 |         System.import('dist-dev/rxjs.js').then(function () {
27 |             System.import('app/main');
28 |         });
29 |     </script>
30 |   <!-- end-dev -->
31 | 
32 |   <!-- prod --
33 |   
34 |     <script>
35 |         var module = {};
36 |     </script>
37 |     <script src="common.min.js"></script>
38 |     <script src="app.min.js"></script>
39 | 
40 |    -- end-prod -->
41 | </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular2-seed",
 3 |   "author": "Bogatyrev Pavel <PFight77@gmail.com>",
 4 |   "license": "Apache 2.0",
 5 |   "version": "1.0.0",
 6 |   "description": "Simple yet flexible Angular 2 dev/prod build system.",
 7 |   "scripts": {
 8 |     "build": "gulp build-dev --color",
 9 |     "build-prod": "gulp build-prod --color",
10 |     "clean": "gulp clean --color",
11 |     "compile": "gulp compile-dev --color",
12 |     "start": "node build-tools/express-http-server.dev.js",
13 |     "start-prod": "node build-tools/express-http-server.prod.js"
14 |   },
15 |   "devDependencies": {
16 |     "@angular/compiler-cli": "^2.1.2",
17 |     "@angular/platform-server": "^2.1.0",
18 |     "@types/node": "^6.0.46",
19 |     "browser-resolve": "^1.11.2",
20 |     "compression": "^1.6.2",
21 |     "del": "^2.2.2",
22 |     "event-stream": "^3.3.4",
23 |     "express": "^4.14.0",
24 |     "file-exists": "^2.0.0",
25 |     "glob-intersection": "^0.1.3",
26 |     "gulp": "^3.9.1",
27 |     "gulp-concat": "^2.6.0",
28 |     "gulp-file": "^0.3.0",
29 |     "gulp-if": "^2.0.1",
30 |     "gulp-inject": "^4.1.0",
31 |     "gulp-inject-string": "^1.1.0",
32 |     "gulp-ngc": "^0.1.2",
33 |     "gulp-print": "^2.0.1",
34 |     "gulp-rename": "^1.2.2",
35 |     "gulp-replace": "^0.5.4",
36 |     "gulp-rollup": "^2.5.1",
37 |     "gulp-run": "^1.7.1",
38 |     "gulp-sass": "^2.3.2",
39 |     "gulp-sourcemaps": "^2.2.0",
40 |     "gulp-typescript": "^3.0.2",
41 |     "gulp-uglifyjs": "^0.6.2",
42 |     "gulp-util": "^3.0.7",
43 |     "http-server": "^0.9.0",
44 |     "md5": "^2.2.1",
45 |     "node.extend": "^1.1.6",
46 |     "openurl": "^1.1.1",
47 |     "path": "^0.12.7",
48 |     "rollup-plugin-node-resolve": "^2.0.0",
49 |     "rollup-stream": "^1.14.0",
50 |     "run-sequence": "^1.2.2",
51 |     "streamqueue": "^1.1.1",
52 |     "typescript": "^2.0.6",
53 |     "vinyl-buffer": "^1.0.0",
54 |     "vinyl-paths": "^2.1.0",
55 |     "vinyl-source-stream": "^1.1.0"
56 |   },
57 |   "dependencies": {
58 |     "@angular/common": "^2.1.0",
59 |     "@angular/compiler": "^2.1.0",
60 |     "@angular/core": "^2.1.0",
61 |     "@angular/forms": "^2.1.2",
62 |     "@angular/http": "^2.1.1",
63 |     "@angular/platform-browser": "^2.1.0",
64 |     "@angular/platform-browser-dynamic": "^2.1.0",
65 |     "@angular/router": "^3.1.1",
66 |     "es6-shim": "^0.35.2",
67 |     "reflect-metadata": "^0.1.3",
68 |     "rxjs": "^5.0",
69 |     "systemjs": "^0.19.40",
70 |     "tslib": "^1.5.0",
71 |     "zone.js": "^0.6.25"
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "commonjs",
 5 |     "moduleResolution": "node",
 6 |     "emitDecoratorMetadata": true,
 7 |     "experimentalDecorators": true,
 8 |     "noEmitHelpers":  true,
 9 |     "lib": ["es6", "dom"]
10 |   },
11 |   "include": [
12 |      "app/**/*.ts"
13 |   ],
14 |   "exclude": [
15 |      "app/main-aot.ts"
16 |   ],
17 |   "compileOnSave": true
18 | }
19 | 


--------------------------------------------------------------------------------
/tsconfig.ngc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 | 		"target": "es6",
 4 |         "moduleResolution": "node",
 5 |         "experimentalDecorators": true,
 6 |         "lib": [ "es6", "dom" ]
 7 |     },
 8 |     "include": [
 9 |         "app/**/*.ts"
10 |     ],
11 |     "exclude": [
12 |         "app/main-aot.ts"
13 |     ],
14 |     "angularCompilerOptions": {
15 |         "genDir": "app-aot"
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/tsconfig.prod.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es6",
 4 |     "module": "es6",
 5 |     "moduleResolution": "node",
 6 |     "emitDecoratorMetadata": true,
 7 |     "experimentalDecorators": true,
 8 |     "noEmitHelpers":  true,
 9 |     "lib": [ "es6", "dom" ]
10 |   },
11 |   "include": [
12 |     "./app-aot/**/*.ts",
13 |     "./app/**/*.ts"
14 |   ],
15 |   "exclude": [
16 |     "app/main.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------