Skip to content
This repository was archived by the owner on Nov 23, 2021. It is now read-only.

Commit 62d1972

Browse files
mmatczak-cgmmatczak-cg
committed
Migration to Angular 4 and Angular CLI 1.0
1 parent cba579b commit 62d1972

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+6707
-1
lines changed

‎.angular-cli.json

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"project": {
4+
"name": "oasp4js-ng-project-seed"
5+
},
6+
"apps": [
7+
{
8+
"root": "src",
9+
"outDir": "dist",
10+
"assets": [
11+
"assets",
12+
"favicon.ico"
13+
],
14+
"index": "index.html",
15+
"main": "main.ts",
16+
"polyfills": "polyfills.ts",
17+
"test": "test.ts",
18+
"tsconfig": "tsconfig.app.json",
19+
"testTsconfig": "tsconfig.spec.json",
20+
"prefix": "app",
21+
"styles": [
22+
"styles.scss"
23+
],
24+
"scripts": [],
25+
"environmentSource": "environments/environment.ts",
26+
"environments": {
27+
"dev": "environments/environment.ts",
28+
"prod": "environments/environment.prod.ts"
29+
}
30+
}
31+
],
32+
"e2e": {
33+
"protractor": {
34+
"config": "./protractor.conf.js"
35+
}
36+
},
37+
"lint": [
38+
{
39+
"project": "src/tsconfig.app.json"
40+
},
41+
{
42+
"project": "src/tsconfig.spec.json"
43+
},
44+
{
45+
"project": "e2e/tsconfig.e2e.json"
46+
}
47+
],
48+
"test": {
49+
"karma": {
50+
"config": "./karma.conf.js"
51+
}
52+
},
53+
"defaults": {
54+
"styleExt": "scss",
55+
"component": {}
56+
}
57+
}

‎.editorconfig

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Editor configuration, see http://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.md]
12+
max_line_length = off
13+
trim_trailing_whitespace = false

