Hello

├── src ├── assets │ └── .gitkeep ├── entry.ts ├── favicon.ico ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── app │ ├── app.component.scss │ ├── app.component.ts │ ├── app-routing.module.ts │ ├── app.module.ts │ ├── app.component.spec.ts │ └── app.component.html ├── index.html ├── main.ts └── polyfills.ts ├── .DS_Store ├── .gitignore ├── README.md ├── tsconfig.json ├── fuse.ts └── package.json /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/entry.ts: -------------------------------------------------------------------------------- 1 | import "./polyfills"; 2 | import "./main"; 3 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuse-box/angular2-example/HEAD/.DS_Store -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuse-box/angular2-example/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .fusebox/ 3 | .vscode/ 4 | coverage/ 5 | .nyc_output/ 6 | dist/ 7 | .history 8 | /.idea/ 9 | .cache -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | .greeting { 2 | background-color: darken($color: blue, $amount: 20); 3 | padding: 5px; 4 | } 5 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | 3 | @Component({ 4 | selector: "app-root", 5 | templateUrl: "./app.component.html", 6 | styleUrls: ["./app.component.scss"], 7 | }) 8 | export class AppComponent { 9 | title = "hello"; 10 | } 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular 8 and FuseBox v4 2 | 3 | This project was generated with Angular CLI 4 | ### start 5 | 6 | ```bash 7 | npm start 8 | ``` 9 | 10 | ### Preview production build 11 | 12 | ```bash 13 | npm run preview 14 | ``` 15 | 16 | ### Run production build 17 | 18 | ```bash 19 | npm run dist 20 | ``` -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | 5 | const routes: Routes = []; 6 | 7 | @NgModule({ 8 | imports: [RouterModule.forRoot(routes)], 9 | exports: [RouterModule] 10 | }) 11 | export class AppRoutingModule { } 12 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello 6 | 7 | 8 | 9 | 10 | 11 | 12 | $bundles 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent 10 | ], 11 | imports: [ 12 | BrowserModule, 13 | AppRoutingModule 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule { } 19 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "moduleResolution": "node", 11 | "importHelpers": true, 12 | "target": "esnext", 13 | "typeRoots": ["node_modules/@types"], 14 | "lib": ["es2018", "dom"] 15 | }, 16 | "angularCompilerOptions": { 17 | "fullTemplateTypeCheck": true, 18 | "strictInjectionParameters": true 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /fuse.ts: -------------------------------------------------------------------------------- 1 | import { fusebox, pluginAngular, pluginSass, sparky } from "fuse-box"; 2 | class Context { 3 | isProduction; 4 | runServer; 5 | getConfig = () => 6 | fusebox({ 7 | target: "browser", 8 | entry: "src/entry.ts", 9 | modules: ["./node_modules"], 10 | webIndex: { 11 | publicPath: ".", 12 | template: "src/index.html" 13 | }, 14 | cache: { enabled: true, FTL: true, root: "./.cache" }, 15 | watch: true, 16 | devServer: this.runServer, 17 | 18 | plugins: [ 19 | pluginAngular("*.component.ts"), 20 | pluginSass({ asText: true, useDefault: false }) 21 | ] 22 | }); 23 | } 24 | const { task, rm, exec } = sparky(Context); 25 | 26 | task("default", async ctx => { 27 | ctx.runServer = true; 28 | const fuse = ctx.getConfig(); 29 | await fuse.runDev(); 30 | }); 31 | 32 | task("preview", async ctx => { 33 | rm("./dist"); 34 | ctx.runServer = true; 35 | ctx.isProduction = true; 36 | const fuse = ctx.getConfig(); 37 | await fuse.runProd({ uglify: false }); 38 | }); 39 | task("dist", async ctx => { 40 | ctx.runServer = false; 41 | ctx.isProduction = true; 42 | const fuse = ctx.getConfig(); 43 | await fuse.runProd({ uglify: false }); 44 | }); 45 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(async(() => { 7 | TestBed.configureTestingModule({ 8 | imports: [ 9 | RouterTestingModule 10 | ], 11 | declarations: [ 12 | AppComponent 13 | ], 14 | }).compileComponents(); 15 | })); 16 | 17 | it('should create the app', () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.debugElement.componentInstance; 20 | expect(app).toBeTruthy(); 21 | }); 22 | 23 | it(`should have as title 'hello'`, () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | const app = fixture.debugElement.componentInstance; 26 | expect(app.title).toEqual('hello'); 27 | }); 28 | 29 | it('should render title', () => { 30 | const fixture = TestBed.createComponent(AppComponent); 31 | fixture.detectChanges(); 32 | const compiled = fixture.debugElement.nativeElement; 33 | expect(compiled.querySelector('.content span').textContent).toContain('hello app is running!'); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fusebox-angular", 3 | "version": "8.0.0", 4 | "description": "", 5 | "main": "main.js", 6 | "scripts": { 7 | "start": "ts-node -T fuse.ts", 8 | "dist": "ts-node -T fuse.ts dist", 9 | "preview": "ts-node -T fuse.ts preview" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/fuse-box/angular2-example.git" 14 | }, 15 | "author": "", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/fuse-box/angular2-example/issues" 19 | }, 20 | "homepage": "https://github.com/fuse-box/angular2-example#readme", 21 | "dependencies": { 22 | "@angular/animations": "~8.2.4", 23 | "@angular/common": "~8.2.4", 24 | "@angular/compiler": "~8.2.4", 25 | "@angular/core": "~8.2.4", 26 | "@angular/forms": "~8.2.4", 27 | "@angular/platform-browser": "~8.2.4", 28 | "@angular/platform-browser-dynamic": "~8.2.4", 29 | "@angular/router": "~8.2.4", 30 | "core-js": "^3.2.1", 31 | "rxjs": "~6.4.0", 32 | "tslib": "^1.10.0", 33 | "zone.js": "^0.10.2" 34 | }, 35 | "devDependencies": { 36 | "@angular-devkit/build-angular": "~0.803.2", 37 | "@angular/cli": "~8.3.2", 38 | "@angular/compiler-cli": "~8.2.4", 39 | "@angular/language-service": "~8.2.4", 40 | "@types/jasmine": "~3.3.8", 41 | "@types/jasminewd2": "~2.0.3", 42 | "@types/node": "~8.9.4", 43 | "fuse-box": "^4.0.0-next.99" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 22 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 23 | 24 | /** 25 | * Web Animations `@angular/platform-browser/animations` 26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 28 | */ 29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 30 | 31 | /** 32 | * By default, zone.js will patch all possible macroTask and DomEvents 33 | * user can disable parts of macroTask/DomEvents patch by setting following flags 34 | * because those flags need to be set before `zone.js` being loaded, and webpack 35 | * will put import in the top of bundle, so user need to create a separate file 36 | * in this directory (for example: zone-flags.ts), and put the following flags 37 | * into that file, and then add the following code before importing zone.js. 38 | * import './zone-flags.ts'; 39 | * 40 | * The flags allowed in zone-flags.ts are listed here. 41 | * 42 | * The following flags will work for all browsers. 43 | * 44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 47 | * 48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 50 | * 51 | * (window as any).__Zone_enable_cross_context_check = true; 52 | * 53 | */ 54 | 55 | /*************************************************************************************************** 56 | * Zone JS is required by default for Angular itself. 57 | */ 58 | import "zone.js/dist/zone"; // Included with Angular CLI. 59 | import "core-js/proposals/reflect-metadata"; 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 298 | 299 | 300 | 341 | 342 |

