From 0b65bd498e9f5e76ffe58a3cf094a5ddf3589ab8 Mon Sep 17 00:00:00 2001 From: Miroslav Jonas Date: Fri, 7 Apr 2017 16:24:40 +0200 Subject: [PATCH 1/8] Add cli as internal demo --- .gitignore | 40 +++--- .npmignore | 6 + demo/cli/.angular-cli.json | 57 +++++++++ demo/cli/.editorconfig | 13 ++ demo/cli/README.md | 28 +++++ demo/cli/e2e/app.e2e-spec.ts | 14 +++ demo/cli/e2e/app.po.ts | 11 ++ demo/cli/e2e/tsconfig.e2e.json | 12 ++ demo/cli/karma.conf.js | 44 +++++++ demo/cli/package.json | 46 +++++++ demo/cli/protractor.conf.js | 30 +++++ demo/cli/src/app/app.component.css | 0 demo/cli/src/app/app.component.html | 3 + demo/cli/src/app/app.component.spec.ts | 32 +++++ demo/cli/src/app/app.component.ts | 10 ++ demo/cli/src/app/app.module.ts | 20 +++ demo/cli/src/assets/.gitkeep | 0 demo/cli/src/environments/environment.prod.ts | 3 + demo/cli/src/environments/environment.ts | 8 ++ demo/cli/src/favicon.ico | Bin 0 -> 5430 bytes demo/cli/src/index.html | 14 +++ demo/cli/src/main.ts | 11 ++ demo/cli/src/polyfills.ts | 68 ++++++++++ demo/cli/src/styles.css | 1 + demo/cli/src/test.ts | 32 +++++ demo/cli/src/tsconfig.app.json | 13 ++ demo/cli/src/tsconfig.spec.json | 20 +++ demo/cli/tsconfig.json | 20 +++ demo/cli/tslint.json | 116 ++++++++++++++++++ 29 files changed, 653 insertions(+), 19 deletions(-) create mode 100644 demo/cli/.angular-cli.json create mode 100644 demo/cli/.editorconfig create mode 100644 demo/cli/README.md create mode 100644 demo/cli/e2e/app.e2e-spec.ts create mode 100644 demo/cli/e2e/app.po.ts create mode 100644 demo/cli/e2e/tsconfig.e2e.json create mode 100644 demo/cli/karma.conf.js create mode 100644 demo/cli/package.json create mode 100644 demo/cli/protractor.conf.js create mode 100644 demo/cli/src/app/app.component.css create mode 100644 demo/cli/src/app/app.component.html create mode 100644 demo/cli/src/app/app.component.spec.ts create mode 100644 demo/cli/src/app/app.component.ts create mode 100644 demo/cli/src/app/app.module.ts create mode 100644 demo/cli/src/assets/.gitkeep create mode 100644 demo/cli/src/environments/environment.prod.ts create mode 100644 demo/cli/src/environments/environment.ts create mode 100644 demo/cli/src/favicon.ico create mode 100644 demo/cli/src/index.html create mode 100644 demo/cli/src/main.ts create mode 100644 demo/cli/src/polyfills.ts create mode 100644 demo/cli/src/styles.css create mode 100644 demo/cli/src/test.ts create mode 100644 demo/cli/src/tsconfig.app.json create mode 100644 demo/cli/src/tsconfig.spec.json create mode 100644 demo/cli/tsconfig.json create mode 100644 demo/cli/tslint.json diff --git a/.gitignore b/.gitignore index 4c05c1d..2678302 100644 --- a/.gitignore +++ b/.gitignore @@ -1,27 +1,35 @@ +############ +## Project +############ + +bundles/ +node_modules/ +coverage/ + +*.map +*.d.ts +*.metadata.json +*.js +# overrides for js +!config/* +!demo/cli/*js +!copy.js +!karma.conf.js +!webpack.config.js + ################# ## Misc ################# -**/.DS_Store + nbproject manifest.mf build.xml -node_modules/* npm-debug.log -*.js -!config/* -!karma.conf.js -*.map -*.d.ts -!copy.js -!webpack.config.js -!examples/**/*.js -coverage -*.metadata.json -/compiled ################# ## IDEs ################# + .idea .project .settings @@ -31,18 +39,12 @@ coverage ## Windows ############ -# Windows image file caches Thumbs.db - -# Folder config file Desktop.ini ############ ## Mac ############ -# Mac crap .DS_Store -bundles/ -node_modules/ diff --git a/.npmignore b/.npmignore index 5d6d8cd..e20cd16 100644 --- a/.npmignore +++ b/.npmignore @@ -41,3 +41,9 @@ Desktop.ini # Mac crap .DS_Store + +############ +## Demos +############ + +demo/* diff --git a/demo/cli/.angular-cli.json b/demo/cli/.angular-cli.json new file mode 100644 index 0000000..e0fd8ad --- /dev/null +++ b/demo/cli/.angular-cli.json @@ -0,0 +1,57 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "project": { + "name": "cli" + }, + "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" + ], + "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/demo/cli/.editorconfig b/demo/cli/.editorconfig new file mode 100644 index 0000000..6e87a00 --- /dev/null +++ b/demo/cli/.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/demo/cli/README.md b/demo/cli/README.md new file mode 100644 index 0000000..9b41d5b --- /dev/null +++ b/demo/cli/README.md @@ -0,0 +1,28 @@ +# Cli + +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0. + +## Development server + +Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. + +## Code scaffolding + +Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`. + +## Build + +Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build. + +## Running unit tests + +Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). + +## Running end-to-end tests + +Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). +Before running the tests make sure you are serving the app via `ng serve`. + +## Further help + +To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). diff --git a/demo/cli/e2e/app.e2e-spec.ts b/demo/cli/e2e/app.e2e-spec.ts new file mode 100644 index 0000000..a9e874f --- /dev/null +++ b/demo/cli/e2e/app.e2e-spec.ts @@ -0,0 +1,14 @@ +import { CliPage } from './app.po'; + +describe('cli App', () => { + let page: CliPage; + + beforeEach(() => { + page = new CliPage(); + }); + + it('should display message saying app works', () => { + page.navigateTo(); + expect(page.getParagraphText()).toEqual('app works!'); + }); +}); diff --git a/demo/cli/e2e/app.po.ts b/demo/cli/e2e/app.po.ts new file mode 100644 index 0000000..3744d03 --- /dev/null +++ b/demo/cli/e2e/app.po.ts @@ -0,0 +1,11 @@ +import { browser, element, by } from 'protractor'; + +export class CliPage { + navigateTo() { + return browser.get('/'); + } + + getParagraphText() { + return element(by.css('app-root h1')).getText(); + } +} diff --git a/demo/cli/e2e/tsconfig.e2e.json b/demo/cli/e2e/tsconfig.e2e.json new file mode 100644 index 0000000..ac7a373 --- /dev/null +++ b/demo/cli/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/demo/cli/karma.conf.js b/demo/cli/karma.conf.js new file mode 100644 index 0000000..8c67048 --- /dev/null +++ b/demo/cli/karma.conf.js @@ -0,0 +1,44 @@ +// Karma configuration file, see link for more information +// https://karma-runner.github.io/0.13/config/configuration-file.html + +module.exports = function (config) { + config.set({ + basePath: '), + frameworks: ['jasmine', '@angular/cli'], + plugins: [ + require('karma-jasmine'), + require('karma-chrome-launcher'), + 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'] + }, + mime: { + 'text/x-typescript': ['ts','tsx'] + }, + coverageIstanbulReporter: { + reports: [ 'html', 'lcovonly' ], + fixWebpackSourcePaths: true + }, + angularCli: { + environment: 'dev' + }, + reporters: config.angularCli && config.angularCli.codeCoverage + ? ['progress', 'coverage-istanbul'] + : ['progress', 'kjhtml'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['Chrome'], + singleRun: false + }); +}; diff --git a/demo/cli/package.json b/demo/cli/package.json new file mode 100644 index 0000000..2def746 --- /dev/null +++ b/demo/cli/package.json @@ -0,0 +1,46 @@ +{ + "name": "cli", + "version": "0.0.0", + "license": "MIT", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "private": true, + "dependencies": { + "@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/platform-browser": "^4.0.0", + "@angular/platform-browser-dynamic": "^4.0.0", + "@angular/router": "^4.0.0", + "core-js": "^2.4.1", + "rxjs": "^5.1.0", + "zone.js": "^0.8.4" + }, + "devDependencies": { + "@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", + "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-jasmine": "~1.1.0", + "karma-jasmine-html-reporter": "^0.2.2", + "karma-coverage-istanbul-reporter": "^0.2.0", + "protractor": "~5.1.0", + "ts-node": "~2.0.0", + "tslint": "~4.5.0", + "typescript": "~2.2.0" + } +} diff --git a/demo/cli/protractor.conf.js b/demo/cli/protractor.conf.js new file mode 100644 index 0000000..1c5e1e5 --- /dev/null +++ b/demo/cli/protractor.conf.js @@ -0,0 +1,30 @@ +// Protractor configuration file, see link for more information +// https://github.com/angular/protractor/blob/master/lib/config.ts + +const { SpecReporter } = require('jasmine-spec-reporter'); + +exports.config = { + allScriptsTimeout: 11000, + specs: [ + './e2e/**/*.e2e-spec.ts' + ], + capabilities: { + 'browserName': 'chrome' + }, + directConnect: true, + baseUrl: 'http://localhost:4200/', + framework: 'jasmine', + jasmineNodeOpts: { + showColors: true, + defaultTimeoutInterval: 30000, + print: function() {} + }, + beforeLaunch: function() { + require('ts-node').register({ + project: 'e2e/tsconfig.e2e.json' + }); + }, + onPrepare() { + jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); + } +}; diff --git a/demo/cli/src/app/app.component.css b/demo/cli/src/app/app.component.css new file mode 100644 index 0000000..e69de29 diff --git a/demo/cli/src/app/app.component.html b/demo/cli/src/app/app.component.html new file mode 100644 index 0000000..b6931b5 --- /dev/null +++ b/demo/cli/src/app/app.component.html @@ -0,0 +1,3 @@ +

