diff --git a/.angular-cli.json b/.angular-cli.json new file mode 100644 index 0000000..9af1a96 --- /dev/null +++ b/.angular-cli.json @@ -0,0 +1,58 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "project": { + "name": "m2-app" + }, + "apps": [ + { + "root": "src", + "outDir": "dist", + "assets": [ + "assets", + "favicon.ico" + ], + "index": "index.html", + "main": "main.ts", + "polyfills": "polyfills.ts", + "test": "test.ts", + "tsconfig": "tsconfig.app.json", + "testTsconfig": "tsconfig.spec.json", + "prefix": "app", + "styles": [ + "styles.css", + "material2-app-theme.scss" + ], + "scripts": [], + "environmentSource": "environments/environment.ts", + "environments": { + "dev": "environments/environment.ts", + "prod": "environments/environment.prod.ts" + } + } + ], + "e2e": { + "protractor": { + "config": "./protractor.conf.js" + } + }, + "lint": [ + { + "project": "src/tsconfig.app.json" + }, + { + "project": "src/tsconfig.spec.json" + }, + { + "project": "e2e/tsconfig.e2e.json" + } + ], + "test": { + "karma": { + "config": "./karma.conf.js" + } + }, + "defaults": { + "styleExt": "css", + "component": {} + } +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..6e87a00 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +# Editor configuration, see http://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/.gitignore b/.gitignore index 0fdefbf..54bfd20 100644 --- a/.gitignore +++ b/.gitignore @@ -3,21 +3,31 @@ # compiled output /dist /tmp +/out-tsc # dependencies /node_modules -/bower_components - -# generated code -aot/ # IDEs and editors /.idea +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# IDE - VSCode +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json # misc /.sass-cache /connect.lock -/coverage/* +/coverage /libpeerconnection.log npm-debug.log testem.log @@ -27,5 +37,6 @@ testem.log /e2e/*.js /e2e/*.map -#System Files +# System Files .DS_Store +Thumbs.db diff --git a/angular-cli.json b/angular-cli.json deleted file mode 100644 index 0e4767e..0000000 --- a/angular-cli.json +++ /dev/null @@ -1,46 +0,0 @@ -{ - "project": { - "version": "1.0.0-beta.11-webpack.8", - "name": "material2-app" - }, - "apps": [ - { - "root": "src", - "outDir": "dist", - "assets": "assets", - "index": "index.html", - "main": "main.ts", - "test": "test.ts", - "tsconfig": "tsconfig.json", - "prefix": "app", - "mobile": false, - "styles": [ - "styles.css", - "material2-app-theme.scss" - ], - "scripts": [], - "environments": { - "source": "environments/environment.ts", - "prod": "environments/environment.prod.ts", - "dev": "environments/environment.dev.ts" - } - } - ], - "addons": [], - "packages": [], - "e2e": { - "protractor": { - "config": "./protractor.conf.js" - } - }, - "test": { - "karma": { - "config": "./karma.conf.js" - } - }, - "defaults": { - "styleExt": "css", - "prefixInterfaces": false, - "lazyRoutePrefix": "+" - } -} diff --git a/e2e/app.e2e-spec.ts b/e2e/app.e2e-spec.ts new file mode 100644 index 0000000..0197a55 --- /dev/null +++ b/e2e/app.e2e-spec.ts @@ -0,0 +1,14 @@ +import { M2AppPage } from './app.po'; + +describe('m2-app App', () => { + let page: M2AppPage; + + beforeEach(() => { + page = new M2AppPage(); + }); + + it('should display message saying app works', () => { + page.navigateTo(); + expect(page.getParagraphText()).toEqual('app works!'); + }); +}); diff --git a/e2e/app.po.ts b/e2e/app.po.ts new file mode 100644 index 0000000..b92f791 --- /dev/null +++ b/e2e/app.po.ts @@ -0,0 +1,11 @@ +import { browser, element, by } from 'protractor'; + +export class M2AppPage { + navigateTo() { + return browser.get('/'); + } + + getParagraphText() { + return element(by.css('app-root h1')).getText(); + } +} diff --git a/e2e/tsconfig.e2e.json b/e2e/tsconfig.e2e.json new file mode 100644 index 0000000..ac7a373 --- /dev/null +++ b/e2e/tsconfig.e2e.json @@ -0,0 +1,12 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/e2e", + "module": "commonjs", + "target": "es5", + "types":[ + "jasmine", + "node" + ] + } +} diff --git a/karma.conf.js b/karma.conf.js index 945ec5b..84b4cd5 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -3,28 +3,37 @@ module.exports = function (config) { config.set({ - basePath: './', - frameworks: ['jasmine', 'angular-cli'], + basePath: '', + frameworks: ['jasmine', '@angular/cli'], plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), - require('karma-remap-istanbul'), - require('angular-cli/plugins/karma') + require('karma-jasmine-html-reporter'), + require('karma-coverage-istanbul-reporter'), + require('@angular/cli/plugins/karma') ], + client:{ + clearContext: false // leave Jasmine Spec Runner output visible in browser + }, files: [ { pattern: './src/test.ts', watched: false } ], preprocessors: { - './src/test.ts': ['angular-cli'] + './src/test.ts': ['@angular/cli'] + }, + mime: { + 'text/x-typescript': ['ts','tsx'] + }, + coverageIstanbulReporter: { + reports: [ 'html', 'lcovonly' ], + fixWebpackSourcePaths: true }, - remapIstanbulReporter: { - reports: { - html: 'coverage', - lcovonly: './coverage/coverage.lcov' - } + angularCli: { + environment: 'dev' }, - angularCliConfig: './angular-cli.json', - reporters: ['progress', 'karma-remap-istanbul'], + reporters: config.angularCli && config.angularCli.codeCoverage + ? ['progress', 'coverage-istanbul'] + : ['progress', 'kjhtml'], port: 9876, colors: true, logLevel: config.LOG_INFO, diff --git a/package.json b/package.json index a8a9fca..6fa778a 100644 --- a/package.json +++ b/package.json @@ -2,47 +2,49 @@ "name": "m2-app", "version": "0.0.0", "license": "MIT", - "angular-cli": {}, "scripts": { + "ng": "ng", "start": "ng serve", - "lint": "tslint \"src/**/*.ts\"", + "build": "ng build", "test": "ng test", - "pree2e": "webdriver-manager update", - "e2e": "protractor" + "lint": "ng lint", + "e2e": "ng e2e" }, "private": true, "dependencies": { - "@angular/common": "^2.0.0", - "@angular/compiler": "^2.0.0", - "@angular/core": "^2.0.0", - "@angular/forms": "^2.0.0", - "@angular/http": "^2.0.0", - "@angular/platform-browser": "^2.0.0", - "@angular/platform-browser-dynamic": "^2.0.0", - "@angular/material": "2.0.0-alpha.10", - "@angular/router": "^3.0.0", - "core-js": "^2.4.0", - "rxjs": "5.0.0-beta.12", - "ts-helpers": "^1.1.1", - "zone.js": "^0.6.21" + "@angular/animations": "^4.0.0", + "@angular/common": "^4.0.0", + "@angular/compiler": "^4.0.0", + "@angular/core": "^4.0.0", + "@angular/forms": "^4.0.0", + "@angular/http": "^4.0.0", + "@angular/material": "^2.0.0-beta.2", + "@angular/platform-browser": "^4.0.0", + "@angular/platform-browser-dynamic": "^4.0.0", + "@angular/router": "^4.0.0", + "core-js": "^2.4.1", + "hammerjs": "^2.0.8", + "rxjs": "^5.1.0", + "zone.js": "^0.8.4" }, "devDependencies": { - "@angular/compiler-cli": "^2.0.0", - "@angular/platform-server": "^2.0.0", - "@types/hammerjs": "^2.0.32", - "@types/jasmine": "^2.2.30", - "angular-cli": "^1.0.0-beta.16", - "codelyzer": "~0.0.26", - "firebase-tools": "^3.0.7", - "jasmine-core": "2.4.1", - "jasmine-spec-reporter": "2.5.0", - "karma": "0.13.22", - "karma-chrome-launcher": "0.2.3", - "karma-jasmine": "0.3.8", - "karma-remap-istanbul": "^0.2.1", - "protractor": "4.0.3", - "ts-node": "1.2.1", - "tslint": "3.13.0", - "typescript": "^2.0.2" + "@angular/cli": "1.0.0", + "@angular/compiler-cli": "^4.0.0", + "@types/jasmine": "2.5.38", + "@types/node": "~6.0.60", + "codelyzer": "~2.0.0", + "firebase-tools": "^3.5.0", + "jasmine-core": "~2.5.2", + "jasmine-spec-reporter": "~3.2.0", + "karma": "~1.4.1", + "karma-chrome-launcher": "~2.0.0", + "karma-cli": "~1.0.1", + "karma-coverage-istanbul-reporter": "^0.2.0", + "karma-jasmine": "~1.1.0", + "karma-jasmine-html-reporter": "^0.2.2", + "protractor": "~5.1.0", + "ts-node": "~2.0.0", + "tslint": "~4.5.0", + "typescript": "~2.2.0" } } diff --git a/protractor.conf.js b/protractor.conf.js index 169743b..1c5e1e5 100644 --- a/protractor.conf.js +++ b/protractor.conf.js @@ -1,8 +1,7 @@ // Protractor configuration file, see link for more information -// https://github.com/angular/protractor/blob/master/docs/referenceConf.js +// https://github.com/angular/protractor/blob/master/lib/config.ts -/*global jasmine */ -var SpecReporter = require('jasmine-spec-reporter'); +const { SpecReporter } = require('jasmine-spec-reporter'); exports.config = { allScriptsTimeout: 11000, @@ -20,13 +19,12 @@ exports.config = { defaultTimeoutInterval: 30000, print: function() {} }, - useAllAngular2AppRoots: true, beforeLaunch: function() { require('ts-node').register({ - project: 'e2e' + project: 'e2e/tsconfig.e2e.json' }); }, - onPrepare: function() { - jasmine.getEnv().addReporter(new SpecReporter()); + onPrepare() { + jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); } }; diff --git a/src/app/app.component.css b/src/app/app.component.css index 8dc0f64..b21126e 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -1,4 +1,4 @@ -md-sidenav-layout.m2app-dark { +md-sidenav-container.m2app-dark { background: black; } diff --git a/src/app/app.component.html b/src/app/app.component.html index 8ff8b53..6a0d913 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,4 @@ - + Sidenav @@ -7,9 +7,7 @@ - - Angular Material2 Example App + Angular Material2 Example App @@ -38,26 +36,31 @@ - + + + - + + - {{nickname.characterCount}} / 50 + {{nickname.value.length}} / 50 - + - + + android Favorite phone - + - + + motorcycle   - + @@ -129,8 +132,8 @@