343 | 344 |

|     
|       
|         
|         
|           
|           
|         
|       
|     
| 
|     {{ title }} app is running!
| 
|     
|       
|     
|   

405 | 406 | 407 |

Resources

408 |

Here are some links to help you get started:

409 | 410 |

411 | 417 | 428 | 429 | Learn Angular 430 | 431 | 440 | 441 | 442 | 448 | 459 | 460 | CLI Documentation 461 | 462 | 471 | 472 | 473 | 479 | 490 | 491 | Angular Blog 492 | 493 | 502 | 503 |

504 | 505 | 506 |

Next Steps

507 |

What do you want to do next with your app?

508 | 509 | 510 | 511 |

512 |

517 | 526 | 527 | New Component 528 |

529 | 530 |

535 | 544 | 545 | Angular Material 546 |

547 | 548 |

553 | 562 | 563 | Add Dependency 564 |

565 | 566 |

571 | 580 | 581 | Run and Watch Tests 582 |

583 | 584 |

589 | 598 | 599 | Build for Production 600 |

601 |

602 | 603 | 604 |

605 |

ng generate component xyz

606 |

ng add @angular/material

607 |

ng add _____

608 |

ng test

609 |

ng build --prod

610 |

611 | 612 | 613 |

614 | 621 | 665 | 666 | 667 | 674 | 720 | 721 | 722 | 729 | 790 | 791 | 792 | 799 | 830 | 831 | 832 | 839 | 853 | 854 | 855 | 862 | 916 | 917 |

918 | 919 | 920 | 956 | 957 | 973 |

974 | 975 | 976 | 977 | 978 | 979 | 980 | 981 | 982 | 983 | 984 | --------------------------------------------------------------------------------