‎.gitignore

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
8+
# dependencies
9+
/node_modules
10+
11+
# IDEs and editors
12+
/.idea
13+
.project
14+
.classpath
15+
.c9/
16+
*.launch
17+
.settings/
18+
*.sublime-workspace
19+
20+
# IDE - VSCode
21+
.vscode/*
22+
!.vscode/settings.json
23+
!.vscode/tasks.json
24+
!.vscode/launch.json
25+
!.vscode/extensions.json
26+
27+
# misc
28+
/.sass-cache
29+
/connect.lock
30+
/coverage
31+
/libpeerconnection.log
32+
npm-debug.log
33+
testem.log
34+
/typings
35+
36+
# e2e
37+
/e2e/*.js
38+
/e2e/*.map
39+
40+
# System Files
41+
.DS_Store
42+
Thumbs.db

‎README.adoc

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
= OASP4JS Angular Project Seed
2+
3+
This is an Angular Project Seed recommended by OASP4JS. The Project Seed is in fact a simple application built upon
4+
the https://github.com/angular/angular-cli[Angular CLI].
5+
6+
== Getting started
7+
8+
=== Install prerequisites
9+
10+
You need a Git client, the https://nodejs.org/[Node.js], the https://yarnpkg.com/[Yarn package manager] and the https://github.com/angular/angular-cli[Angular CLI] to make use of the project seed.
11+
It is highly recommended to use the following versions:
12+
13+
* Node.js 6.9.5
14+
* Yarn 0.21.3
15+
* Angular CLI 1.0.0
16+
17+
==== Git
18+
Check if you have a Git client already installed:
19+
20+
----
21+
git --version
22+
----
23+
24+
If your OS can not recognize this command, install Git. For details please refer to http://git-scm.com[this page].
25+
When installing under Windows, please make sure you check the following option:
26+
27+
- [*] Use git from Windows command prompt
28+
29+
==== Node.js
30+
31+
It is highly recommended to install the https://github.com/creationix/nvm[Node Version Manager] which manages multiple active
32+
Node.js versions on your machine. The windows version of nvm can be found https://github.com/coreybutler/nvm-windows#installation--upgrades[here].
33+
34+
==== Yarn
35+
36+
Having installed Node.js (using the https://github.com/creationix/nvm[Node Version Manager]) you have also its package manager - https://www.npmjs.com/[npm] installed which can be used to install https://yarnpkg.com/[Yarn]:
37+
38+
----
39+
npm install -g yarn
40+
----
41+
42+
Please note that this is not the only possibility available. Please refer to the https://yarnpkg.com/en/docs/install[Yarn Installation Instructions] for more details on other possibilities.
43+
44+
==== Angular CLI
45+
46+
Having installed https://yarnpkg.com/[Yarn] you can install https://github.com/angular/angular-cli[Angular CLI] like this:
47+
48+
----
49+
yarn global add @angular/cli
50+
----
51+
52+
=== Run the application
53+
54+
Clone this repository:
55+
56+
----
57+
git clone https://github.com/oasp/oasp4js-ng-project-seed.git
58+
----
59+
60+
let https://yarnpkg.com/[Yarn] to install all dependencies:
61+
62+
----
63+
cd oasp4js-ng-project-seed
64+
yarn
65+
----
66+
67+
and start the application
68+
69+
----
70+
ng serve
71+
----
72+
73+
== How we created the application
74+
75+
=== https://github.com/angular/angular-cli[Angular CLI] in action
76+
77+
The application was generated using the https://github.com/angular/angular-cli[Angular CLI]:
78+
79+
----
80+
ng new oasp4js-ng-project-seed --style=scss --skip-install
81+
----
82+
83+
Than we let https://yarnpkg.com/[Yarn] to install all dependencies:
84+
85+
----
86+
cd oasp4js-ng-project-seed
87+
yarn
88+
----
89+
90+
=== http://phantomjs.org/[PhantomJS] for headless tests
91+
92+
https://github.com/angular/angular-cli[Angular CLI] uses Chrome for running your tests. Although this is good during
93+
development, when running your tests in the Continuous Integration environment, you need a headless browser. These are
94+
steps we made to make your tests being executed against the http://phantomjs.org/[PhantomJS] browser:
95+
96+
==== Install the http://phantomjs.org/[PhantomJS] launcher for karma-runner.github.io/[Karma]
97+
98+
Use https://yarnpkg.com/[Yarn] to install the http://phantomjs.org/[PhantomJS] launcher for https://karma-runner.github.io/[Karma]
99+
100+
----
101+
yarn add karma-phantomjs-launcher
102+
----
103+
104+
Update the https://karma-runner.github.io/[Karma] configuration file `karma.conf.js`:
105+
106+
[source, javascript]
107+
----
108+
...
109+
plugins: [
110+
...
111+
require('karma-phantomjs-launcher')
112+
]
113+
...
114+
----
115+
116+
Enable (uncomment) some polyfills needed by the http://phantomjs.org/[PhantomJS] (`polyfills.ts`):
117+
118+
[source, javascript]
119+
----
120+
import 'core-js/es6/object';
121+
import 'core-js/es6/string';
122+
import 'core-js/es6/array';
123+
----
124+
125+
Typically the following command should be executed in the Continuous Integration environment:
126+
127+
----
128+
ng test --single-run --code-coverage --browsers=PhantomJS
129+
----
130+
131+
==== Install https://v4-alpha.getbootstrap.com/[Bootstrap] and https://ng-bootstrap.github.io[ng-bootstrap]
132+
133+
As a widget library we use https://v4-alpha.getbootstrap.com/[Bootstrap]. Its JavaScript part was rewritten in TypeScript
134+
as https://angular.io[Angular] directives by https://ng-bootstrap.github.io[ng-bootstrap].
135+
136+
Use https://yarnpkg.com/[Yarn] to install https://v4-alpha.getbootstrap.com/[Bootstrap] and https://ng-bootstrap.github.io[ng-bootstrap]:
137+
138+
----
139+
yarn add bootstrap@next @ng-bootstrap/ng-bootstrap
140+
----
141+
142+
Follow the https://ng-bootstrap.github.io/#/getting-started[ng-bootstrap installation instructions].

‎README.md

-1
This file was deleted.

‎e2e/app.e2e-spec.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { AppVeryFirstPage } from './app.po';
2+
3+
describe('oasp4js-ng-project-seed App', () => {
4+
let page: AppVeryFirstPage;
5+
6+
beforeEach(() => {
7+
page = new AppVeryFirstPage();
8+
});
9+
10+
it('should display navigation bar', () => {
11+
page.navigateTo();
12+
expect(page.getNavigationElement()).toBeDefined();
13+
});
14+
15+
it('should display message saying no books available', () => {
16+
page.navigateTo();
17+
expect(page.getTextOnNoBooksAvailable()).toEqual('No books available. Add a new one.');
18+
});
19+
});

‎e2e/app.po.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { browser, element, by } from 'protractor';
2+
3+
export class AppVeryFirstPage {
4+
navigateTo() {
5+
return browser.get('/');
6+
}
7+
8+
getNavigationElement() {
9+
return element(by.css('app-root app-nav'));
10+
}
11+
12+
getTextOnNoBooksAvailable() {
13+
return element(by.css('app-root app-book-overview p')).getText();
14+
}
15+
}

‎e2e/tsconfig.e2e.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"extends": "../tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "../out-tsc/e2e",
5+
"module": "commonjs",
6+
"target": "es5",
7+
"types":[
8+
"jasmine",
9+
"node"
10+
]
11+
}
12+
}

‎karma.conf.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
// Karma configuration file, see link for more information
2+
// https://karma-runner.github.io/0.13/config/configuration-file.html
3+
4+
module.exports = function (config) {
5+
config.set({
6+
basePath: '',
7+
frameworks: ['jasmine', '@angular/cli'],
8+
plugins: [
9+
require('karma-jasmine'),
10+
require('karma-chrome-launcher'),
11+
require('karma-phantomjs-launcher'),
12+
require('karma-jasmine-html-reporter'),
13+
require('karma-coverage-istanbul-reporter'),
14+
require('@angular/cli/plugins/karma')
15+
],
16+
client:{
17+
clearContext: false // leave Jasmine Spec Runner output visible in browser
18+
},
19+
files: [
20+
{ pattern: './src/test.ts', watched: false }
21+
],
22+
preprocessors: {
23+
'./src/test.ts': ['@angular/cli']
24+
},
25+
mime: {
26+
'text/x-typescript': ['ts','tsx']
27+
},
28+
coverageIstanbulReporter: {
29+
reports: [ 'html', 'lcovonly' ],
30+
fixWebpackSourcePaths: true
31+
},
32+
angularCli: {
33+
environment: 'dev'
34+
},
35+
reporters: config.angularCli && config.angularCli.codeCoverage
36+
? ['progress', 'coverage-istanbul']
37+
: ['progress', 'kjhtml'],
38+
port: 9876,
39+
colors: true,
40+
logLevel: config.LOG_INFO,
41+
autoWatch: true,
42+
browsers: ['Chrome'],
43+
singleRun: false
44+
});
45+
};

0 commit comments

Comments
 (0)