diff --git a/.gitignore b/.gitignore index 3eba04c..3585c8b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .idea/ node_modules/ -dist/ \ No newline at end of file +dist/ +coverage/ \ No newline at end of file diff --git a/README.md b/README.md index 7193eda..45b3bce 100644 --- a/README.md +++ b/README.md @@ -2,13 +2,12 @@ A basic Angular 4 seed project utilizing the following technologies: -* Angular 4.0.2 -* TypeScript 2.2 -* Karma/Jasmine (unit testing) -* Codelyzer & TSLint (code linting) -* PugJS (template engine) -* SASS (css superset) -* Webpack 2+ (build tools) +* Angular 4.3.5 +* TypeScript 2.5 +* Karma/Jasmine +* Codelyzer & TSLint +* SASS/SCSS +* Webpack 3 ### Commands diff --git a/config/build/webpack.common.js b/config/build/webpack.common.js new file mode 100644 index 0000000..27e8300 --- /dev/null +++ b/config/build/webpack.common.js @@ -0,0 +1,64 @@ +var webpack = require('webpack'); +var HtmlWebpackPlugin = require('html-webpack-plugin'); +var helpers = require('../helpers'); + +module.exports = { + entry: { + 'polyfills': './src/polyfills.ts', + 'vendor': './src/vendor.ts', + 'app': './src/main.ts' + }, + + resolve: { + extensions: [ + '.js', '.ts' + ] + }, + + module: { + rules: [ + { + test: /\.ts$/, + use: [ 'awesome-typescript-loader?configFileName=config/tsconfig.json', 'angular2-template-loader' ] + }, + { + test: /\.html$/, + use: 'html-loader' + }, + { + test: /\.pug$/, + use: [ 'raw-loader', 'pug-html-loader' ] + }, + { + test: /\.scss$/, + exclude: /node_modules/, + use: [ 'raw-loader', 'css-loader', 'sass-loader' ] + }, + { + test: /\.(png|jpe?g|gif|svg|woff|woff2|otf|ttf|eot|ico)$/, + use: 'file-loader?name=assets/[name].[hash].[ext]' + }, + { + test: /\.css$/, + exclude: helpers.root('src', 'app'), + use: [ 'raw-loader', 'css-loader' ] + } + ] + }, + + plugins: [ + new webpack.optimize.CommonsChunkPlugin({ + name: [ 'app', 'vendor', 'polyfills' ] + }), + + new HtmlWebpackPlugin({ + template: 'src/index.html' + }), + + new webpack.ContextReplacementPlugin( + /angular(\\|\/)core(\\|\/)@angular/, + helpers.root('src'), // location of your src + {} + ) + ] +}; \ No newline at end of file diff --git a/config/build/webpack.dev.js b/config/build/webpack.dev.js new file mode 100644 index 0000000..9d83467 --- /dev/null +++ b/config/build/webpack.dev.js @@ -0,0 +1,27 @@ +var webpackMerge = require('webpack-merge'); +var commonConfig = require('./webpack.common.js'); +var helpers = require('../helpers'); + +module.exports = webpackMerge(commonConfig, { + devtool: 'cheap-module-eval-source-map', + + output: { + path: helpers.root('dist'), + publicPath: 'http://localhost:3000/', + filename: '[name].js', + chunkFilename: '[id].chunk.js' + }, + + devServer: { + historyApiFallback: true, + stats: 'minimal'/*, + TODO setup when REST service ready + proxy: { + '/api/**': { + target: 'http://localhost:8080/your-rest-service', + secure: false, + changeOrigin: true + } + }*/ + } +}); \ No newline at end of file diff --git a/config/webpack.prod.js b/config/build/webpack.prod.js similarity index 96% rename from config/webpack.prod.js rename to config/build/webpack.prod.js index cf204cc..a7789db 100644 --- a/config/webpack.prod.js +++ b/config/build/webpack.prod.js @@ -2,7 +2,7 @@ var webpack = require("webpack"); var webpackMerge = require("webpack-merge"); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var commonConfig = require("./webpack.common.js"); -var helpers = require("./helpers"); +var helpers = require("../helpers"); const ENV = process.env.NODE_ENV = process.env.ENV = "production"; diff --git a/config/karma-test-shim.js b/config/karma-test-shim.js deleted file mode 100644 index 749d3ff..0000000 --- a/config/karma-test-shim.js +++ /dev/null @@ -1,21 +0,0 @@ -Error.stackTraceLimit = Infinity; - -require("core-js/es6"); -require("reflect-metadata"); - -require("zone.js/dist/zone"); -require("zone.js/dist/long-stack-trace-zone"); -require("zone.js/dist/proxy"); -require("zone.js/dist/sync-test"); -require("zone.js/dist/jasmine-patch"); -require("zone.js/dist/async-test"); -require("zone.js/dist/fake-async-test"); - -var appContext = require.context("../src", true, /\.spec\.ts/); - -appContext.keys().forEach(appContext); - -var testing = require("@angular/core/testing"); -var browser = require("@angular/platform-browser-dynamic/testing"); - -testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting()); \ No newline at end of file diff --git a/config/karma.conf.js b/config/karma.conf.js deleted file mode 100644 index a387f6b..0000000 --- a/config/karma.conf.js +++ /dev/null @@ -1,37 +0,0 @@ -var webpackConfig = require("./webpack.test"); - -module.exports = function (config) { - var _config = { - basePath: "", - - frameworks: [ "jasmine" ], - - files: [ - {pattern: "./karma-test-shim.js", watched: false} - ], - - preprocessors: { - "./karma-test-shim.js": [ "webpack", "sourcemap" ] - }, - - webpack: webpackConfig, - - webpackMiddleware: { - stats: "errors-only" - }, - - webpackServer: { - noInfo: true - }, - - reporters: [ "progress" ], - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: false, - browsers: [ "Chrome" ], - singleRun: true - }; - - config.set(_config); -}; \ No newline at end of file diff --git a/config/test/karma-test-shim.js b/config/test/karma-test-shim.js new file mode 100644 index 0000000..f714b5c --- /dev/null +++ b/config/test/karma-test-shim.js @@ -0,0 +1,30 @@ +Error.stackTraceLimit = Infinity; + +require("core-js/es6"); +require("reflect-metadata"); + +require("zone.js/dist/zone"); +require("zone.js/dist/long-stack-trace-zone"); +require("zone.js/dist/proxy"); +require("zone.js/dist/sync-test"); +require("zone.js/dist/jasmine-patch"); +require("zone.js/dist/async-test"); +require("zone.js/dist/fake-async-test"); + +const testing = require("@angular/core/testing"); +const browser = require("@angular/platform-browser-dynamic/testing"); + +// Prevent Karma from running prematurely. +__karma__.loaded = function () {}; + +// First, initialize the Angular testing environment. +testing.TestBed.initTestEnvironment( + browser.BrowserDynamicTestingModule, + browser.platformBrowserDynamicTesting() +); +// Then we find all the tests. +const context = require.context('../../src', true, /\.spec\.ts$/); +// And load the modules. +context.keys().map(context); +// Finally, start Karma to run the tests. +__karma__.start(); diff --git a/config/test/karma.conf.js b/config/test/karma.conf.js new file mode 100644 index 0000000..7e3957c --- /dev/null +++ b/config/test/karma.conf.js @@ -0,0 +1,45 @@ +var webpackConfig = require('./webpack.test'); + +module.exports = function(config) { + config.set({ + basePath: '', + files: [ + { + pattern: './karma-test-shim.js', + watched: false + } + ], + preprocessors: { + './karma-test-shim.js': [ + 'webpack', 'sourcemap' + ] + }, + frameworks: [ 'jasmine' ], + plugins: [ + require('karma-jasmine'), + require('karma-chrome-launcher'), + require('karma-jasmine-html-reporter'), + require('karma-coverage-istanbul-reporter'), + require('karma-webpack'), + require('karma-sourcemap-loader') + ], + client:{ + clearContext: false + }, + webpack: webpackConfig, + coverageIstanbulReporter: { + reports: [ 'html', 'lcovonly' ], + fixWebpackSourcePaths: true, + remapOptions: { + exclude: /\*.spec.ts/ + } + }, + reporters: [ 'progress', /*'kjhtml', */'coverage-istanbul' ], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: [ 'Chrome' ], + singleRun: true + }); +}; \ No newline at end of file diff --git a/config/test/webpack.test.js b/config/test/webpack.test.js new file mode 100644 index 0000000..840809d --- /dev/null +++ b/config/test/webpack.test.js @@ -0,0 +1,46 @@ +var webpack = require('webpack'); +var helpers = require('../helpers'); + +module.exports = { + devtool: 'inline-source-map', + + resolve: { + extensions: [ '.ts', '.js' ] + }, + + module: { + rules: [ + { + test: /\.ts$/, + use: [ 'istanbul-instrumenter-loader', 'awesome-typescript-loader?configFileName=config/tsconfig.json', 'angular2-template-loader' ], + exclude: /\.spec\.ts$/ + }, + { + test: /\.html$/, + use: 'html-loader' + }, + { + test: /\.pug$/, + use: [ 'raw-loader', 'pug-html-loader' ] + }, + { + test: /\.scss$/, + exclude: /node_modules/, + use: [ 'raw-loader', 'sass-loader' ] + }, + { + test: /\.css$/, + include: helpers.root('src', 'app'), + use: 'raw-loader' + } + ] + }, + + plugins: [ + new webpack.ContextReplacementPlugin( + /angular(\\|\/)core(\\|\/)@angular/, + helpers.root('src'), + {} + ) + ] +}; \ No newline at end of file diff --git a/config/tsconfig.json b/config/tsconfig.json index 66b7a85..a890ef4 100644 --- a/config/tsconfig.json +++ b/config/tsconfig.json @@ -6,16 +6,16 @@ "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, - "lib": [ "es2015", "dom" ], "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true, "typeRoots": [ "../node_modules/@types" + ], + "lib": [ + "es2017", + "dom" ] }, - "exclude": [ - "../node_modules" - ], "include": [ "../**/*" ] diff --git a/config/tslint.json b/config/tslint.json index 7d18f71..929c2d3 100644 --- a/config/tslint.json +++ b/config/tslint.json @@ -7,7 +7,7 @@ true, "attribute", [ - "plum" + "tyn" ], "camelCase" ], @@ -15,7 +15,7 @@ true, "element", [ - "plum" + "tyn" ], "kebab-case" ], diff --git a/config/webpack.common.js b/config/webpack.common.js deleted file mode 100644 index 4714d0e..0000000 --- a/config/webpack.common.js +++ /dev/null @@ -1,73 +0,0 @@ -var webpack = require("webpack"); -var HtmlWebpackPlugin = require("html-webpack-plugin"); -var ExtractTextPlugin = require("extract-text-webpack-plugin"); -var helpers = require("./helpers"); - -module.exports = { - entry: { - "polyfills": "./src/polyfills.ts", - "vendor": "./src/vendor.ts", - "app": "./src/main.ts" - }, - - resolve: { - extensions: [ - ".js", ".ts" - ] - }, - - module: { - rules: [ - { - test: /\.ts$/, - use: [ "ts-loader?configFileName=config/tsconfig.json", "angular2-template-loader" ] - }, - { - test: /\.html$/, - use: "html-loader" - }, - { - test: /\.pug$/, - use: [ "raw-loader", "pug-html-loader" ] - }, - { - test: /\.scss$/, - exclude: /node_modules/, - use: [ "raw-loader", "sass-loader" ] - }, - { - test: /\.(png|jpe?g|gif|svg|woff|woff2|otf|ttf|eot|ico)$/, - use: "file-loader?name=assets/[name].[hash].[ext]" - }, - { - test: /\.css$/, - exclude: helpers.root("src", "app"), - use: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: "css-loader?sourceMap" }) - }, - { - test: /\.css$/, - include: helpers.root("src", "app"), - use: "raw-loader" - } - ] - }, - - plugins: [ - new webpack.optimize.CommonsChunkPlugin({ - name: [ "app", "vendor", "polyfills" ] - }), - - new HtmlWebpackPlugin({ - template: "src/index.html" - }), - - // Workaround for Angular-SystemJS-Webpack(2) WARNINGS - new webpack.ContextReplacementPlugin( - /angular(\\|\/)core(\\|\/)@angular/, - helpers.root('src'), // location of your src - { - // your Angular Async Route paths relative to this root directory - } - ) - ] -}; \ No newline at end of file diff --git a/config/webpack.dev.js b/config/webpack.dev.js deleted file mode 100644 index e7758e9..0000000 --- a/config/webpack.dev.js +++ /dev/null @@ -1,32 +0,0 @@ -var webpackMerge = require("webpack-merge"); -var ExtractTextPlugin = require("extract-text-webpack-plugin"); -var commonConfig = require("./webpack.common.js"); -var helpers = require("./helpers"); - -module.exports = webpackMerge(commonConfig, { - devtool: "cheap-module-eval-source-map", - - output: { - path: helpers.root("dist"), - publicPath: "http://localhost:3000/", - filename: "[name].js", - chunkFilename: "[id].chunk.js" - }, - - plugins: [ - new ExtractTextPlugin("[name].css") - ], - - devServer: { - historyApiFallback: true, - stats: "minimal"/*, - TODO setup when REST service ready - proxy: { - "/api/**": { - target: "http://localhost:8080/nurdbot-rest-service", - secure: false, - changeOrigin: true - } - }*/ - } -}); \ No newline at end of file diff --git a/config/webpack.test.js b/config/webpack.test.js deleted file mode 100644 index c7388a3..0000000 --- a/config/webpack.test.js +++ /dev/null @@ -1,57 +0,0 @@ -var webpack = require("webpack"); -var helpers = require("./helpers"); - -module.exports = { - devtool: "inline-source-map", - - resolve: { - extensions: [ ".ts", ".js" ] - }, - - module: { - rules: [ - { - test: /\.ts$/, - use: [ "ts-loader?configFileName=config/tsconfig.json", "angular2-template-loader" ] - }, - { - test: /\.html$/, - use: "html-loader" - }, - { - test: /\.pug$/, - use: [ "raw-loader", "pug-html-loader" ] - }, - { - test: /\.scss$/, - exclude: /node_modules/, - use: [ "raw-loader", "sass-loader" ] - }, - { - test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, - use: "null-loader" - }, - { - test: /\.css$/, - exclude: helpers.root("src", "app"), - use: "null-loader" - }, - { - test: /\.css$/, - include: helpers.root("src", "app"), - use: "raw-loader" - } - ] - }, - - plugins: [ - // Workaround for Angular-SystemJS-Webpack(2) WARNINGS - new webpack.ContextReplacementPlugin( - /angular(\\|\/)core(\\|\/)@angular/, - helpers.root('src'), // location of your src - { - // your Angular Async Route paths relative to this root directory - } - ) - ] -}; \ No newline at end of file diff --git a/package.json b/package.json index acf5c37..7fd7455 100644 --- a/package.json +++ b/package.json @@ -1,65 +1,68 @@ { "name": "angular-seed", - "version": "1.1.0", - "description": "Angular Seed", + "version": "2.0.0", + "description": "Angular 4 Seed Project", "license": "GPL-3.0", "repository": { "type": "GIT", - "url": "https://github.com/Plum-Crazy/angular-seed" + "url": "https://github.com/Tynarus/angular-seed" }, "scripts": { - "start": "webpack-dev-server --inline --config config/webpack.dev.js --progress --port 3000", - "test": "karma start config/karma.conf.js", + "start": "webpack-dev-server --inline --config config/build/webpack.dev.js --progress --port 3000", + "test": "karma start config/test/karma.conf.js", "lint": "tslint -c config/tslint.json \"src/app/**/*.ts\"", "pretest": "npm run lint", - "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail" + "build": "rimraf dist && webpack --config config/build/webpack.prod.js --progress --profile --bail" }, "dependencies": { - "@angular/common": "^4.0.2", - "@angular/compiler": "^4.0.2", - "@angular/core": "^4.0.2", - "@angular/forms": "^4.0.2", - "@angular/http": "^4.0.2", - "@angular/platform-browser": "^4.0.2", - "@angular/platform-browser-dynamic": "^4.0.2", - "@angular/router": "^4.0.2", + "@angular/common": "^4.3.6", + "@angular/compiler": "^4.3.6", + "@angular/core": "^4.3.6", + "@angular/forms": "^4.3.6", + "@angular/http": "^4.3.6", + "@angular/platform-browser": "^4.3.6", + "@angular/platform-browser-dynamic": "^4.3.6", + "@angular/router": "^4.3.6", "core-js": "^2.4.1", - "rxjs": "^5.1.0", - "zone.js": "^0.8.4" + "rxjs": "^5.4.2", + "zone.js": "^0.8.14" }, "devDependencies": { - "@types/jasmine": "^2.5.38", - "@types/node": "^6.0.46", - "angular2-template-loader": "^0.4.0", - "codelyzer": "~2.0.0", + "@types/jasmine": "~2.5.53", + "@types/jasminewd2": "~2.0.2", + "@types/node": "~6.0.60", + "angular2-template-loader": "^0.6.2", + "awesome-typescript-loader": "~3.2.3", + "codelyzer": "~3.2.0", "copy-webpack-plugin": "^4.0.1", - "css-loader": "^0.23.1", - "extract-text-webpack-plugin": "^2.0.0-beta.5", + "css-loader": "^0.28.1", "file-loader": "^0.8.5", "html-loader": "^0.4.3", "html-webpack-plugin": "^2.26.0", - "jasmine-core": "^2.4.1", - "karma": "^1.4.0", - "karma-chrome-launcher": "^2.0.0", - "karma-jasmine": "^1.0.2", - "karma-phantomjs-launcher": "^1.0.2", + "istanbul-instrumenter-loader": "^3.0.0", + "jasmine-core": "~2.6.2", + "jasmine-spec-reporter": "~4.1.0", + "karma": "~1.7.0", + "karma-chrome-launcher": "~2.1.1", + "karma-cli": "~1.0.1", + "karma-coverage-istanbul-reporter": "^1.2.1", + "karma-jasmine": "~1.1.0", + "karma-jasmine-html-reporter": "^0.2.2", "karma-sourcemap-loader": "^0.3.7", - "karma-webpack": "^2.0.1", - "node-sass": "^3.10.0", - "null-loader": "^0.1.1", - "phantomjs-prebuilt": "^2.1.7", + "karma-webpack": "^2.0.4", + "loader-utils": "^1.1.0", + "node-sass": "^4.5.3", + "protractor": "~5.1.2", "pug": "^2.0.0-beta12", "pug-html-loader": "^1.1.4", "raw-loader": "^0.5.1", - "reflect-metadata": "^0.1.8", - "rimraf": "^2.5.2", - "sass-loader": "^4.0.2", + "reflect-metadata": "^0.1.10", + "sass-loader": "^6.0.6", "style-loader": "^0.13.1", - "ts-loader": "~2.0.3", - "tslint": "~4.5.0", - "typescript": "~2.2.0", - "webpack": "~2.2.0", - "webpack-dev-server": "~2.2.0", - "webpack-merge": "~2.4.0" + "tslint": "~5.7.0", + "typescript": "~2.5.2", + "webpack": "~3.4.1", + "webpack-dev-server": "~2.5.1", + "webpack-merge": "~4.1.0" } } diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index d8e1928..8b050ac 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -1,11 +1,11 @@ -import { TestBed } from "@angular/core/testing"; +import { async, TestBed } from '@angular/core/testing'; -import { AppComponent } from "./app.component"; -import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; +import { AppComponent } from './app.component'; +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -describe("AppComponent", () => { +describe('AppComponent', () => { - beforeEach(() => { + beforeEach(async() => { TestBed.configureTestingModule({ schemas: [ CUSTOM_ELEMENTS_SCHEMA @@ -17,10 +17,10 @@ describe("AppComponent", () => { }); // Extremely basic example test. Just checks that the created Component is the type we expect. - it("should create the Angular component", () => { + it('creates the component', async(() => { let fixture = TestBed.createComponent(AppComponent); expect(fixture.componentInstance instanceof AppComponent).toBe(true); - }); + })); }); \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 18af434..ae987ef 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit, ViewEncapsulation } from "@angular/core"; @Component({ - selector: "plum-app", + selector: "tyn-app", template: require("./app.component.pug"), styleUrls: [ "./app.component.scss" ], encapsulation: ViewEncapsulation.None diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9ecc413..8023fad 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,19 +1,19 @@ -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { BrowserModule } from "@angular/platform-browser"; -import { FormsModule } from "@angular/forms"; -import { HttpModule } from "@angular/http"; +import { NgModule } from '@angular/core'; +import { AppComponent } from './app.component'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; +import { HttpModule } from '@angular/http'; -import { ROUTING } from "./app.routing"; +import { APP_ROUTING } from './app.routing'; -import { HomeComponent } from "./route/home/home.component"; +import { HomeComponent } from './route/home/home.component'; @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, - ROUTING + APP_ROUTING ], declarations: [ AppComponent, diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts index ec51df5..56573c7 100644 --- a/src/app/app.routing.ts +++ b/src/app/app.routing.ts @@ -1,13 +1,11 @@ -import { RouterModule, Routes } from "@angular/router"; -import { ModuleWithProviders } from "@angular/core"; +import { RouterModule } from '@angular/router'; +import { ModuleWithProviders } from '@angular/core'; -import { HomeComponent } from "./route/home/home.component"; +import { HomeComponent } from './route/home/home.component'; -const APP_ROUTES: Routes = [ +export const APP_ROUTING: ModuleWithProviders = RouterModule.forRoot([ { - path: "", + path: '', component: HomeComponent } -]; - -export const ROUTING: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES); \ No newline at end of file +]); \ No newline at end of file diff --git a/src/app/route/home/home.component.ts b/src/app/route/home/home.component.ts index dd07c60..c9d969b 100644 --- a/src/app/route/home/home.component.ts +++ b/src/app/route/home/home.component.ts @@ -1,7 +1,7 @@ import { Component } from "@angular/core"; @Component({ - selector: "plum-home", + selector: "tyn-home", template: require("./home.component.pug"), styleUrls: [ "./home.component.scss" ] }) diff --git a/src/index.html b/src/index.html index 018fdad..e4e974c 100644 --- a/src/index.html +++ b/src/index.html @@ -6,20 +6,10 @@ - Angular Seed + Angular Seed Project - -
-
-
- - - - -
-
-
+ Loading... \ No newline at end of file