+ {{title}} +

diff --git a/demo/cli/src/app/app.component.spec.ts b/demo/cli/src/app/app.component.spec.ts new file mode 100644 index 0000000..c740bcd --- /dev/null +++ b/demo/cli/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/demo/cli/src/app/app.component.ts b/demo/cli/src/app/app.component.ts new file mode 100644 index 0000000..ff63e05 --- /dev/null +++ b/demo/cli/src/app/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) +export class AppComponent { + title = 'app works!'; +} diff --git a/demo/cli/src/app/app.module.ts b/demo/cli/src/app/app.module.ts new file mode 100644 index 0000000..67ae491 --- /dev/null +++ b/demo/cli/src/app/app.module.ts @@ -0,0 +1,20 @@ +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { HttpModule } from '@angular/http'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + FormsModule, + HttpModule + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/demo/cli/src/assets/.gitkeep b/demo/cli/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/demo/cli/src/environments/environment.prod.ts b/demo/cli/src/environments/environment.prod.ts new file mode 100644 index 0000000..3612073 --- /dev/null +++ b/demo/cli/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/demo/cli/src/environments/environment.ts b/demo/cli/src/environments/environment.ts new file mode 100644 index 0000000..b7f639a --- /dev/null +++ b/demo/cli/src/environments/environment.ts @@ -0,0 +1,8 @@ +// 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/demo/cli/src/favicon.ico b/demo/cli/src/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..8081c7ceaf2be08bf59010158c586170d9d2d517 GIT binary patch literal 5430 zcmc(je{54#6vvCoAI3i*G5%$U7!sA3wtMZ$fH6V9C`=eXGJb@R1%(I_{vnZtpD{6n z5Pl{DmxzBDbrB>}`90e12m8T*36WoeDLA&SD_hw{H^wM!cl_RWcVA!I+x87ee975; z@4kD^=bYPn&pmG@(+JZ`rqQEKxW<}RzhW}I!|ulN=fmjVi@x{p$cC`)5$a!)X&U+blKNvN5tg=uLvuLnuqRM;Yc*swiexsoh#XPNu{9F#c`G zQLe{yWA(Y6(;>y|-efAy11k<09(@Oo1B2@0`PtZSkqK&${ zgEY}`W@t{%?9u5rF?}Y7OL{338l*JY#P!%MVQY@oqnItpZ}?s z!r?*kwuR{A@jg2Chlf0^{q*>8n5Ir~YWf*wmsh7B5&EpHfd5@xVaj&gqsdui^spyL zB|kUoblGoO7G(MuKTfa9?pGH0@QP^b#!lM1yHWLh*2iq#`C1TdrnO-d#?Oh@XV2HK zKA{`eo{--^K&MW66Lgsktfvn#cCAc*(}qsfhrvOjMGLE?`dHVipu1J3Kgr%g?cNa8 z)pkmC8DGH~fG+dlrp(5^-QBeEvkOvv#q7MBVLtm2oD^$lJZx--_=K&Ttd=-krx(Bb zcEoKJda@S!%%@`P-##$>*u%T*mh+QjV@)Qa=Mk1?#zLk+M4tIt%}wagT{5J%!tXAE;r{@=bb%nNVxvI+C+$t?!VJ@0d@HIyMJTI{vEw0Ul ze(ha!e&qANbTL1ZneNl45t=#Ot??C0MHjjgY8%*mGisN|S6%g3;Hlx#fMNcL<87MW zZ>6moo1YD?P!fJ#Jb(4)_cc50X5n0KoDYfdPoL^iV`k&o{LPyaoqMqk92wVM#_O0l z09$(A-D+gVIlq4TA&{1T@BsUH`Bm=r#l$Z51J-U&F32+hfUP-iLo=jg7Xmy+WLq6_tWv&`wDlz#`&)Jp~iQf zZP)tu>}pIIJKuw+$&t}GQuqMd%Z>0?t%&BM&Wo^4P^Y z)c6h^f2R>X8*}q|bblAF?@;%?2>$y+cMQbN{X$)^R>vtNq_5AB|0N5U*d^T?X9{xQnJYeU{ zoZL#obI;~Pp95f1`%X3D$Mh*4^?O?IT~7HqlWguezmg?Ybq|7>qQ(@pPHbE9V?f|( z+0xo!#m@Np9PljsyxBY-UA*{U*la#8Wz2sO|48_-5t8%_!n?S$zlGe+NA%?vmxjS- zHE5O3ZarU=X}$7>;Okp(UWXJxI%G_J-@IH;%5#Rt$(WUX?6*Ux!IRd$dLP6+SmPn= z8zjm4jGjN772R{FGkXwcNv8GBcZI#@Y2m{RNF_w8(Z%^A*!bS*!}s6sh*NnURytky humW;*g7R+&|Ledvc- + + + + Cli + + + + + + + Loading... + + diff --git a/demo/cli/src/main.ts b/demo/cli/src/main.ts new file mode 100644 index 0000000..a9ca1ca --- /dev/null +++ b/demo/cli/src/main.ts @@ -0,0 +1,11 @@ +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/demo/cli/src/polyfills.ts b/demo/cli/src/polyfills.ts new file mode 100644 index 0000000..53bdaf1 --- /dev/null +++ b/demo/cli/src/polyfills.ts @@ -0,0 +1,68 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following to support `@angular/animation`. */ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + +/** Evergreen browsers require these. **/ +import 'core-js/es6/reflect'; +import 'core-js/es7/reflect'; + + +/** ALL Firefox browsers require the following to support `@angular/animation`. **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. diff --git a/demo/cli/src/styles.css b/demo/cli/src/styles.css new file mode 100644 index 0000000..90d4ee0 --- /dev/null +++ b/demo/cli/src/styles.css @@ -0,0 +1 @@ +/* You can add global styles to this file, and also import other style files */ diff --git a/demo/cli/src/test.ts b/demo/cli/src/test.ts new file mode 100644 index 0000000..9bf7226 --- /dev/null +++ b/demo/cli/src/test.ts @@ -0,0 +1,32 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import 'zone.js/dist/long-stack-trace-zone'; +import 'zone.js/dist/proxy.js'; +import 'zone.js/dist/sync-test'; +import 'zone.js/dist/jasmine-patch'; +import 'zone.js/dist/async-test'; +import 'zone.js/dist/fake-async-test'; +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. +declare var __karma__: any; +declare var require: any; + +// Prevent Karma from running prematurely. +__karma__.loaded = function () {}; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting() +); +// Then we find all the tests. +const context = require.context('./', true, /\.spec\.ts$/); +// And load the modules. +context.keys().map(context); +// Finally, start Karma to run the tests. +__karma__.start(); diff --git a/demo/cli/src/tsconfig.app.json b/demo/cli/src/tsconfig.app.json new file mode 100644 index 0000000..5e2507d --- /dev/null +++ b/demo/cli/src/tsconfig.app.json @@ -0,0 +1,13 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/app", + "module": "es2015", + "baseUrl": "", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/demo/cli/src/tsconfig.spec.json b/demo/cli/src/tsconfig.spec.json new file mode 100644 index 0000000..510e3f1 --- /dev/null +++ b/demo/cli/src/tsconfig.spec.json @@ -0,0 +1,20 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/spec", + "module": "commonjs", + "target": "es5", + "baseUrl": "", + "types": [ + "jasmine", + "node" + ] + }, + "files": [ + "test.ts" + ], + "include": [ + "**/*.spec.ts", + "**/*.d.ts" + ] +} diff --git a/demo/cli/tsconfig.json b/demo/cli/tsconfig.json new file mode 100644 index 0000000..a35a8ee --- /dev/null +++ b/demo/cli/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "outDir": "./dist/out-tsc", + "baseUrl": "src", + "sourceMap": true, + "declaration": false, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "target": "es5", + "typeRoots": [ + "node_modules/@types" + ], + "lib": [ + "es2016", + "dom" + ] + } +} diff --git a/demo/cli/tslint.json b/demo/cli/tslint.json new file mode 100644 index 0000000..9113f13 --- /dev/null +++ b/demo/cli/tslint.json @@ -0,0 +1,116 @@ +{ + "rulesDirectory": [ + "node_modules/codelyzer" + ], + "rules": { + "callable-types": true, + "class-name": true, + "comment-format": [ + true, + "check-space" + ], + "curly": true, + "eofline": true, + "forin": true, + "import-blacklist": [true, "rxjs"], + "import-spacing": true, + "indent": [ + true, + "spaces" + ], + "interface-over-type-literal": true, + "label-position": true, + "max-line-length": [ + true, + 140 + ], + "member-access": false, + "member-ordering": [ + true, + "static-before-instance", + "variables-before-functions" + ], + "no-arg": true, + "no-bitwise": true, + "no-console": [ + true, + "debug", + "info", + "time", + "timeEnd", + "trace" + ], + "no-construct": true, + "no-debugger": true, + "no-duplicate-variable": true, + "no-empty": false, + "no-empty-interface": true, + "no-eval": true, + "no-inferrable-types": [true, "ignore-params"], + "no-shadowed-variable": true, + "no-string-literal": false, + "no-string-throw": true, + "no-switch-case-fall-through": true, + "no-trailing-whitespace": true, + "no-unused-expression": true, + "no-use-before-declare": true, + "no-var-keyword": true, + "object-literal-sort-keys": false, + "one-line": [ + true, + "check-open-brace", + "check-catch", + "check-else", + "check-whitespace" + ], + "prefer-const": true, + "quotemark": [ + true, + "single" + ], + "radix": true, + "semicolon": [ + "always" + ], + "triple-equals": [ + true, + "allow-null-check" + ], + "typedef-whitespace": [ + true, + { + "call-signature": "nospace", + "index-signature": "nospace", + "parameter": "nospace", + "property-declaration": "nospace", + "variable-declaration": "nospace" + } + ], + "typeof-compare": true, + "unified-signatures": true, + "variable-name": false, + "whitespace": [ + true, + "check-branch", + "check-decl", + "check-operator", + "check-separator", + "check-type" + ], + + "directive-selector": [true, "attribute", "app", "camelCase"], + "component-selector": [true, "element", "app", "kebab-case"], + "use-input-property-decorator": true, + "use-output-property-decorator": true, + "use-host-property-decorator": true, + "no-input-rename": true, + "no-output-rename": true, + "use-life-cycle-interface": true, + "use-pipe-transform-interface": true, + "component-class-suffix": true, + "directive-class-suffix": true, + "no-access-missing-member": true, + "templates-use-public": true, + "invoke-injectable": true + } +} From 6804dd7f3697bd23f4c380cfbfc6ed300dc9a3dc Mon Sep 17 00:00:00 2001 From: Miroslav Jonas Date: Fri, 7 Apr 2017 16:34:55 +0200 Subject: [PATCH 2/8] Disable LazyLoading and move prepareRoutes into JIT route translation Version 4 requires different approach to lazy loading --- src/localize-router.module.ts | 26 +++++++-------- src/localize-router.parser.ts | 50 ++++++++++------------------ tests/localize-router.parser.spec.ts | 13 ++++---- 3 files changed, 36 insertions(+), 53 deletions(-) diff --git a/src/localize-router.module.ts b/src/localize-router.module.ts index 141e27d..3288be3 100644 --- a/src/localize-router.module.ts +++ b/src/localize-router.module.ts @@ -1,6 +1,6 @@ import { NgModule, ModuleWithProviders, APP_INITIALIZER, Provider, OpaqueToken, Optional, SkipSelf, - Injectable, Injector, Inject + Injectable, Injector } from '@angular/core'; import { HttpModule, Http } from '@angular/http'; import { LocalizeRouterService } from './localize-router.service'; @@ -9,7 +9,6 @@ import { RouterModule, Routes } from '@angular/router'; import { LocalizeRouterPipe } from './localize-router.pipe'; import { TranslateModule, TranslateService } from '@ngx-translate/core'; import { Location, CommonModule } from '@angular/common'; -import { prepareRoutes } from './localize-router.parser'; export const LOCALIZE_ROUTER_FORROOT_GUARD = new OpaqueToken('LOCALIZE_ROUTER_FORROOT_GUARD'); @@ -58,13 +57,13 @@ export function getAppInitializer(p: ParserInitializer, parser: LocalizeParser, }) export class LocalizeRouterModule { - static Localize: LocalizeParser; - - constructor(@Inject(LocalizeParser) localize: LocalizeParser) { - if (localize && !LocalizeRouterModule.Localize) { - LocalizeRouterModule.Localize = localize; - } - } + // static Localize: LocalizeParser; + // + // constructor(@Inject(LocalizeParser) localize: LocalizeParser) { + // if (localize && !LocalizeRouterModule.Localize) { + // LocalizeRouterModule.Localize = localize; + // } + // } static forRoot( routes: Routes, @@ -85,7 +84,7 @@ export class LocalizeRouterModule { { provide: RAW_ROUTES, multi: true, - useValue: prepareRoutes(routes) + useValue: routes }, localizeLoader, LocalizeRouterService, @@ -107,9 +106,10 @@ export class LocalizeRouterModule { { provide: RAW_ROUTES, multi: true, - useValue: LocalizeRouterModule.Localize ? - LocalizeRouterModule.Localize.initChildRoutes(routes) : - prepareRoutes(routes) + // useValue: LocalizeRouterModule.Localize ? + // LocalizeRouterModule.Localize.initChildRoutes(routes) : + // routes + useValue: routes } ] }; diff --git a/src/localize-router.parser.ts b/src/localize-router.parser.ts index 9af68e7..b1037eb 100644 --- a/src/localize-router.parser.ts +++ b/src/localize-router.parser.ts @@ -25,36 +25,6 @@ export interface ILocalizeRouteConfig { prefix: string; } -/** - * Copy original path/redirect segment names to route's data - * @param routes - * @returns {Routes} - */ -export function prepareRoutes(routes: Routes): Routes { - routes.forEach((route: Route) => { - route.data = route.data || {}; - - if (!(route.data).localizeRouter) { - let pointer: Route = (route.data).localizeRouter = {}; - - if (route.path && route.path !== '**') { - pointer.path = route.path; - } - if (route.redirectTo) { - pointer.redirectTo = route.redirectTo; - } - if (route.children) { - prepareRoutes(route.children); - } - if (route.loadChildren && (route)._loadedConfig) { - prepareRoutes((route)._loadedConfig.routes); - } - } - }); - - return routes; -} - /** * Abstract class for parsing localization */ @@ -127,8 +97,6 @@ export abstract class LocalizeParser { } initChildRoutes(routes: Routes) { - prepareRoutes(routes); - if (!this.translationObject) { // not lazy, it will be translated in main init return routes; @@ -191,8 +159,24 @@ export abstract class LocalizeParser { }); } + /** + * Translate property and if first time add original to cache + * @param route + * @param property + * @param prefixLang + * @private + */ private _translateProperty(route: Route, property: string, prefixLang?: boolean): void { - let result = this.translateRoute((route.data).localizeRouter[property]); + // set property to data if not there yet + let dataPointer: any = route.data = route.data || {}; + if (!dataPointer.localizeRouter) { + dataPointer.localizeRouter = {}; + } + if (!dataPointer.localizeRouter[property]) { + dataPointer.localizeRouter[property] = (route)[property]; + } + + let result = this.translateRoute(dataPointer.localizeRouter[property]); (route)[property] = prefixLang ? `/${this.currentLang}${result}` : result; } diff --git a/tests/localize-router.parser.spec.ts b/tests/localize-router.parser.spec.ts index 3366cff..904efaf 100644 --- a/tests/localize-router.parser.spec.ts +++ b/tests/localize-router.parser.spec.ts @@ -5,7 +5,6 @@ import {Routes} from '@angular/router'; import {Observable} from 'rxjs/Observable'; import {TranslateService} from '@ngx-translate/core'; import {Location, CommonModule} from '@angular/common'; -import { prepareRoutes } from '../src/localize-router.parser'; class FakeTranslateService { defLang: string; @@ -173,7 +172,7 @@ describe('LocalizeParser', () => { (translate)['browserLang'] = 'sr'; - routes = prepareRoutes([{path: 'home', component: DummyComponent }]); + routes = [{path: 'home', component: DummyComponent }]; loader.load(routes); tick(); expect(routes[1].children[0].path).toEqual('home_TR'); @@ -184,7 +183,7 @@ describe('LocalizeParser', () => { spyOn(loader, 'translateRoutes').and.callThrough(); (translate)['browserLang'] = 'sr'; - routes = prepareRoutes([{path: 'abc', component: DummyComponent }]); + routes = [{path: 'abc', component: DummyComponent }]; loader.load(routes); tick(); expect(routes[1].children[0].path).toEqual('abc'); @@ -195,7 +194,7 @@ describe('LocalizeParser', () => { spyOn(loader, 'translateRoutes').and.callThrough(); (translate)['browserLang'] = 'sr'; - routes = prepareRoutes([{redirectTo: 'home' }]); + routes = [{redirectTo: 'home' }]; loader.load(routes); tick(); expect(routes[1].children[0].redirectTo).toEqual('home_TR'); @@ -206,7 +205,7 @@ describe('LocalizeParser', () => { spyOn(loader, 'translateRoutes').and.callThrough(); (translate)['browserLang'] = 'sr'; - routes = prepareRoutes([{path: '/home/about', component: DummyComponent }]); + routes = [{path: '/home/about', component: DummyComponent }]; loader.load(routes); tick(); expect(routes[1].children[0].path).toEqual('/home_TR/about_TR'); @@ -217,11 +216,11 @@ describe('LocalizeParser', () => { spyOn(loader, 'translateRoutes').and.callThrough(); (translate)['browserLang'] = 'sr'; - routes = prepareRoutes([ + routes = [ { path: 'home', children: [ {path: 'about', component: DummyComponent } ]} - ]); + ]; loader.load(routes); tick(); expect(routes[1].children[0].path).toEqual('home_TR'); From 1df51a96d18b98a455f92779202386e7a9912c4c Mon Sep 17 00:00:00 2001 From: Miroslav Jonas Date: Fri, 7 Apr 2017 18:24:19 +0200 Subject: [PATCH 3/8] Add solution files --- demo/cli/package.json | 3 ++ .../cli/src/app/about/about-routing.module.ts | 17 ++++++++++ demo/cli/src/app/about/about.module.ts | 15 +++++++++ .../src/app/about/about/about.component.css | 0 .../src/app/about/about/about.component.html | 3 ++ .../app/about/about/about.component.spec.ts | 25 +++++++++++++++ .../src/app/about/about/about.component.ts | 15 +++++++++ demo/cli/src/app/app-routing.module.ts | 15 +++++++++ demo/cli/src/app/app.component.css | 32 +++++++++++++++++++ demo/cli/src/app/app.component.html | 26 ++++++++++++++- demo/cli/src/app/app.component.ts | 10 +++++- demo/cli/src/app/app.module.ts | 26 +++++++++++++-- demo/cli/src/app/home/home-routing.module.ts | 17 ++++++++++ demo/cli/src/app/home/home.module.ts | 15 +++++++++ demo/cli/src/app/home/home/home.component.css | 0 .../cli/src/app/home/home/home.component.html | 3 ++ .../src/app/home/home/home.component.spec.ts | 25 +++++++++++++++ demo/cli/src/app/home/home/home.component.ts | 15 +++++++++ .../app/users/profile/profile.component.css | 6 ++++ .../app/users/profile/profile.component.html | 8 +++++ .../users/profile/profile.component.spec.ts | 25 +++++++++++++++ .../app/users/profile/profile.component.ts | 17 ++++++++++ .../cli/src/app/users/user/user.component.css | 6 ++++ .../src/app/users/user/user.component.html | 10 ++++++ .../src/app/users/user/user.component.spec.ts | 25 +++++++++++++++ demo/cli/src/app/users/user/user.component.ts | 16 ++++++++++ .../cli/src/app/users/users-routing.module.ts | 25 +++++++++++++++ demo/cli/src/app/users/users.module.ts | 17 ++++++++++ .../src/app/users/users/users.component.css | 6 ++++ .../src/app/users/users/users.component.html | 7 ++++ .../app/users/users/users.component.spec.ts | 25 +++++++++++++++ .../src/app/users/users/users.component.ts | 26 +++++++++++++++ demo/cli/src/assets/locales/de.json | 19 +++++++++++ demo/cli/src/assets/locales/en.json | 19 +++++++++++ demo/cli/src/assets/localize.json | 4 +++ 35 files changed, 519 insertions(+), 4 deletions(-) create mode 100644 demo/cli/src/app/about/about-routing.module.ts create mode 100644 demo/cli/src/app/about/about.module.ts create mode 100644 demo/cli/src/app/about/about/about.component.css create mode 100644 demo/cli/src/app/about/about/about.component.html create mode 100644 demo/cli/src/app/about/about/about.component.spec.ts create mode 100644 demo/cli/src/app/about/about/about.component.ts create mode 100644 demo/cli/src/app/app-routing.module.ts create mode 100644 demo/cli/src/app/home/home-routing.module.ts create mode 100644 demo/cli/src/app/home/home.module.ts create mode 100644 demo/cli/src/app/home/home/home.component.css create mode 100644 demo/cli/src/app/home/home/home.component.html create mode 100644 demo/cli/src/app/home/home/home.component.spec.ts create mode 100644 demo/cli/src/app/home/home/home.component.ts create mode 100644 demo/cli/src/app/users/profile/profile.component.css create mode 100644 demo/cli/src/app/users/profile/profile.component.html create mode 100644 demo/cli/src/app/users/profile/profile.component.spec.ts create mode 100644 demo/cli/src/app/users/profile/profile.component.ts create mode 100644 demo/cli/src/app/users/user/user.component.css create mode 100644 demo/cli/src/app/users/user/user.component.html create mode 100644 demo/cli/src/app/users/user/user.component.spec.ts create mode 100644 demo/cli/src/app/users/user/user.component.ts create mode 100644 demo/cli/src/app/users/users-routing.module.ts create mode 100644 demo/cli/src/app/users/users.module.ts create mode 100644 demo/cli/src/app/users/users/users.component.css create mode 100644 demo/cli/src/app/users/users/users.component.html create mode 100644 demo/cli/src/app/users/users/users.component.spec.ts create mode 100644 demo/cli/src/app/users/users/users.component.ts create mode 100644 demo/cli/src/assets/locales/de.json create mode 100644 demo/cli/src/assets/locales/en.json create mode 100644 demo/cli/src/assets/localize.json diff --git a/demo/cli/package.json b/demo/cli/package.json index 2def746..81f50a1 100644 --- a/demo/cli/package.json +++ b/demo/cli/package.json @@ -20,7 +20,10 @@ "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", + "@ngx-translate/core": "^6.0.1", + "@ngx-translate/http-loader": "0.0.3", "core-js": "^2.4.1", + "localize-router": "0.6.4", "rxjs": "^5.1.0", "zone.js": "^0.8.4" }, diff --git a/demo/cli/src/app/about/about-routing.module.ts b/demo/cli/src/app/about/about-routing.module.ts new file mode 100644 index 0000000..6f182b6 --- /dev/null +++ b/demo/cli/src/app/about/about-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { AboutComponent } from './about/about.component'; + +const aboutRoutes: Routes = [ + { path: 'about', component: AboutComponent }, +]; + +@NgModule({ + imports: [ + RouterModule.forChild(aboutRoutes) + ], + exports: [ + RouterModule + ] +}) +export class AboutRoutingModule { } diff --git a/demo/cli/src/app/about/about.module.ts b/demo/cli/src/app/about/about.module.ts new file mode 100644 index 0000000..2c39ee6 --- /dev/null +++ b/demo/cli/src/app/about/about.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { AboutComponent } from './about/about.component'; +import { TranslateModule } from '@ngx-translate/core'; +import { AboutRoutingModule } from './about-routing.module'; + +@NgModule({ + imports: [ + CommonModule, + TranslateModule, + AboutRoutingModule + ], + declarations: [AboutComponent] +}) +export class AboutModule { } diff --git a/demo/cli/src/app/about/about/about.component.css b/demo/cli/src/app/about/about/about.component.css new file mode 100644 index 0000000..e69de29 diff --git a/demo/cli/src/app/about/about/about.component.html b/demo/cli/src/app/about/about/about.component.html new file mode 100644 index 0000000..5b6c961 --- /dev/null +++ b/demo/cli/src/app/about/about/about.component.html @@ -0,0 +1,3 @@ +