{{food.name}}

- + - + \ No newline at end of file diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts new file mode 100644 index 0000000..c740bcd --- /dev/null +++ b/src/app/app.component.spec.ts @@ -0,0 +1,32 @@ +import { TestBed, async } from '@angular/core/testing'; + +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + AppComponent + ], + }).compileComponents(); + })); + + it('should create the app', async(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app).toBeTruthy(); + })); + + it(`should have as title 'app works!'`, async(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app.title).toEqual('app works!'); + })); + + it('should render title in a h1 tag', async(() => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.debugElement.nativeElement; + expect(compiled.querySelector('h1').textContent).toContain('app works!'); + })); +}); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 2b8e45b..e7f9acb 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -3,11 +3,11 @@ import {MdDialog, MdDialogRef, MdSnackBar} from '@angular/material'; @Component({ - selector: 'material2-app-app', + selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], }) -export class Material2AppAppComponent { +export class AppComponent { isDarkTheme: boolean = false; lastDialogResult: string; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8f52970..58ca339 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,15 +1,27 @@ -import {NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; -import {MaterialModule} from '@angular/material'; -import {Material2AppAppComponent, DialogContent} from './app.component'; +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { HttpModule } from '@angular/http'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { MaterialModule } from '@angular/material'; +import 'hammerjs'; + +import { AppComponent, DialogContent } from './app.component'; @NgModule({ + declarations: [ + AppComponent, + DialogContent + ], imports: [ BrowserModule, - MaterialModule.forRoot(), + FormsModule, + HttpModule, + BrowserAnimationsModule, + MaterialModule ], - declarations: [Material2AppAppComponent, DialogContent], + providers: [], entryComponents: [DialogContent], - bootstrap: [Material2AppAppComponent], + bootstrap: [AppComponent] }) -export class MaterialAppModule { } +export class AppModule { } diff --git a/src/app/index.ts b/src/app/index.ts deleted file mode 100644 index 875bdb2..0000000 --- a/src/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './app.component'; -export * from './app.module'; diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/environments/environment.dev.ts b/src/environments/environment.dev.ts deleted file mode 100644 index ffe8aed..0000000 --- a/src/environments/environment.dev.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const environment = { - production: false -}; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 5c54e15..b7f639a 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -1,7 +1,7 @@ -// The file for the current environment will overwrite this one during build. -// Different environments can be found in ./environment.{dev|prod}.ts, and -// you can create your own and use it with the --env flag. -// The build system defaults to the dev environment. +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `.angular-cli.json`. export const environment = { production: false diff --git a/src/index.html b/src/index.html index b6aa2be..a48983e 100644 --- a/src/index.html +++ b/src/index.html @@ -8,12 +8,12 @@ - + - Loading... + Loading... -