From fefc6e2957b213223466238d08824fd743820e75 Mon Sep 17 00:00:00 2001 From: Olivier Combe Date: Sat, 16 Jan 2016 07:21:11 +0100 Subject: [PATCH 001/193] chore: removed ng2-translate --- README.md | 4 ++-- package.json | 1 - src/app/app.html | 2 +- src/app/app.ts | 13 ++----------- src/bootstrap.ts | 4 ---- src/vendor.ts | 1 - 6 files changed, 5 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 0ccd9173..7ec7a375 100644 --- a/README.md +++ b/README.md @@ -114,9 +114,9 @@ npm run docs # FAQ -#### Coming Soon +#### How to include external angular 2 libraries ? -We will post common Q&A as they arise +It's simple, just add the lib to package.json and import it in your code when you need it. Don't forget that you need to configure some external libs in the [bootstrap](https://github.com/ocombe/ng2-webpack/blob/master/src/bootstrap.ts) of your application. # TypeScript > To take full advantage of TypeScript with autocomplete you would have to install it globally and use an editor with the correct TypeScript plugins. diff --git a/package.json b/package.json index 315fdebd..9fd79544 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,6 @@ "angular2": "2.0.0-beta.1", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", - "ng2-translate": "^1.2.5", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.0", "zone.js": "0.5.10" diff --git a/src/app/app.html b/src/app/app.html index c6c7dd82..8b5b9a5c 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -5,7 +5,7 @@
-

{{ 'HELLO' | translate }} from {{api.title}} !

+

Hello from {{api.title}} !