+ {{ 'ABOUT_TEXT' | translate }} +

diff --git a/demo/cli/src/app/about/about/about.component.spec.ts b/demo/cli/src/app/about/about/about.component.spec.ts new file mode 100644 index 0000000..6b77344 --- /dev/null +++ b/demo/cli/src/app/about/about/about.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AboutComponent } from './about.component'; + +describe('AboutComponent', () => { + let component: AboutComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AboutComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AboutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/demo/cli/src/app/about/about/about.component.ts b/demo/cli/src/app/about/about/about.component.ts new file mode 100644 index 0000000..d8a4231 --- /dev/null +++ b/demo/cli/src/app/about/about/about.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-about', + templateUrl: './about.component.html', + styleUrls: ['./about.component.css'] +}) +export class AboutComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/demo/cli/src/app/app-routing.module.ts b/demo/cli/src/app/app-routing.module.ts new file mode 100644 index 0000000..604f9e7 --- /dev/null +++ b/demo/cli/src/app/app-routing.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +const routes: Routes = [ + { path: '', redirectTo: '/home', pathMatch: 'full' }, + // { path: 'dashboard', component: DashboardComponent }, + // { path: 'detail/:id', component: HeroDetailComponent }, + // { path: 'heroes', component: HeroesComponent } +]; + +@NgModule({ + imports: [ RouterModule.forRoot(routes) ], + exports: [ RouterModule ] +}) +export class AppRoutingModule {} diff --git a/demo/cli/src/app/app.component.css b/demo/cli/src/app/app.component.css index e69de29..cf42623 100644 --- a/demo/cli/src/app/app.component.css +++ b/demo/cli/src/app/app.component.css @@ -0,0 +1,32 @@ +:host { + display: block; + padding: 0; + margin: 0; + font-family: Arial, Helvetica, sans-serif; +} +h1 { + background-color: #106cc8; + border-bottom: 2px solid #1059b1; + color: rgba(255, 255, 255, 0.87); + padding: 16px; + font-size: 20px; + font-weight: normal; + letter-spacing: 0.1px; + margin: 0; + display: block; +} +h1 a { + float: right; + padding: 0 8px; +} +h1 a.router-link-active { + color: White; +} +nav { + padding: 8px; + background-color: #d7d8d5; + border-bottom: 2px solid #c0c1be; +} +nav a + a { + margin-left: 8px; +} diff --git a/demo/cli/src/app/app.component.html b/demo/cli/src/app/app.component.html index b6931b5..ea7eb75 100644 --- a/demo/cli/src/app/app.component.html +++ b/demo/cli/src/app/app.component.html @@ -1,3 +1,27 @@

- {{title}} + {{ 'APP_TITLE' | translate }} + + EN + DE

+ + diff --git a/demo/cli/src/app/app.component.ts b/demo/cli/src/app/app.component.ts index ff63e05..8771183 100644 --- a/demo/cli/src/app/app.component.ts +++ b/demo/cli/src/app/app.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import {TranslateService} from '@ngx-translate/core'; @Component({ selector: 'app-root', @@ -6,5 +7,12 @@ import { Component } from '@angular/core'; styleUrls: ['./app.component.css'] }) export class AppComponent { - title = 'app works!'; + + constructor(translate: TranslateService) { + // this language will be used as a fallback when a translation isn't found in the current language + translate.setDefaultLang('en'); + + // the lang to use, if the lang isn't available, it will use the current loader to get them + translate.use('en'); + } } diff --git a/demo/cli/src/app/app.module.ts b/demo/cli/src/app/app.module.ts index 67ae491..dcf8806 100644 --- a/demo/cli/src/app/app.module.ts +++ b/demo/cli/src/app/app.module.ts @@ -1,9 +1,19 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { HttpModule } from '@angular/http'; +import { Http, HttpModule } from '@angular/http'; +import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; +import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { AppComponent } from './app.component'; +import { AppRoutingModule } from './app-routing.module'; +import { HomeModule } from './home/home.module'; +import { AboutModule } from './about/about.module'; +import { UsersModule } from './users/users.module'; + +export function HttpLoaderFactory(http: Http) { + return new TranslateHttpLoader(http, '/assets/locales/', '.json'); +} @NgModule({ declarations: [ @@ -12,7 +22,19 @@ import { AppComponent } from './app.component'; imports: [ BrowserModule, FormsModule, - HttpModule + HttpModule, + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useFactory: HttpLoaderFactory, + deps: [ Http ] + } + }), + // feature modules + HomeModule, + AboutModule, + UsersModule, + AppRoutingModule ], providers: [], bootstrap: [AppComponent] diff --git a/demo/cli/src/app/home/home-routing.module.ts b/demo/cli/src/app/home/home-routing.module.ts new file mode 100644 index 0000000..e8c8a57 --- /dev/null +++ b/demo/cli/src/app/home/home-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { HomeComponent } from './home/home.component'; + +const homeRoutes: Routes = [ + { path: 'home', component: HomeComponent }, +]; + +@NgModule({ + imports: [ + RouterModule.forChild(homeRoutes) + ], + exports: [ + RouterModule + ] +}) +export class HomeRoutingModule { } diff --git a/demo/cli/src/app/home/home.module.ts b/demo/cli/src/app/home/home.module.ts new file mode 100644 index 0000000..c6174fe --- /dev/null +++ b/demo/cli/src/app/home/home.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { HomeComponent } from './home/home.component'; +import { TranslateModule } from '@ngx-translate/core'; +import { HomeRoutingModule } from './home-routing.module'; + +@NgModule({ + imports: [ + CommonModule, + TranslateModule, + HomeRoutingModule + ], + declarations: [HomeComponent] +}) +export class HomeModule { } diff --git a/demo/cli/src/app/home/home/home.component.css b/demo/cli/src/app/home/home/home.component.css new file mode 100644 index 0000000..e69de29 diff --git a/demo/cli/src/app/home/home/home.component.html b/demo/cli/src/app/home/home/home.component.html new file mode 100644 index 0000000..0bb322a --- /dev/null +++ b/demo/cli/src/app/home/home/home.component.html @@ -0,0 +1,3 @@ +

+ {{ 'HOME_TEXT' | translate }} +

diff --git a/demo/cli/src/app/home/home/home.component.spec.ts b/demo/cli/src/app/home/home/home.component.spec.ts new file mode 100644 index 0000000..490e81b --- /dev/null +++ b/demo/cli/src/app/home/home/home.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/demo/cli/src/app/home/home/home.component.ts b/demo/cli/src/app/home/home/home.component.ts new file mode 100644 index 0000000..33fd770 --- /dev/null +++ b/demo/cli/src/app/home/home/home.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.css'] +}) +export class HomeComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/demo/cli/src/app/users/profile/profile.component.css b/demo/cli/src/app/users/profile/profile.component.css new file mode 100644 index 0000000..d546ec7 --- /dev/null +++ b/demo/cli/src/app/users/profile/profile.component.css @@ -0,0 +1,6 @@ +nav a { + margin: 8px; +} +nav { + padding: 8px; +} diff --git a/demo/cli/src/app/users/profile/profile.component.html b/demo/cli/src/app/users/profile/profile.component.html new file mode 100644 index 0000000..3cab67f --- /dev/null +++ b/demo/cli/src/app/users/profile/profile.component.html @@ -0,0 +1,8 @@ + +

{{'PROFILE_TEXT' | translate}}

+

+ {{user | async}} +

diff --git a/demo/cli/src/app/users/profile/profile.component.spec.ts b/demo/cli/src/app/users/profile/profile.component.spec.ts new file mode 100644 index 0000000..692b234 --- /dev/null +++ b/demo/cli/src/app/users/profile/profile.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProfileComponent } from './profile.component'; + +describe('ProfileComponent', () => { + let component: ProfileComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ProfileComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ProfileComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/demo/cli/src/app/users/profile/profile.component.ts b/demo/cli/src/app/users/profile/profile.component.ts new file mode 100644 index 0000000..52eb4ca --- /dev/null +++ b/demo/cli/src/app/users/profile/profile.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; +import { ActivatedRoute } from '@angular/router'; + +@Component({ + selector: 'app-profile', + templateUrl: './profile.component.html', + styleUrls: ['./profile.component.css'] +}) +export class ProfileComponent { + user: Observable; + + constructor(private route: ActivatedRoute) { + this.user = route.params.map((p: any) => p.id); + } + +} diff --git a/demo/cli/src/app/users/user/user.component.css b/demo/cli/src/app/users/user/user.component.css new file mode 100644 index 0000000..d546ec7 --- /dev/null +++ b/demo/cli/src/app/users/user/user.component.css @@ -0,0 +1,6 @@ +nav a { + margin: 8px; +} +nav { + padding: 8px; +} diff --git a/demo/cli/src/app/users/user/user.component.html b/demo/cli/src/app/users/user/user.component.html new file mode 100644 index 0000000..d52e5ec --- /dev/null +++ b/demo/cli/src/app/users/user/user.component.html @@ -0,0 +1,10 @@ + +

{{'USER_TEXT' | translate}}

+

+ {{user | async}} +

diff --git a/demo/cli/src/app/users/user/user.component.spec.ts b/demo/cli/src/app/users/user/user.component.spec.ts new file mode 100644 index 0000000..dd3b1d7 --- /dev/null +++ b/demo/cli/src/app/users/user/user.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UserComponent } from './user.component'; + +describe('UserComponent', () => { + let component: UserComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ UserComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(UserComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/demo/cli/src/app/users/user/user.component.ts b/demo/cli/src/app/users/user/user.component.ts new file mode 100644 index 0000000..8649a89 --- /dev/null +++ b/demo/cli/src/app/users/user/user.component.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; +import { ActivatedRoute } from '@angular/router'; + +@Component({ + selector: 'app-user', + templateUrl: './user.component.html', + styleUrls: ['./user.component.css'] +}) +export class UserComponent { + user: Observable; + + constructor(private route: ActivatedRoute) { + this.user = route.params.map((p: any) => p.id); + } +} diff --git a/demo/cli/src/app/users/users-routing.module.ts b/demo/cli/src/app/users/users-routing.module.ts new file mode 100644 index 0000000..552d1c2 --- /dev/null +++ b/demo/cli/src/app/users/users-routing.module.ts @@ -0,0 +1,25 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { UsersComponent } from './users/users.component'; +import { UserComponent } from './user/user.component'; +import { ProfileComponent } from './profile/profile.component'; + +const usersRoutes: Routes = [ + { path: 'users', + children: [ + { path: '', component: UsersComponent }, + { path: ':id', component: UserComponent }, + { path: ':id/profile', component: ProfileComponent }, + ] + }, +]; + +@NgModule({ + imports: [ + RouterModule.forChild(usersRoutes) + ], + exports: [ + RouterModule + ] +}) +export class UsersRoutingModule { } diff --git a/demo/cli/src/app/users/users.module.ts b/demo/cli/src/app/users/users.module.ts new file mode 100644 index 0000000..de6e059 --- /dev/null +++ b/demo/cli/src/app/users/users.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { UsersComponent } from './users/users.component'; +import { UserComponent } from './user/user.component'; +import { ProfileComponent } from './profile/profile.component'; +import { TranslateModule } from '@ngx-translate/core'; +import { UsersRoutingModule } from './users-routing.module'; + +@NgModule({ + imports: [ + CommonModule, + TranslateModule, + UsersRoutingModule + ], + declarations: [UsersComponent, UserComponent, ProfileComponent] +}) +export class UsersModule { } diff --git a/demo/cli/src/app/users/users/users.component.css b/demo/cli/src/app/users/users/users.component.css new file mode 100644 index 0000000..d546ec7 --- /dev/null +++ b/demo/cli/src/app/users/users/users.component.css @@ -0,0 +1,6 @@ +nav a { + margin: 8px; +} +nav { + padding: 8px; +} diff --git a/demo/cli/src/app/users/users/users.component.html b/demo/cli/src/app/users/users/users.component.html new file mode 100644 index 0000000..b9f10fd --- /dev/null +++ b/demo/cli/src/app/users/users/users.component.html @@ -0,0 +1,7 @@ + +

+ {{ 'USERS_TEXT' | translate }} +

diff --git a/demo/cli/src/app/users/users/users.component.spec.ts b/demo/cli/src/app/users/users/users.component.spec.ts new file mode 100644 index 0000000..909b5ba --- /dev/null +++ b/demo/cli/src/app/users/users/users.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UsersComponent } from './users.component'; + +describe('UsersComponent', () => { + let component: UsersComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ UsersComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(UsersComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/demo/cli/src/app/users/users/users.component.ts b/demo/cli/src/app/users/users/users.component.ts new file mode 100644 index 0000000..b072bc0 --- /dev/null +++ b/demo/cli/src/app/users/users/users.component.ts @@ -0,0 +1,26 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-users', + templateUrl: './users.component.html', + styleUrls: ['./users.component.css'] +}) +export class UsersComponent implements OnInit { + + users: string[]; + + constructor() { } + + ngOnInit() { + this.users = [ + 'Ada Lovelace', + 'Niklaus Wirth', + 'Donald Knuth', + 'Bjarne Stroustrup', + 'Edsger W. Dijkstra', + 'Alan Turing', + 'Anders Hejlsberg' + ] + } + +} diff --git a/demo/cli/src/assets/locales/de.json b/demo/cli/src/assets/locales/de.json new file mode 100644 index 0000000..0acbafd --- /dev/null +++ b/demo/cli/src/assets/locales/de.json @@ -0,0 +1,19 @@ +{ + "APP_TITLE": "Einige Applikationstext", + "HOME": "Startseite >", + "USERS": "Benutzer >", + "ABOUT": "Über >", + "PROFILE": "Profil >", + "BACK": "< Zurkuck", + + "HOME_TEXT": "Die Startseite funktioniert", + "ABOUT_TEXT": "Die Über Seite funktioniert", + "USERS_TEXT": "Die Benutzer funktioniert", + "PROFILE_TEXT": "Das Profil", + "USER_TEXT": "Der Benutzer", + + "ROUTES.users": "benutzer", + "ROUTES.profile": "profil", + "ROUTES.home": "startseite", + "ROUTES.about": "ueber" +} diff --git a/demo/cli/src/assets/locales/en.json b/demo/cli/src/assets/locales/en.json new file mode 100644 index 0000000..a408a9b --- /dev/null +++ b/demo/cli/src/assets/locales/en.json @@ -0,0 +1,19 @@ +{ + "APP_TITLE": "Some app text", + "HOME": "Home >", + "USERS": "Users >", + "ABOUT": "About >", + "PROFILE": "Profile >", + "BACK": "< Back", + + "HOME_TEXT": "Home works", + "ABOUT_TEXT": "About works", + "USERS_TEXT": "Users works", + "PROFILE_TEXT": "Profile page", + "USER_TEXT": "User page", + + "ROUTES.users": "users", + "ROUTES.profile": "profile", + "ROUTES.home": "home", + "ROUTES.about": "about" +} diff --git a/demo/cli/src/assets/localize.json b/demo/cli/src/assets/localize.json new file mode 100644 index 0000000..27e76b9 --- /dev/null +++ b/demo/cli/src/assets/localize.json @@ -0,0 +1,4 @@ +{ + "locales": ["en", "de"], + "prefix": "ROUTES." +} From c55a4f1e8925a1df790a688effd0aa117e0e6f49 Mon Sep 17 00:00:00 2001 From: Miroslav Jonas Date: Mon, 10 Apr 2017 15:20:17 +0200 Subject: [PATCH 4/8] Support for ng4 --- demo/cli/package.json | 2 +- demo/cli/src/app/about/about-routing.module.ts | 8 ++++---- demo/cli/src/app/app-routing.module.ts | 8 ++++++-- demo/cli/src/app/app.component.html | 15 +++------------ demo/cli/src/app/app.component.ts | 8 -------- demo/cli/src/app/home/home-routing.module.ts | 8 ++++---- .../src/app/users/profile/profile.component.html | 3 +-- demo/cli/src/app/users/user/user.component.html | 6 ++---- demo/cli/src/app/users/users-routing.module.ts | 8 ++++---- .../src/assets/{localize.json => locales.json} | 0 demo/cli/src/assets/locales/de.json | 2 +- package.json | 2 +- 12 files changed, 27 insertions(+), 43 deletions(-) rename demo/cli/src/assets/{localize.json => locales.json} (100%) diff --git a/demo/cli/package.json b/demo/cli/package.json index 81f50a1..36de72e 100644 --- a/demo/cli/package.json +++ b/demo/cli/package.json @@ -23,7 +23,7 @@ "@ngx-translate/core": "^6.0.1", "@ngx-translate/http-loader": "0.0.3", "core-js": "^2.4.1", - "localize-router": "0.6.4", + "localize-router": "^0.6.4", "rxjs": "^5.1.0", "zone.js": "^0.8.4" }, diff --git a/demo/cli/src/app/about/about-routing.module.ts b/demo/cli/src/app/about/about-routing.module.ts index 6f182b6..bc1eb9c 100644 --- a/demo/cli/src/app/about/about-routing.module.ts +++ b/demo/cli/src/app/about/about-routing.module.ts @@ -1,6 +1,7 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AboutComponent } from './about/about.component'; +import { LocalizeRouterModule } from 'localize-router'; const aboutRoutes: Routes = [ { path: 'about', component: AboutComponent }, @@ -8,10 +9,9 @@ const aboutRoutes: Routes = [ @NgModule({ imports: [ - RouterModule.forChild(aboutRoutes) + RouterModule.forChild(aboutRoutes), + LocalizeRouterModule.forChild(aboutRoutes) ], - exports: [ - RouterModule - ] + exports: [ RouterModule, LocalizeRouterModule ] }) export class AboutRoutingModule { } diff --git a/demo/cli/src/app/app-routing.module.ts b/demo/cli/src/app/app-routing.module.ts index 604f9e7..fa54768 100644 --- a/demo/cli/src/app/app-routing.module.ts +++ b/demo/cli/src/app/app-routing.module.ts @@ -1,5 +1,6 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { LocalizeRouterModule } from 'localize-router'; const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, @@ -9,7 +10,10 @@ const routes: Routes = [ ]; @NgModule({ - imports: [ RouterModule.forRoot(routes) ], - exports: [ RouterModule ] + imports: [ + RouterModule.forRoot(routes), + LocalizeRouterModule.forRoot(routes) + ], + exports: [ RouterModule, LocalizeRouterModule ] }) export class AppRoutingModule {} diff --git a/demo/cli/src/app/app.component.html b/demo/cli/src/app/app.component.html index ea7eb75..41961f5 100644 --- a/demo/cli/src/app/app.component.html +++ b/demo/cli/src/app/app.component.html @@ -5,22 +5,13 @@

DE

diff --git a/demo/cli/src/app/app.component.ts b/demo/cli/src/app/app.component.ts index 8771183..0487f76 100644 --- a/demo/cli/src/app/app.component.ts +++ b/demo/cli/src/app/app.component.ts @@ -7,12 +7,4 @@ import {TranslateService} from '@ngx-translate/core'; styleUrls: ['./app.component.css'] }) export class AppComponent { - - constructor(translate: TranslateService) { - // this language will be used as a fallback when a translation isn't found in the current language - translate.setDefaultLang('en'); - - // the lang to use, if the lang isn't available, it will use the current loader to get them - translate.use('en'); - } } diff --git a/demo/cli/src/app/home/home-routing.module.ts b/demo/cli/src/app/home/home-routing.module.ts index e8c8a57..aaf4c46 100644 --- a/demo/cli/src/app/home/home-routing.module.ts +++ b/demo/cli/src/app/home/home-routing.module.ts @@ -1,6 +1,7 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; +import { LocalizeRouterModule } from 'localize-router'; const homeRoutes: Routes = [ { path: 'home', component: HomeComponent }, @@ -8,10 +9,9 @@ const homeRoutes: Routes = [ @NgModule({ imports: [ - RouterModule.forChild(homeRoutes) + RouterModule.forChild(homeRoutes), + LocalizeRouterModule.forChild(homeRoutes) ], - exports: [ - RouterModule - ] + exports: [ RouterModule, LocalizeRouterModule ] }) export class HomeRoutingModule { } diff --git a/demo/cli/src/app/users/profile/profile.component.html b/demo/cli/src/app/users/profile/profile.component.html index 3cab67f..18e67d0 100644 --- a/demo/cli/src/app/users/profile/profile.component.html +++ b/demo/cli/src/app/users/profile/profile.component.html @@ -1,6 +1,5 @@

{{'PROFILE_TEXT' | translate}}

diff --git a/demo/cli/src/app/users/user/user.component.html b/demo/cli/src/app/users/user/user.component.html index d52e5ec..1d58d37 100644 --- a/demo/cli/src/app/users/user/user.component.html +++ b/demo/cli/src/app/users/user/user.component.html @@ -1,8 +1,6 @@

{{'USER_TEXT' | translate}}

diff --git a/demo/cli/src/app/users/users-routing.module.ts b/demo/cli/src/app/users/users-routing.module.ts index 552d1c2..944218e 100644 --- a/demo/cli/src/app/users/users-routing.module.ts +++ b/demo/cli/src/app/users/users-routing.module.ts @@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router'; import { UsersComponent } from './users/users.component'; import { UserComponent } from './user/user.component'; import { ProfileComponent } from './profile/profile.component'; +import { LocalizeRouterModule } from 'localize-router'; const usersRoutes: Routes = [ { path: 'users', @@ -16,10 +17,9 @@ const usersRoutes: Routes = [ @NgModule({ imports: [ - RouterModule.forChild(usersRoutes) + RouterModule.forChild(usersRoutes), + LocalizeRouterModule.forChild(usersRoutes) ], - exports: [ - RouterModule - ] + exports: [ RouterModule, LocalizeRouterModule ] }) export class UsersRoutingModule { } diff --git a/demo/cli/src/assets/localize.json b/demo/cli/src/assets/locales.json similarity index 100% rename from demo/cli/src/assets/localize.json rename to demo/cli/src/assets/locales.json diff --git a/demo/cli/src/assets/locales/de.json b/demo/cli/src/assets/locales/de.json index 0acbafd..f75f5a5 100644 --- a/demo/cli/src/assets/locales/de.json +++ b/demo/cli/src/assets/locales/de.json @@ -4,7 +4,7 @@ "USERS": "Benutzer >", "ABOUT": "Über >", "PROFILE": "Profil >", - "BACK": "< Zurkuck", + "BACK": "< Zurück", "HOME_TEXT": "Die Startseite funktioniert", "ABOUT_TEXT": "Die Über Seite funktioniert", diff --git a/package.json b/package.json index 91a2e01..0fdb16a 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "@angular/core": ">=2.0.0", "@angular/common": ">=2.0.0", "@angular/http": ">=2.0.0", - "@angular/router": ">=3.0.0 && <4.0.0", + "@angular/router": ">=3.0.0", "rxjs": "^5.0.0", "@ngx-translate/core": "^6.0.0" }, From 6c8d71e81f64d0754e01250d5193202a2d9334c2 Mon Sep 17 00:00:00 2001 From: Miroslav Jonas Date: Mon, 10 Apr 2017 17:34:23 +0200 Subject: [PATCH 5/8] Add full path translation buttons to demo --- demo/cli/src/app/app.component.css | 18 ++++++++++++------ demo/cli/src/app/app.component.html | 14 +++++++++----- demo/cli/src/app/app.component.ts | 8 +++++++- 3 files changed, 28 insertions(+), 12 deletions(-) diff --git a/demo/cli/src/app/app.component.css b/demo/cli/src/app/app.component.css index cf42623..9a60ea1 100644 --- a/demo/cli/src/app/app.component.css +++ b/demo/cli/src/app/app.component.css @@ -4,22 +4,28 @@ margin: 0; font-family: Arial, Helvetica, sans-serif; } -h1 { +header { background-color: #106cc8; border-bottom: 2px solid #1059b1; color: rgba(255, 255, 255, 0.87); padding: 16px; - font-size: 20px; - font-weight: normal; letter-spacing: 0.1px; margin: 0; display: block; } -h1 a { +h1 { + font-size: 20px; + font-weight: normal; + display: inline; +} +.button-bar { + float: right; +} +header a, header button { float: right; - padding: 0 8px; + margin: 0 8px; } -h1 a.router-link-active { +header a.router-link-active { color: White; } nav { diff --git a/demo/cli/src/app/app.component.html b/demo/cli/src/app/app.component.html index 41961f5..dc49040 100644 --- a/demo/cli/src/app/app.component.html +++ b/demo/cli/src/app/app.component.html @@ -1,9 +1,13 @@ -

- {{ 'APP_TITLE' | translate }} +
+

{{ 'APP_TITLE' | translate }}

- EN - DE -

+ + EN + DE + + + +