diff --git a/src/app/app.ts b/src/app/app.ts index 22b2079e..d7c0429a 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,7 +1,6 @@ import {Component} from 'angular2/core'; import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; import {FORM_PROVIDERS} from 'angular2/common'; -import {TranslateService, TranslatePipe} from "ng2-translate/ng2-translate"; import '../style/app.scss'; @@ -17,7 +16,7 @@ import {About} from "./components/about/about"; selector: 'app', // providers: [...FORM_PROVIDERS, Api], directives: [...ROUTER_DIRECTIVES], - pipes: [TranslatePipe], + pipes: [], styles: [require('./app.scss')], template: require('./app.html') }) @@ -28,14 +27,6 @@ import {About} from "./components/about/about"; export class App { url: string = 'https://github.com/ocombe/ng2-webpack'; - constructor(public api: Api, public translate: TranslateService) { - var userLang = navigator.language.split('-')[0]; // use navigator lang if available - userLang = /(fr|en)/gi.test(userLang) ? userLang : 'en'; - - // this will load translate json files from src/public/i18n - translate.useStaticFilesLoader(); - - // the lang to use, if the lang isn't available, it will use the current loader to get them - translate.use(userLang); + constructor(public api: Api) { } } diff --git a/src/bootstrap.ts b/src/bootstrap.ts index e09bfbba..93995e79 100644 --- a/src/bootstrap.ts +++ b/src/bootstrap.ts @@ -6,9 +6,6 @@ import {ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/common_dom'; // include for production builds // import {enableProdMode} from 'angular2/core'; -// Example of external lib -import {TranslateService} from "ng2-translate/ng2-translate"; - /* * App Component * our top level component that holds all of our components @@ -25,7 +22,6 @@ function main() { // These are dependencies of our App HTTP_PROVIDERS, ROUTER_PROVIDERS, - TranslateService, // this provider has been defined in bootstrap and will be the same for all components ELEMENT_PROBE_PROVIDERS // remove in production ]) .catch(err => console.error(err)); diff --git a/src/vendor.ts b/src/vendor.ts index 1cb002b6..3c0e1dca 100644 --- a/src/vendor.ts +++ b/src/vendor.ts @@ -12,4 +12,3 @@ import 'angular2/http'; import 'rxjs'; // Other vendors for example jQuery or Lodash -import "ng2-translate/ng2-translate"; From f73e6e5161fbc94aa1d7497ca504071bcedea363 Mon Sep 17 00:00:00 2001 From: Olivier Combe Date: Sat, 16 Jan 2016 07:33:55 +0100 Subject: [PATCH 002/193] fix: use the raw css loader only for css/sass from the src/app folder Fixes #12 Fixes #14 --- README.md | 15 ++++++++++++++- src/vendor.ts | 3 ++- webpack.config.js | 2 +- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 7ec7a375..1543095d 100644 --- a/README.md +++ b/README.md @@ -116,7 +116,20 @@ npm run docs #### How to include external angular 2 libraries ? -It's simple, just add the lib to package.json and import it in your code when you need it. Don't forget that you need to configure some external libs in the [bootstrap](https://github.com/ocombe/ng2-webpack/blob/master/src/bootstrap.ts) of your application. +It's simple, just install the lib via npm and import it in your code when you need it. Don't forget that you need to configure some external libs in the [bootstrap](https://github.com/ocombe/ng2-webpack/blob/master/src/bootstrap.ts) of your application. + +### How to include external css files such as bootstrap.css ? + +Just install the lib and import the css files in [vendor.ts](https://github.com/ocombe/ng2-webpack/blob/master/src/vendor.ts). For example this is how to do it with bootstrap: +```sh +npm install bootstrap@4.0.0 +``` + +And in [vendor.ts](https://github.com/ocombe/ng2-webpack/blob/master/src/vendor.ts) add the following: +```ts +import 'bootstrap/dist/css/bootstrap.css'; +``` + # TypeScript > To take full advantage of TypeScript with autocomplete you would have to install it globally and use an editor with the correct TypeScript plugins. diff --git a/src/vendor.ts b/src/vendor.ts index 3c0e1dca..70cee5ba 100644 --- a/src/vendor.ts +++ b/src/vendor.ts @@ -11,4 +11,5 @@ import 'angular2/http'; // RxJS import 'rxjs'; -// Other vendors for example jQuery or Lodash +// Other vendors for example jQuery, Lodash or Bootstrap +// You can import js, ts, css, sass, ... diff --git a/webpack.config.js b/webpack.config.js index 39fa852a..a8750bdb 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -111,7 +111,7 @@ module.exports = (function makeWebpackConfig() { // all css in src/style will be bundled in an external css file {test: /\.css$/, exclude: root('src','app'), loader: TEST ? 'null' : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')}, // all css required in src/app files will be merged in js files - {test: /\.css$/, exclude: root('src', 'style'), loader: 'raw!postcss'}, + {test: /\.css$/, include: root('src', 'app'), loader: 'raw!postcss'}, // support for .scss files // use 'null' loader in test mode (https://github.com/webpack/null-loader) From b01ab41ea990ca6ddf36dd89372b5f1f2a3e72f5 Mon Sep 17 00:00:00 2001 From: Olivier Combe Date: Sat, 16 Jan 2016 07:35:09 +0100 Subject: [PATCH 003/193] docs --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1543095d..62d3f65c 100644 --- a/README.md +++ b/README.md @@ -122,7 +122,7 @@ It's simple, just install the lib via npm and import it in your code when you ne Just install the lib and import the css files in [vendor.ts](https://github.com/ocombe/ng2-webpack/blob/master/src/vendor.ts). For example this is how to do it with bootstrap: ```sh -npm install bootstrap@4.0.0 +npm install bootstrap@4.0.0 --save ``` And in [vendor.ts](https://github.com/ocombe/ng2-webpack/blob/master/src/vendor.ts) add the following: From 760b71c47fc03d804a67a3d770e5daf076b1c225 Mon Sep 17 00:00:00 2001 From: Olivier Combe Date: Sun, 17 Jan 2016 12:26:26 +0100 Subject: [PATCH 004/193] Removed useless tests --- src/app/app.e2e.js | 14 +------------- src/app/app.spec.ts | 29 +---------------------------- 2 files changed, 2 insertions(+), 41 deletions(-) diff --git a/src/app/app.e2e.js b/src/app/app.e2e.js index be484ce9..9e45c68d 100644 --- a/src/app/app.e2e.js +++ b/src/app/app.e2e.js @@ -17,19 +17,7 @@ describe('App', function() { }); it('should have a main title', function() { - // let's get the navigator language - browser.executeScript(function() { - return window.navigator.language; - }).then(function(lang) { - var userLang = lang.split('-')[0]; // use navigator lang if available - userLang = /(fr|en)/gi.test(userLang) ? userLang : 'en'; - - // compose title - // if ng2-translate worked, it should have loaded the translation for "HELLO" which is "Bonjour" in french, and "Hello" in english - var title = (userLang === 'fr' ? 'Bonjour' : 'Hello') + ' from Angular 2 !'; - - expect(element(by.css('main .title')).getText()).toEqual(title); - }); + expect(element(by.css('main .title')).getText()).toEqual('Hello from Angular 2 !'); }); it('should have