diff --git a/docs/ENVIRONMENTS.md b/docs/ENVIRONMENTS.md index 662376bdf4..195ace1ed5 100644 --- a/docs/ENVIRONMENTS.md +++ b/docs/ENVIRONMENTS.md @@ -1,87 +1,241 @@ # Environments support -## Environment.ts +Stark provides 2 different ways to get environment information depending on your needs: -In the `src/environments/model.ts` is provided the Environment interface as follows +- at runtime by importing the environment.ts file +- at compilation time by checking the global/ambient variables set by Webpack -``` -... -export interface Environment { +## Environment information at runtime (environment.ts) + +Stark provides the `StarkEnvironment` interface that describes which information you can get from the current environment. +It follows the guidelines described in the Angular CLI Wiki regarding [application environments](https://github.com/angular/angular-cli/wiki/stories-application-environments) and [HMR configuration](https://github.com/angular/angular-cli/wiki/stories-configure-hmr). + +Such environment interface is defined as follows: + +```typescript +import { NgModuleRef } from "@angular/core"; + +export interface StarkEnvironment { + /** + * Whether the current environment is production (as described in Angular CLI Wiki) + * @link https://github.com/angular/angular-cli/wiki/stories-application-environments + */ production: boolean; + /** + * Whether the current environment has Hot Module Replacement enabled (as described in Angular CLI Wiki) + * @link https://github.com/angular/angular-cli/wiki/stories-configure-hmr + */ hmr: boolean; - ... + /** + * Array of providers to be included only in this environment. + * For example: you might want to add a detailed logging provider only in development. + */ + ENV_PROVIDERS: any[]; + /** + * Function to modify/decorate the NgModule Instance created by Angular for a given platform. + * Useful to enable/disable some Angular specifics such as the debug tools. + */ + decorateModuleRef(modRef: NgModuleRef): NgModuleRef; +} ``` -`production`, which is a boolean, will specify is your application runs under a production environment, -while `hmr` will indicate if it runs under a Hot Module Replacement environment. +In your project, the files to define the different environments will be located in `src/environments`: + +```txt +| ++---src +| | +| +---environments # configuration variables for each environment +| | | # +| | | environment.e2e.prod.ts # e2e tests configuration +| | | environment.hmr.ts # development with HMR (Hot Module Replacement) configuration +| | | environment.prod.ts # production configuration +| | \ environment.ts # development configuration +| | +| \ ... +| +\ ... +``` -This interface will then be defined by default in `src/environments/environment.ts`: +Then in each file, an `environment` constant of type `StarkEnvironment` should be exported providing the values needed for each environment: -``` -... -export const environment: Environment = { - production: false, +```typescript +// environment.prod.ts + +import { NgModuleRef } from "@angular/core"; +import { disableDebugTools } from "@angular/platform-browser"; +import { StarkEnvironment } from "@nationalbankbelgium/stark-core"; + +export const environment: StarkEnvironment = { + production: true, hmr: false, - showDevModule: true, - ... + ENV_PROVIDERS: [ProductionOnlyProvider], + + decorateModuleRef(modRef: NgModuleRef): NgModuleRef { + disableDebugTools(); // disable debug tools in production + return modRef; + } +}; ``` -## How to find out which environment is your application is currently using? +### How to get environment variables in your application? -All you have to do is to import the environment.ts constant anywhere you want in your application: +All you have to do is to import the `environment.ts` constant anywhere you want in your application. -``` +**You should always import from `environments/environment` because Webpack will internally replace such file with the right environment file as defined in the `fileReplacements` option in the `angular.json` file.** + +This way, you will be able to programmatically read the different environment variables you need. +For example, you can determine which providers you will include for a specific environment in your AppModule: + +```typescript +import { NgModule } from "@angular/core"; +// the environment file should always be imported from this path import { environment } from "environments/environment"; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [AppComponent], + imports: [...], + providers: [ + environment.ENV_PROVIDERS, + ... + ] +}) +export class AppModule { ... } ``` -This way, you will be able to programmatically determine which environment is used in your app -with simple checks, as follows: +You can also determine on which environment your app is currently running with this simple check: -``` -environment.production -// if the output of this line is true, we are in production environment. -// Otherwise, we are in hmr environment. +```typescript +// the environment file should always be imported from this path +import { environment } from "environments/environment"; + +// if true, your app is running in production environment +if (environment.production) { + /* the code in this block will be executed only in production */ +} ``` -## How to add a new environment ? +### How to add a new environment? -First, create you new Ts file in the `src/environments` folder. +First, create your new environment.ts file in the `src/environments` folder. -Then, make sure your new environment extends the `src/environments/model.ts` interface. +Then, make sure your new environment implements the `StarkEnvironment` interface. For example, the `environment.dummy-env.ts` file: -Finally, define the options and file replacement of your new environment in the `angular.json` file. +```typescript +import { NgModuleRef } from "@angular/core"; +import { StarkEnvironment } from "@nationalbankbelgium/stark-core"; -For exemple, the environment.dummyEnv.ts file: +export const environment: StarkEnvironment = { + production: false / true, + hmr: false, + ENV_PROVIDERS: [], + decorateModuleRef(modRef: NgModuleRef): NgModuleRef { + /* do something here */ + } +}; ``` -import { enableProdMode, NgModuleRef } from "@angular/core"; -import { disableDebugTools } from "@angular/platform-browser"; -import { Environment } from "./model"; -enableProdMode(); +Finally, define the file replacement of your new environment in the `angular.json` file so that Webpack can replace the default file `environments/environment` with your new file: + +```text +{ + ... + "dummyEnv": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.dummy-env.ts" + } + ] + } +} +``` + +### How to add more properties to the environment file? + +In case you want to add more properties, you should first create your own interface which should extend the `StarkEnvironment` interface. +For example: + +```typescript +import { StarkEnvironment } from "@nationalbankbelgium/stark-core"; + +export interface YourOwnEnvironment extends StarkEnvironment { + someProperty: any; +} +``` -export const environment: Environment = { +Then adapt the different environment files to add the new properties: - production: false, +```typescript +import { NgModuleRef } from "@angular/core"; +import { StarkEnvironment } from "@nationalbankbelgium/stark-core"; + +export const environment: StarkEnvironment = { + production: false / true, hmr: false, + ENV_PROVIDERS: [], + someProperty: "some value", // your new property decorateModuleRef(modRef: NgModuleRef): NgModuleRef { - disableDebugTools(); - return modRef; - }, - ENV_PROVIDERS: [] -} + /* do something here */ + } +}; ``` -And in the angular.json file: +## Environment information at compilation time (Webpack global variables) + +Thanks to the Webpack [DefinePlugin](https://webpack.js.org/plugins/define-plugin), Stark provides some global variables that are available at compilation time, which means that you can +implement some checks in your code and this will be analyzed when your application bundle is being built by Webpack. + +The global variables available at compilation time are the following: + +- `ENV` which indicates the current environment: `"development"` or `"production"` +- `HMR` which indicates whether the Hot Module Replacement support is enabled (true/false). +### How to get target environment at compilation time? + +Since Webpack defines the environment variables as global, you can use them everywhere in your code so you can, for example, determine on which environment your app is currently running +and execute some logic only on that specific environment: + +```typescript +// if true, your app is running in development environment +if (ENV === "development") { + /* the code inside this block will be executed only in development */ +} +``` + +To avoid Typescript compilation issues regarding these global variables, make sure that you include the typings from the stark-build package in your app `tsconfig.json`: + +```text +{ + "extends": "./node_modules/@nationalbankbelgium/stark-build/tsconfig.json", + "compilerOptions": { + ... + "typeRoots": [ + "./node_modules/@types", + "./node_modules/@nationalbankbelgium/stark-build/typings" // typings from stark-build + ], + ... + }, + ... +} ``` - "dummyEnv" : { - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.dummyEnv.ts" - } - ] - } + +### Why do you need the target environment at compilation time? + +Sometimes you might need to add some logic or import some files only when your application is running in development or production. + +**In this case, when Webpack builds your application, the final bundle will contain also that code and/or imports that will only be used on a specific environment. +For example, the specific code related to development will never be executed in production and yet it will be included in your production build which will increase the size of your bundle.** + +This is why knowing the target environment at compilation time is useful. You can put the logic inside an if block and then such code will be tree-shaken by Webpack as it will recognize it as dead code: + +```typescript +// this check is translated to "if (false)" when ENV is "production" +// allowing Webpack to identify it as dead code and so remove it +if (ENV === "development") { + /* the code inside this block will only be included in development */ +} ``` diff --git a/docs/WEBPACK.md b/docs/WEBPACK.md index 95d15f7ccd..b7f40095f0 100644 --- a/docs/WEBPACK.md +++ b/docs/WEBPACK.md @@ -1,6 +1,6 @@ # Webpack Customizations -Stark-Build uses several Webpack plugins as well as some utils in order to leverage lots of functionality and customizations to your builds (DEV and PROD). +The stark-build package uses several Webpack plugins as well as some utils in order to leverage lots of functionality and customizations to your builds (DEV and PROD). This is the list of utils and plugins used by the stark-build package: @@ -41,7 +41,7 @@ The only thing you need to do is to configure the **baseHref** and **deployUrl** Allows to customize the base url in the _index.html_ via the webpack config. -In Stark-Build, the custom base url provided to this plugin is the one you define in the **baseHref** option of your project's _angular.json_ file: +In stark-build, the custom base url provided to this plugin is the one you define in the **baseHref** option of your project's _angular.json_ file: ```json { @@ -64,3 +64,22 @@ In Stark-Build, the custom base url provided to this plugin is the one you defin ``` This plugin will automatically add the base tag `` to the _index.html_ so you don't need to add it manually yourself. + +#### [DefinePlugin](https://webpack.js.org/plugins/define-plugin) + +Allows to define global variables that will be available during the compilation and building of the application bundles. + +In this case, stark-build provides some global variables that are available at compilation time, which means that you can implement some checks in your code and this will be analyzed when your application bundle is being built by Webpack. + +The global variables available at compilation time are the following: + +- `ENV` which indicates the current environment: `"development"` or `"production"` +- `HMR` which indicates whether the Hot Module Replacement support is enabled (true/false). + +Since the Define plugin defines those variables as global, you can use them everywhere in your code like this: + +```typescript +if (ENV === "development") { + /* the code inside this block will be executed only in development */ +} +``` diff --git a/package.json b/package.json index ba23015a79..e9920ee0d0 100644 --- a/package.json +++ b/package.json @@ -152,7 +152,7 @@ "update:starter": "npm run clean:starter && npm run install:starter" }, "lint-staged": { - "*.{css,js,json,pcss,scss,ts}": [ + "*.{css,js,json,md,pcss,scss,ts}": [ "prettier --write", "git add" ] diff --git a/packages/stark-build/config/build-utils.js b/packages/stark-build/config/build-utils.js index dfca931cd1..7c26e58a73 100644 --- a/packages/stark-build/config/build-utils.js +++ b/packages/stark-build/config/build-utils.js @@ -4,24 +4,24 @@ const fs = require("fs"); const helpers = require("./helpers"); const ngCliUtils = require("./ng-cli-utils"); -const _getAngularCliAppConfig = getAngularCliAppConfig(); +const angularCliAppConfig = ngCliUtils.getAngularCliAppConfig(helpers.root("angular.json")); const ANGULAR_APP_CONFIG = { - config: _getAngularCliAppConfig, - deployUrl: _getAngularCliAppConfig.architect.build.options.deployUrl || "", - baseHref: _getAngularCliAppConfig.architect.build.options.baseHref || "/", - sourceRoot: _getAngularCliAppConfig.sourceRoot, - outputPath: _getAngularCliAppConfig.architect.build.options.outputPath + config: angularCliAppConfig, + deployUrl: angularCliAppConfig.architect.build.options.deployUrl || "", + baseHref: angularCliAppConfig.architect.build.options.baseHref || "/", + sourceRoot: angularCliAppConfig.sourceRoot, + outputPath: angularCliAppConfig.architect.build.options.outputPath }; const DEFAULT_METADATA = { - title: "Stark Application by @NationalBankBelgium", - baseUrl: "/", - isDevServer: helpers.isWebpackDevServer(), + TITLE: "Stark Application by @NationalBankBelgium", + BASE_URL: "/", + IS_DEV_SERVER: helpers.isWebpackDevServer(), HMR: helpers.hasProcessFlag("hot"), AOT: process.env.BUILD_AOT || helpers.hasNpmFlag("aot"), E2E: !!process.env.BUILD_E2E, WATCH: helpers.hasProcessFlag("watch"), - tsConfigPath: ANGULAR_APP_CONFIG.config.architect.build.options.tsConfig, + TS_CONFIG_PATH: ANGULAR_APP_CONFIG.config.architect.build.options.tsConfig, environment: "" }; @@ -76,11 +76,11 @@ function getEnvironmentFile(environment) { * Read the tsconfig to determine if we should prefer ES2015 modules. * Load rxjs path aliases. * https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md#build-and-treeshaking - * @param supportES2015 Set to true when the output of typescript is >= ES6 + * @param shouldSupportES2015 Set to true when the output of typescript is >= ES6 */ -function rxjsAlias(supportES2015) { +function rxjsAlias(shouldSupportES2015) { try { - const rxjsPathMappingImport = supportES2015 ? "rxjs/_esm2015/path-mapping" : "rxjs/_esm5/path-mapping"; + const rxjsPathMappingImport = shouldSupportES2015 ? "rxjs/_esm2015/path-mapping" : "rxjs/_esm5/path-mapping"; const rxPaths = require(rxjsPathMappingImport); return rxPaths(); } catch (e) { @@ -143,25 +143,6 @@ function getApplicationAssetsConfig() { return []; } -function getAngularCliAppConfig() { - const applicationAngularCliConfigPath = helpers.root("angular.json"); - if (fs.existsSync(applicationAngularCliConfigPath)) { - const angularCliConfig = require(applicationAngularCliConfigPath); - const cliConfig = ngCliUtils.validateAngularCLIConfig(angularCliConfig); - if (cliConfig) { - if (cliConfig.defaultProject && cliConfig.projects[cliConfig.defaultProject]) { - return cliConfig.projects[cliConfig.defaultProject]; - } else { - throw new Error("Angular-cli config apps is wrong. Please adapt it to follow Angular CLI way."); - } - } else { - throw new Error("Parsing " + applicationAngularCliConfigPath + " failed. Ensure the file is valid JSON."); - } - } else { - throw new Error("angular.json is not present. Please add this at the root your project because stark-build needs this."); - } -} - /** * Return copyWebpack config based on angular cli assets declaration * diff --git a/packages/stark-build/config/ng-cli-utils.js b/packages/stark-build/config/ng-cli-utils.js index 970ae34ae8..aee3385e1a 100644 --- a/packages/stark-build/config/ng-cli-utils.js +++ b/packages/stark-build/config/ng-cli-utils.js @@ -3,9 +3,9 @@ const fs = require("fs"); const cliUtilConfig = require("@angular/cli/utilities/config"); const { formatDiagnostics } = require("@angular/compiler-cli/ngtools2"); -function isDirectory(path) { +function isDirectory(pathToCheck) { try { - return fs.statSync(path).isDirectory(); + return fs.statSync(pathToCheck).isDirectory(); } catch (_) { return false; } @@ -15,6 +15,26 @@ function getDirectoriesNames(source) { return fs.readdirSync(source).filter(name => isDirectory(path.join(source, name))); } +function getAngularCliAppConfig(angularCliAppConfigPath) { + if (fs.existsSync(angularCliAppConfigPath)) { + const angularCliConfig = require(angularCliAppConfigPath); + const cliConfig = validateAngularCLIConfig(angularCliConfig); + if (cliConfig) { + if (cliConfig.defaultProject && cliConfig.projects[cliConfig.defaultProject]) { + return cliConfig.projects[cliConfig.defaultProject]; + } else { + throw new Error( + "The configuration of the default project in angular.json is wrong. Please adapt it to follow Angular CLI guidelines." + ); + } + } else { + throw new Error("Parsing " + angularCliAppConfigPath + " failed. Please make sure that the file is valid JSON."); + } + } else { + throw new Error("angular.json is not present. Please add this at the root your project because stark-build needs this."); + } +} + /** * Validate passed angular cli config based on schema: @angular/cli/lib/config/schema.json * If the serialized file is equal to the passed json, return the serialized config. @@ -43,7 +63,8 @@ function getWorkspace() { return cliUtilConfig.getWorkspace(); } +exports.getAngularCliAppConfig = getAngularCliAppConfig; exports.getDirectoriesNames = getDirectoriesNames; +exports.getWorkspace = getWorkspace; exports.isDirectory = isDirectory; exports.validateAngularCLIConfig = validateAngularCLIConfig; -exports.getWorkspace = getWorkspace; diff --git a/packages/stark-build/config/webpack.common.js b/packages/stark-build/config/webpack.common.js index 37ee203b6f..6057614132 100644 --- a/packages/stark-build/config/webpack.common.js +++ b/packages/stark-build/config/webpack.common.js @@ -12,6 +12,7 @@ const commonData = require("./webpack.common-data.js"); // common configuration const CopyWebpackPlugin = require("copy-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const BaseHrefWebpackPlugin = require("base-href-webpack-plugin").BaseHrefWebpackPlugin; +const DefinePlugin = require("webpack/lib/DefinePlugin"); // const InlineManifestWebpackPlugin = require("inline-manifest-webpack-plugin"); // const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin"); const { AngularCompilerPlugin } = require("@ngtools/webpack"); @@ -30,14 +31,14 @@ const buildUtils = require("./build-utils"); module.exports = options => { const isProd = options.ENV === "production"; const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, options.metadata || {}); - const supportES2015 = buildUtils.supportES2015(METADATA.tsConfigPath); + const supportES2015 = buildUtils.supportES2015(METADATA.TS_CONFIG_PATH); const entry = { polyfills: "./src/polyfills.browser.ts", main: "./src/main.browser.ts" }; - const tsConfigApp = buildUtils.readTsConfig(helpers.root(METADATA.tsConfigPath)); + const tsConfigApp = buildUtils.readTsConfig(helpers.root(METADATA.TS_CONFIG_PATH)); const defaultNgcOptions = { generateCodeForLibraries: true, @@ -342,24 +343,26 @@ module.exports = options => { * See: http://webpack.github.io/docs/configuration.html#plugins */ plugins: [ - // /** - // * Plugin: DefinePlugin - // * Description: Define free variables. - // * Useful for having development builds with debug logging or adding global constants. - // * - // * Environment helpers - // * - // * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin - // */ - // // NOTE: when adding more properties make sure you include them in custom-typings.d.ts - // new DefinePlugin({ - // 'ENV': JSON.stringify(METADATA.ENV), - // 'HMR': METADATA.HMR, - // 'AOT': METADATA.AOT, - // 'process.env.ENV': JSON.stringify(METADATA.ENV), - // 'process.env.NODE_ENV': JSON.stringify(METADATA.ENV), - // 'process.env.HMR': METADATA.HMR - // }), + /** + * Plugin: DefinePlugin + * Description: Define free variables. + * Useful for having development builds with debug logging or adding global constants. + * + * Environment helpers + * IMPORTANT: when adding more properties make sure you include them in typings/environment.d.ts + * + * See: https://webpack.js.org/plugins/define-plugin + */ + new DefinePlugin({ + ENV: JSON.stringify(METADATA.ENV), + HMR: METADATA.HMR, + AOT: METADATA.AOT, // TODO: is this needed? + "process.env": { + ENV: JSON.stringify(METADATA.ENV), + NODE_ENV: JSON.stringify(METADATA.ENV), + HMR: METADATA.HMR + } + }), /** * Plugin: AngularNamedLazyChunksWebpackPlugin @@ -441,7 +444,7 @@ module.exports = options => { */ new HtmlWebpackPlugin({ template: "src/index.html", - title: METADATA.title, + title: METADATA.TITLE, chunksSortMode: function(a, b) { const entryPoints = ["inline", "polyfills", "sw-register", "styles", "vendor", "main"]; return entryPoints.indexOf(a.names[0]) - entryPoints.indexOf(b.names[0]); @@ -493,7 +496,7 @@ module.exports = options => { }, platform: 0, // 0 = browser, 1 = server compilerOptions: appNgcOptions, - tsConfigPath: METADATA.tsConfigPath + tsConfigPath: METADATA.TS_CONFIG_PATH }) /** diff --git a/packages/stark-build/config/webpack.dev.js b/packages/stark-build/config/webpack.dev.js index 44dc005c76..4ab445c7ef 100644 --- a/packages/stark-build/config/webpack.dev.js +++ b/packages/stark-build/config/webpack.dev.js @@ -25,18 +25,16 @@ const WebpackMonitor = require("webpack-monitor"); * See: https://webpack.js.org/configuration/ */ module.exports = function(env) { - // for the content of the env parameter see here : https://webpack.js.org/api/cli/#environment-options const ENV = (process.env.ENV = process.env.NODE_ENV = "development"); - const HOST = process.env.HOST || "localhost"; - const PORT = process.env.PORT || 3000; let MONITOR = false; + // for the content of the env parameter see here : https://webpack.js.org/api/cli/#environment-options if (env && typeof env.monitor !== "undefined") { MONITOR = env.monitor; } const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, { - HOST: HOST, - PORT: PORT, + HOST: process.env.HOST || "localhost", + PORT: process.env.PORT || 3000, ENV: ENV, HMR: helpers.hasProcessFlag("hot"), environment: helpers.hasProcessFlag("hot") ? "hmr" : "dev" diff --git a/packages/stark-build/config/webpack.prod.js b/packages/stark-build/config/webpack.prod.js index bc476e7bd6..ba6205a258 100644 --- a/packages/stark-build/config/webpack.prod.js +++ b/packages/stark-build/config/webpack.prod.js @@ -47,15 +47,14 @@ function getUglifyOptions(supportES2015) { module.exports = function() { const ENV = (process.env.NODE_ENV = process.env.ENV = "production"); - const supportES2015 = buildUtils.supportES2015(buildUtils.DEFAULT_METADATA.tsConfigPath); const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, { - host: process.env.HOST || "localhost", - port: process.env.PORT || 8080, + HOST: process.env.HOST || "localhost", + PORT: process.env.PORT || 8080, ENV: ENV, - HMR: false + HMR: false, + environment: buildUtils.DEFAULT_METADATA.E2E ? "e2e.prod" : "prod" }); - - METADATA.environment = METADATA.E2E ? "e2e.prod" : "prod"; + const supportES2015 = buildUtils.supportES2015(METADATA.TS_CONFIG_PATH); return webpackMerge(commonConfig({ ENV: ENV, metadata: METADATA }), { /** diff --git a/packages/stark-build/package.json b/packages/stark-build/package.json index 90bb915076..d4ac447d6d 100644 --- a/packages/stark-build/package.json +++ b/packages/stark-build/package.json @@ -17,6 +17,7 @@ "node": ">=6.11.0", "npm": ">=5.3.0" }, + "types": "typings/index.d.ts", "dependencies": { "@angular-devkit/build-angular": "0.6.8", "@angular-devkit/build-optimizer": "0.6.8", diff --git a/packages/stark-build/tsconfig.json b/packages/stark-build/tsconfig.json index ca67f11dcf..9b0051a4c7 100644 --- a/packages/stark-build/tsconfig.json +++ b/packages/stark-build/tsconfig.json @@ -42,7 +42,7 @@ "target": "es5", "outDir": "./dist", "baseUrl": "./src", - "rootDirs": ["./src", "./config"], + "rootDirs": ["./src", "./config", "./typings"], "lib": ["dom", "dom.iterable", "es2017"], "typeRoots": ["./node_modules/@types"], "paths": {}, diff --git a/packages/stark-build/typings/environment/index.d.ts b/packages/stark-build/typings/environment/index.d.ts new file mode 100644 index 0000000000..9a283bd575 --- /dev/null +++ b/packages/stark-build/typings/environment/index.d.ts @@ -0,0 +1,3 @@ +// Extra variables that live on Global that will be replaced by webpack DefinePlugin +declare let ENV: "development" | "production"; +declare let HMR: boolean; diff --git a/packages/stark-build/typings/index.d.ts b/packages/stark-build/typings/index.d.ts new file mode 100644 index 0000000000..653ee24d58 --- /dev/null +++ b/packages/stark-build/typings/index.d.ts @@ -0,0 +1,3 @@ +/* tslint:disable:no-import-side-effect */ +import "./environment"; +/* tslint:enable */ diff --git a/packages/stark-core/base.spec.ts b/packages/stark-core/base.spec.ts index d278530c8d..f5158234ee 100644 --- a/packages/stark-core/base.spec.ts +++ b/packages/stark-core/base.spec.ts @@ -18,3 +18,6 @@ import { TestBed } from "@angular/core/testing"; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing"; TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); + +// define global environment variable (used in some places in stark-core) +global["ENV"] = "development"; diff --git a/packages/stark-core/karma.conf.ci.js b/packages/stark-core/karma.conf.ci.js index 59f3202de1..960e2b04e6 100644 --- a/packages/stark-core/karma.conf.ci.js +++ b/packages/stark-core/karma.conf.ci.js @@ -4,13 +4,16 @@ const helpers = require("./node_modules/@nationalbankbelgium/stark-testing/helpe * Load karma config from Stark */ const defaultKarmaCIConfig = require("./node_modules/@nationalbankbelgium/stark-testing/karma.conf.ci.js").rawKarmaConfig; +const karmaTypescriptFiles = require("./karma.conf").karmaTypescriptFiles; // start customizing the KarmaCI configuration from stark-testing const starkCoreSpecificConfiguration = Object.assign({}, defaultKarmaCIConfig, { // change the path of the report so that Coveralls takes the right path to the source files coverageIstanbulReporter: Object.assign(defaultKarmaCIConfig.coverageIstanbulReporter, { dir: helpers.root("reports/coverage/packages") - }) + }), + // add missing files due to "@nationalbankbelgium/stark-core" imports used in mock files of the testing sub-package + files: [...defaultKarmaCIConfig.files, ...karmaTypescriptFiles] }); // export the configuration function that karma expects and simply return the stark configuration diff --git a/packages/stark-core/karma.conf.js b/packages/stark-core/karma.conf.js index 591912df55..69cdfed5ef 100644 --- a/packages/stark-core/karma.conf.js +++ b/packages/stark-core/karma.conf.js @@ -1,4 +1,23 @@ +const helpers = require("./node_modules/@nationalbankbelgium/stark-testing/helpers"); + /** * Load karma config from Stark */ -module.exports = require("./node_modules/@nationalbankbelgium/stark-testing/karma.conf.js"); +const defaultKarmaConfig = require("./node_modules/@nationalbankbelgium/stark-testing/karma.conf.js").rawKarmaConfig; + +// entry files of the "@nationalbankbelgium/stark-core" module imported in mock files +const karmaTypescriptFiles = [{ pattern: helpers.root("index.ts") }, { pattern: helpers.root("public_api.ts") }]; + +// start customizing the Karma configuration from stark-testing +const starkCoreSpecificConfiguration = Object.assign({}, defaultKarmaConfig, { + // add missing files due to "@nationalbankbelgium/stark-core" imports used in mock files of the testing sub-package + files: [...defaultKarmaConfig.files, ...karmaTypescriptFiles] +}); + +// export the configuration function that karma expects and simply return the stark configuration +module.exports = { + default: function(config) { + return config.set(starkCoreSpecificConfiguration); + }, + karmaTypescriptFiles: karmaTypescriptFiles +}; diff --git a/packages/stark-core/package.json b/packages/stark-core/package.json index da9d2f99f5..818a989041 100644 --- a/packages/stark-core/package.json +++ b/packages/stark-core/package.json @@ -62,13 +62,13 @@ "docs": "node ../../node_modules/@compodoc/compodoc/bin/index-cli src --theme material --tsconfig ../tsconfig.json --output ../../reports/api-docs/stark-core", "docs:coverage": "npm run docs -- --coverageTest 85 --coverageThresholdFail true", "docs:serve": "npm run docs -- --watch --serve --port 4321", - "ngc": "node ../../node_modules/@angular/compiler-cli/src/main.js -p tsconfig-build.json", + "ngc": "node ../../node_modules/@angular/compiler-cli/src/main.js -p ./tsconfig-build.json", "lint": "node ../../node_modules/tslint/bin/tslint --config ./tslint.json --project ./tsconfig.spec.json --format codeFrame", "test": "npm run lint && npm run test-fast", "test:ci": "npm run lint && npm run test-fast:ci", "test-fast": "node ./node_modules/@nationalbankbelgium/stark-testing/node_modules/karma/bin/karma start", "test-fast:ci": "node ./node_modules/@nationalbankbelgium/stark-testing/node_modules/karma/bin/karma start karma.conf.ci.js", - "tsc": "node ../../node_modules/typescript/bin/tsc -p tsconfig-build.json", + "tsc": "node ../../node_modules/typescript/bin/tsc -p ./tsconfig-build.json", "tslint": "node ../../node_modules/tslint/bin/tslint" } } diff --git a/packages/stark-core/src/common.ts b/packages/stark-core/src/common.ts index 29ab023db4..d70bd92b54 100644 --- a/packages/stark-core/src/common.ts +++ b/packages/stark-core/src/common.ts @@ -1,3 +1,4 @@ +export * from "./common/environment"; export * from "./common/error"; export * from "./common/routes"; export * from "./common/store"; diff --git a/packages/stark-core/src/common/environment.ts b/packages/stark-core/src/common/environment.ts new file mode 100644 index 0000000000..747c517e1f --- /dev/null +++ b/packages/stark-core/src/common/environment.ts @@ -0,0 +1 @@ +export * from "./environment/environment.intf"; diff --git a/packages/stark-core/src/common/environment/environment.intf.ts b/packages/stark-core/src/common/environment/environment.intf.ts new file mode 100644 index 0000000000..853d3982fa --- /dev/null +++ b/packages/stark-core/src/common/environment/environment.intf.ts @@ -0,0 +1,40 @@ +import { NgModuleRef } from "@angular/core"; + +/** + * Interface to be implemented by all environments + */ +export interface StarkEnvironment { + /** + * Whether the current environment is production (as described in Angular CLI Wiki) + * @link https://github.com/angular/angular-cli/wiki/stories-application-environments + */ + production: boolean; + /** + * Whether the current environment has Hot Module Replacement enabled (as described in Angular CLI Wiki) + * @link https://github.com/angular/angular-cli/wiki/stories-configure-hmr + */ + hmr: boolean; + /** + * Array of providers to be included only in this environment. + * For example: you might want to add a detailed logging provider only in development. + */ + ENV_PROVIDERS: any[]; + /** + * Function to modify/decorate the NgModule Instance created by Angular for a given platform. + * Useful to enable/disable some Angular specifics such as the debug tools. + */ + decorateModuleRef(modRef: NgModuleRef): NgModuleRef; +} + +/** + * Create an empty dummy environment constant (the actual values will be defined in the client app) + * @ignore + */ +const dummyEnv: Partial = {}; + +/** + * Export the dummy constant as "environment" to be able to mimic the way it should be imported in the client app + * like this: import { environment } from "environments/environment"; + * @ignore + */ +export const environment: StarkEnvironment = dummyEnv; diff --git a/packages/stark-core/src/configuration/entities/application/app-config.entity.ts b/packages/stark-core/src/configuration/entities/application/app-config.entity.ts index 01b7dff500..06f59741d8 100644 --- a/packages/stark-core/src/configuration/entities/application/app-config.entity.ts +++ b/packages/stark-core/src/configuration/entities/application/app-config.entity.ts @@ -124,12 +124,11 @@ export class StarkApplicationConfigImpl implements StarkApplicationConfig { public constructor() { // Default values - // FIXME: DEVELOPMENT env variable? - /*if (DEVELOPMENT) { + if (ENV === "development") { this.loggingFlushPersistSize = 500; - } else {*/ - this.loggingFlushPersistSize = 15; - // } + } else { + this.loggingFlushPersistSize = 15; + } this.loggingFlushDisabled = false; this.loggingFlushResourceName = "logging"; diff --git a/packages/stark-core/src/modules/http/builder/http-request-builder.ts b/packages/stark-core/src/modules/http/builder/http-request-builder.ts index e47bfd1899..80c5dc2172 100644 --- a/packages/stark-core/src/modules/http/builder/http-request-builder.ts +++ b/packages/stark-core/src/modules/http/builder/http-request-builder.ts @@ -162,10 +162,9 @@ export class StarkHttpRequestBuilderImpl implements Sta // Add custom QueryParameter so json-server can add collection metadata to the mock response // See: https://jira.prd.nbb/browse/NG-1335 - // FIXME: DEVELOPMENT env variable? - // if (DEVELOPMENT) { - builder.addQueryParameter("mockCollectionRequest", "true"); - // } + if (ENV === "development") { + builder.addQueryParameter("mockCollectionRequest", "true"); + } return builder; } @@ -200,10 +199,9 @@ export class StarkHttpRequestBuilderImpl implements Sta // Add custom QueryParameter so json-server can add collection metadata to the mock response // See: https://jira.prd.nbb/browse/NG-1335 - // FIXME: DEVELOPMENT env variable? - // if (DEVELOPMENT) { - builder.addQueryParameter("mockCollectionRequest", "true"); - // } + if (ENV === "development") { + builder.addQueryParameter("mockCollectionRequest", "true"); + } return builder; } diff --git a/packages/stark-core/src/modules/http/services/http.service.ts b/packages/stark-core/src/modules/http/services/http.service.ts index 0e2b968eec..d6d2a22b49 100644 --- a/packages/stark-core/src/modules/http/services/http.service.ts +++ b/packages/stark-core/src/modules/http/services/http.service.ts @@ -51,8 +51,7 @@ export class StarkHttpServiceImpl

implements StarkHttpS request = this.removeETagFromRequestItem(request); // NG-1346: fake pre-authentication support - // FIXME: DEVELOPMENT env variable? - if (/*DEVELOPMENT &&*/ request.backend.fakePreAuthenticationEnabled) { + if (ENV === "development" && request.backend.fakePreAuthenticationEnabled) { request = this.addFakePreAuthenticationHeaders(request); } @@ -97,8 +96,7 @@ export class StarkHttpServiceImpl

implements StarkHttpS public executeCollectionRequest(request: StarkHttpRequest

): Observable> { // NG-1346: fake pre-authentication support - // FIXME: DEVELOPMENT env variable? - if (/*DEVELOPMENT &&*/ request.backend.fakePreAuthenticationEnabled) { + if (ENV === "development" && request.backend.fakePreAuthenticationEnabled) { request = this.addFakePreAuthenticationHeaders(request); } diff --git a/packages/stark-core/src/modules/http/testing/http.mock.ts b/packages/stark-core/src/modules/http/testing/http.mock.ts index 341ad11322..28886c4edf 100644 --- a/packages/stark-core/src/modules/http/testing/http.mock.ts +++ b/packages/stark-core/src/modules/http/testing/http.mock.ts @@ -1,5 +1,9 @@ -import { StarkHttpService } from "../services"; -import { StarkHttpRequest, StarkSingleItemResponseWrapper, StarkCollectionResponseWrapper } from "../entities"; +import { + StarkHttpService, + StarkHttpRequest, + StarkSingleItemResponseWrapper, + StarkCollectionResponseWrapper +} from "@nationalbankbelgium/stark-core"; import { HttpClient } from "@angular/common/http"; import { Observable } from "rxjs"; /** diff --git a/packages/stark-core/src/modules/logging/testing/logging.mock.ts b/packages/stark-core/src/modules/logging/testing/logging.mock.ts index 47724fc001..8cef34c071 100644 --- a/packages/stark-core/src/modules/logging/testing/logging.mock.ts +++ b/packages/stark-core/src/modules/logging/testing/logging.mock.ts @@ -1,4 +1,4 @@ -import { StarkLoggingService } from "../services"; +import { StarkLoggingService } from "@nationalbankbelgium/stark-core"; /** * Mock class of the StarkLoggingService interface. diff --git a/packages/stark-core/src/modules/routing/testing/routing.mock.ts b/packages/stark-core/src/modules/routing/testing/routing.mock.ts index 66ac2c9b91..cc9d8a0d21 100644 --- a/packages/stark-core/src/modules/routing/testing/routing.mock.ts +++ b/packages/stark-core/src/modules/routing/testing/routing.mock.ts @@ -1,4 +1,4 @@ -import { StarkRoutingService, StarkStateConfigWithParams } from "../services"; +import { StarkRoutingService, StarkStateConfigWithParams } from "@nationalbankbelgium/stark-core"; import { Observable } from "rxjs"; import { HookFn, HookMatchCriteria, HookRegOptions, RawParams, StateDeclaration, StateObject, TransitionOptions } from "@uirouter/core"; /** diff --git a/packages/stark-core/src/modules/session/services/session.service.ts b/packages/stark-core/src/modules/session/services/session.service.ts index a9a1928422..c743ef2dfc 100644 --- a/packages/stark-core/src/modules/session/services/session.service.ts +++ b/packages/stark-core/src/modules/session/services/session.service.ts @@ -8,7 +8,7 @@ import { select, Store } from "@ngrx/store"; import { StateObject } from "@uirouter/core"; import { validateSync } from "class-validator"; import { defer, Observable, Subject } from "rxjs"; -import { map, take } from "rxjs/operators"; +import { map, take, filter, tap } from "rxjs/operators"; import { STARK_LOGGING_SERVICE, StarkLoggingService } from "../../logging/services"; import { StarkSessionService, starkSessionServiceName } from "./session.service.intf"; @@ -89,13 +89,14 @@ export class StarkSessionServiceImpl implements StarkSessionService { this.session$ = this.store.pipe(select(selectStarkSession)); - // FIXME Where does DEVELOPMENT Variable come from ??? - // if (DEVELOPMENT) { - // this.session$.pipe( - // filter((session: StarkSession) => session.hasOwnProperty("user")), - // tap((session: StarkSession) => this.setFakePreAuthenticationHeaders(session.user)) - // ).subscribe(); - // } + if (ENV === "development") { + this.session$ + .pipe( + filter((session: StarkSession) => session.hasOwnProperty("user")), + tap((session: StarkSession) => this.setFakePreAuthenticationHeaders(session.user)) + ) + .subscribe(); + } if (window) { window.addEventListener("beforeunload", () => { @@ -292,12 +293,11 @@ export class StarkSessionServiceImpl implements StarkSessionService { let pingRequestHeaders: HttpHeaders = new HttpHeaders(); pingRequestHeaders = pingRequestHeaders.set(StarkHttpHeaders.NBB_CORRELATION_ID, this.logger.correlationId); - // FIXME Where does DEVELOPMENT Variable come from ??? - // if (DEVELOPMENT) { - this.fakePreAuthenticationHeaders.forEach((value: string, key: string) => { - pingRequestHeaders = pingRequestHeaders.set(key, value); - }); - // } + if (ENV === "development") { + this.fakePreAuthenticationHeaders.forEach((value: string, key: string) => { + pingRequestHeaders = pingRequestHeaders.set(key, value); + }); + } const pingRequest: HttpRequest = new HttpRequest("GET", this.appConfig.keepAliveUrl, { headers: pingRequestHeaders diff --git a/packages/stark-core/src/modules/session/testing/session.mock.ts b/packages/stark-core/src/modules/session/testing/session.mock.ts index 1a26d27705..d020e7065d 100644 --- a/packages/stark-core/src/modules/session/testing/session.mock.ts +++ b/packages/stark-core/src/modules/session/testing/session.mock.ts @@ -1,5 +1,4 @@ -import { StarkHttpHeaders } from "../../http/constants"; -import { StarkSessionService } from "../services"; +import { StarkHttpHeaders, StarkSessionService } from "@nationalbankbelgium/stark-core"; import { Observable } from "rxjs"; /** * @ignore diff --git a/packages/stark-core/src/modules/user/services/user.service.ts b/packages/stark-core/src/modules/user/services/user.service.ts index a299750d96..038d8f0846 100644 --- a/packages/stark-core/src/modules/user/services/user.service.ts +++ b/packages/stark-core/src/modules/user/services/user.service.ts @@ -2,6 +2,7 @@ import { Inject, Injectable } from "@angular/core"; import { Store } from "@ngrx/store"; import { validateSync } from "class-validator"; +import { Deserialize } from "cerialize"; import { Observable, throwError } from "rxjs"; import { catchError, map } from "rxjs/operators"; @@ -41,17 +42,15 @@ export class StarkUserServiceImpl implements StarkUserService { public constructor( @Inject(STARK_LOGGING_SERVICE) public logger: StarkLoggingService, @Inject(STARK_USER_REPOSITORY) public userRepository: StarkUserRepository, - // FIXME Use starkMockData - @Inject(STARK_MOCK_DATA) _starkMockData: StarkMockData, + @Inject(STARK_MOCK_DATA) starkMockData: StarkMockData, public store: Store ) { this.logger.debug(starkUserServiceName + " loaded"); - // FIXME Where does DEVELOPMENT Variable come from ??? - // if (DEVELOPMENT) { - // this.logger.debug(starkUserServiceName + ": Retrieving the user profiles from the mock data"); - // this.userProfiles = Deserialize(starkMockData.profiles, StarkUser); - // } + if (ENV === "development") { + this.logger.debug(starkUserServiceName + ": Retrieving the user profiles from the mock data"); + this.userProfiles = Deserialize(starkMockData.profiles, StarkUser); + } } public fetchUserProfile(): Observable { diff --git a/packages/stark-core/testing/package.json b/packages/stark-core/testing/package.json index ef8cede147..247a1264aa 100644 --- a/packages/stark-core/testing/package.json +++ b/packages/stark-core/testing/package.json @@ -7,5 +7,9 @@ "esm5": "../esm5/testing/testing.js", "esm2015": "../esm2015/testing/testing.js", "fesm5": "../fesm5/testing.js", - "fesm2015": "../fesm2015/testing.js" + "fesm2015": "../fesm2015/testing.js", + "scripts": { + "ngc": "node ../../../node_modules/@angular/compiler-cli/src/main.js -p ./tsconfig-build.json", + "tsc": "node ../../../node_modules/typescript/bin/tsc -p ./tsconfig-build.json" + } } diff --git a/packages/stark-core/testing/tsconfig-build.json b/packages/stark-core/testing/tsconfig-build.json index cb93470532..926cf608cd 100644 --- a/packages/stark-core/testing/tsconfig-build.json +++ b/packages/stark-core/testing/tsconfig-build.json @@ -3,7 +3,15 @@ "compilerOptions": { "baseUrl": ".", "rootDir": "../", - "typeRoots": ["../node_modules/@types", "../node_modules/@nationalbankbelgium/stark-testing/node_modules/@types"], + "typeRoots": [ + "../node_modules/@types", + "../node_modules/@nationalbankbelgium/stark-testing/node_modules/@types", + "../../stark-build/typings" + ], + "paths": { + "environments/environment": ["../src/common/environment"], + "@nationalbankbelgium/stark-core": ["../"] + }, "outDir": "../../../dist/packages/stark-core" }, diff --git a/packages/stark-core/tsconfig-build.json b/packages/stark-core/tsconfig-build.json index 82cc1c8e31..c80f214602 100644 --- a/packages/stark-core/tsconfig-build.json +++ b/packages/stark-core/tsconfig-build.json @@ -3,13 +3,18 @@ "compilerOptions": { "baseUrl": ".", "rootDir": ".", - "typeRoots": ["./node_modules/@types", "./node_modules/@nationalbankbelgium/stark-testing/node_modules/@types"], + "typeRoots": [ + "./node_modules/@types", + "./node_modules/@nationalbankbelgium/stark-testing/node_modules/@types", + "../stark-build/typings" + ], "lib": ["dom", "dom.iterable", "es2017"], "paths": { "@angular/common": ["../../node_modules/@angular/common"], "@angular/core": ["../../node_modules/@angular/core"], "@angular/router": ["../../node_modules/@angular/router"], "rxjs/*": ["../../node_modules/rxjs/*"], + "environments/environment": ["./src/common/environment"], "@nationalbankbelgium/stark-core": ["."] }, "outDir": "../../dist/packages/stark-core" diff --git a/packages/stark-ui/base.spec.ts b/packages/stark-ui/base.spec.ts index d278530c8d..16e46b1c56 100644 --- a/packages/stark-ui/base.spec.ts +++ b/packages/stark-ui/base.spec.ts @@ -18,3 +18,6 @@ import { TestBed } from "@angular/core/testing"; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing"; TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); + +// define global environment variable (used in some places in stark-ui) +global["ENV"] = "development"; diff --git a/packages/stark-ui/karma.conf.ci.js b/packages/stark-ui/karma.conf.ci.js index 346a95e040..e3904cf3de 100644 --- a/packages/stark-ui/karma.conf.ci.js +++ b/packages/stark-ui/karma.conf.ci.js @@ -5,24 +5,21 @@ const helpers = require("./node_modules/@nationalbankbelgium/stark-testing/helpe */ const defaultKarmaCIConfig = require("./node_modules/@nationalbankbelgium/stark-testing/karma.conf.ci.js").rawKarmaConfig; const karmaTypescriptBundlerAliasResolution = require("./karma.conf").karmaTypescriptBundlerAliasResolution; +const karmaTypescriptFiles = require("./karma.conf").karmaTypescriptFiles; // start customizing the KarmaCI configuration from stark-testing -const starkUiSpecificConfiguration = Object.assign( - {}, - defaultKarmaCIConfig, - { - // change the module resolution for the KarmaTypescript bundler - karmaTypescriptConfig: Object.assign(defaultKarmaCIConfig.karmaTypescriptConfig, { - bundlerOptions: Object.assign(defaultKarmaCIConfig.karmaTypescriptConfig.bundlerOptions, karmaTypescriptBundlerAliasResolution) - }) - }, - { - // change the path of the report so that Coveralls takes the right path to the source files - coverageIstanbulReporter: Object.assign(defaultKarmaCIConfig.coverageIstanbulReporter, { - dir: helpers.root("reports/coverage/packages") - }) - } -); +const starkUiSpecificConfiguration = Object.assign({}, defaultKarmaCIConfig, { + // change the module resolution for the KarmaTypescript bundler + karmaTypescriptConfig: Object.assign(defaultKarmaCIConfig.karmaTypescriptConfig, { + bundlerOptions: Object.assign(defaultKarmaCIConfig.karmaTypescriptConfig.bundlerOptions, karmaTypescriptBundlerAliasResolution) + }), + // change the path of the report so that Coveralls takes the right path to the source files + coverageIstanbulReporter: Object.assign(defaultKarmaCIConfig.coverageIstanbulReporter, { + dir: helpers.root("reports/coverage/packages") + }), + // add missing files due to "@nationalbankbelgium/stark-ui" imports used in mock files of the testing sub-package + files: [...defaultKarmaCIConfig.files, ...karmaTypescriptFiles] +}); // export the configuration function that karma expects and simply return the stark configuration module.exports = config => { diff --git a/packages/stark-ui/karma.conf.js b/packages/stark-ui/karma.conf.js index 5047031a70..ca18b8e4df 100644 --- a/packages/stark-ui/karma.conf.js +++ b/packages/stark-ui/karma.conf.js @@ -1,7 +1,12 @@ +const helpers = require("./node_modules/@nationalbankbelgium/stark-testing/helpers"); + /** * Load karma config from Stark */ -const defaultKarmaCIConfig = require("./node_modules/@nationalbankbelgium/stark-testing/karma.conf.js").rawKarmaConfig; +const defaultKarmaConfig = require("./node_modules/@nationalbankbelgium/stark-testing/karma.conf.js").rawKarmaConfig; + +// entry files of the "@nationalbankbelgium/stark-ui" module imported in mock files +const karmaTypescriptFiles = [{ pattern: helpers.root("index.ts") }, { pattern: helpers.root("public_api.ts") }]; const karmaTypescriptBundlerAliasResolution = { resolve: { @@ -27,11 +32,13 @@ const karmaTypescriptBundlerAliasResolution = { }; // start customizing the KarmaCI configuration from stark-testing -const starkUiSpecificConfiguration = Object.assign({}, defaultKarmaCIConfig, { +const starkUiSpecificConfiguration = Object.assign({}, defaultKarmaConfig, { // change the module resolution for the KarmaTypescript bundler - karmaTypescriptConfig: Object.assign(defaultKarmaCIConfig.karmaTypescriptConfig, { - bundlerOptions: Object.assign(defaultKarmaCIConfig.karmaTypescriptConfig.bundlerOptions, karmaTypescriptBundlerAliasResolution) - }) + karmaTypescriptConfig: Object.assign(defaultKarmaConfig.karmaTypescriptConfig, { + bundlerOptions: Object.assign(defaultKarmaConfig.karmaTypescriptConfig.bundlerOptions, karmaTypescriptBundlerAliasResolution) + }), + // add missing files due to "@nationalbankbelgium/stark-ui" imports used in mock files of the testing sub-package + files: [...defaultKarmaConfig.files, ...karmaTypescriptFiles] }); // export the configuration function that karma expects and simply return the stark configuration @@ -39,5 +46,6 @@ module.exports = { default: function(config) { return config.set(starkUiSpecificConfiguration); }, - karmaTypescriptBundlerAliasResolution: karmaTypescriptBundlerAliasResolution + karmaTypescriptBundlerAliasResolution: karmaTypescriptBundlerAliasResolution, + karmaTypescriptFiles: karmaTypescriptFiles }; diff --git a/packages/stark-ui/package.json b/packages/stark-ui/package.json index c489fd4bd3..9711617203 100644 --- a/packages/stark-ui/package.json +++ b/packages/stark-ui/package.json @@ -53,13 +53,13 @@ "docs": "node ../../node_modules/@compodoc/compodoc/bin/index-cli src --theme material --tsconfig ../tsconfig.json --output ../../reports/api-docs/stark-ui", "docs:coverage": "npm run docs -- --coverageTest 85 --coverageThresholdFail true", "docs:serve": "npm run docs -- --watch --serve --port 4321", - "ngc": "node ../../node_modules/@angular/compiler-cli/src/main.js -p tsconfig-build.json", + "ngc": "node ../../node_modules/@angular/compiler-cli/src/main.js -p ./tsconfig-build.json", "lint": "node ../../node_modules/tslint/bin/tslint --config ./tslint.json --project ./tsconfig.spec.json --format codeFrame", "test": "npm run lint && npm run test-fast", "test:ci": "npm run lint && npm run test-fast:ci", "test-fast": "node ./node_modules/@nationalbankbelgium/stark-testing/node_modules/karma/bin/karma start", "test-fast:ci": "node ./node_modules/@nationalbankbelgium/stark-testing/node_modules/karma/bin/karma start karma.conf.ci.js", - "tsc": "node ../../node_modules/typescript/bin/tsc -p tsconfig-build.json", + "tsc": "node ../../node_modules/typescript/bin/tsc -p ./tsconfig-build.json", "tslint": "node ../../node_modules/tslint/bin/tslint" } } diff --git a/packages/stark-ui/testing/package.json b/packages/stark-ui/testing/package.json index 603628dd88..078b85e461 100644 --- a/packages/stark-ui/testing/package.json +++ b/packages/stark-ui/testing/package.json @@ -7,5 +7,9 @@ "esm5": "../esm5/testing/testing.js", "esm2015": "../esm2015/testing/testing.js", "fesm5": "../fesm5/testing.js", - "fesm2015": "../fesm2015/testing.js" + "fesm2015": "../fesm2015/testing.js", + "scripts": { + "ngc": "node ../../../node_modules/@angular/compiler-cli/src/main.js -p ./tsconfig-build.json", + "tsc": "node ../../../node_modules/typescript/bin/tsc -p ./tsconfig-build.json" + } } diff --git a/packages/stark-ui/testing/tsconfig-build.json b/packages/stark-ui/testing/tsconfig-build.json index e95af1a1d2..0ccad1f4c5 100644 --- a/packages/stark-ui/testing/tsconfig-build.json +++ b/packages/stark-ui/testing/tsconfig-build.json @@ -3,7 +3,21 @@ "compilerOptions": { "baseUrl": ".", "rootDir": "../", - "typeRoots": ["../node_modules/@types", "../node_modules/@nationalbankbelgium/stark-testing/node_modules/@types"], + "typeRoots": [ + "../node_modules/@types", + "../node_modules/@nationalbankbelgium/stark-testing/node_modules/@types", + "../../stark-build/typings" + ], + "paths": { + "cerialize": ["../../stark-core/node_modules/cerialize"], + "@ng-idle/*": ["../../stark-core/node_modules/@ng-idle/*"], + "@ngrx/*": ["../../stark-core/node_modules/@ngrx/*"], + "@ngx-translate/*": ["../../stark-core/node_modules/@ngx-translate/*"], + "@uirouter/*": ["../../stark-core/node_modules/@uirouter/*"], + "environments/environment": ["../../../dist/packages/stark-core/src/common/environment"], + "@nationalbankbelgium/stark-core": ["../../../dist/packages/stark-core"], + "@nationalbankbelgium/stark-ui": ["../"] + }, "outDir": "../../../dist/packages/stark-ui" }, diff --git a/packages/stark-ui/tsconfig-build.json b/packages/stark-ui/tsconfig-build.json index d7daa423ff..e271650e21 100644 --- a/packages/stark-ui/tsconfig-build.json +++ b/packages/stark-ui/tsconfig-build.json @@ -3,7 +3,11 @@ "compilerOptions": { "baseUrl": ".", "rootDir": ".", - "typeRoots": ["./node_modules/@types", "./node_modules/@nationalbankbelgium/stark-testing/node_modules/@types"], + "typeRoots": [ + "./node_modules/@types", + "./node_modules/@nationalbankbelgium/stark-testing/node_modules/@types", + "../stark-build/typings" + ], "lib": ["dom", "dom.iterable", "es2017"], "paths": { "@angular/animations": ["../../node_modules/@angular/animations"], @@ -21,7 +25,9 @@ "moment": ["../stark-core/node_modules/moment"], "ibantools": ["../stark-core/node_modules/ibantools"], "rxjs/*": ["../../node_modules/rxjs/*"], - "@nationalbankbelgium/stark-core": ["../../dist/packages/stark-core"] + "environments/environment": ["../../dist/packages/stark-core/src/common/environment"], + "@nationalbankbelgium/stark-core": ["../../dist/packages/stark-core"], + "@nationalbankbelgium/stark-ui": ["."] }, "outDir": "../../dist/packages/stark-ui" }, diff --git a/packages/stark-ui/tsconfig.spec.json b/packages/stark-ui/tsconfig.spec.json index 6475fd250d..b4cfe9bba6 100644 --- a/packages/stark-ui/tsconfig.spec.json +++ b/packages/stark-ui/tsconfig.spec.json @@ -4,7 +4,8 @@ "module": "commonjs", "paths": { "@nationalbankbelgium/stark-core/testing": ["../../dist/packages/stark-core/testing"], - "@nationalbankbelgium/stark-core": ["../../dist/packages/stark-core"] + "@nationalbankbelgium/stark-core": ["../../dist/packages/stark-core"], + "@nationalbankbelgium/stark-ui": ["."] } }, "files": null, diff --git a/packages/tsconfig.json b/packages/tsconfig.json index ad1c9fd199..e4a87d4c51 100644 --- a/packages/tsconfig.json +++ b/packages/tsconfig.json @@ -10,6 +10,7 @@ "paths": { "rxjs/*": ["../node_modules/rxjs/*"], "@angular/*": ["../node_modules/@angular/*"], + "environments/environment": ["./stark-core/src/common/environment"], "@nationalbankbelgium/stark-*": ["./stark-*"] }, "skipDefaultLibCheck": true, @@ -17,6 +18,7 @@ "sourceMap": false, "typeRoots": [ "./stark-build/node_modules/@types", + "./stark-build/typings", "./stark-core/node_modules/@types", "./stark-testing/node_modules/@types", "./stark-ui/node_modules/@types" diff --git a/showcase/base.spec.ts b/showcase/base.spec.ts index 4d13150ed5..faff5e1426 100644 --- a/showcase/base.spec.ts +++ b/showcase/base.spec.ts @@ -18,3 +18,6 @@ import { TestBed } from "@angular/core/testing"; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing"; TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); + +// define global environment variable (used in some places in stark-core) +global["ENV"] = "development"; diff --git a/showcase/package.json b/showcase/package.json index c22093e642..3ed040cae8 100644 --- a/showcase/package.json +++ b/showcase/package.json @@ -55,7 +55,7 @@ "github-deploy:prod": "npm run webpack -- --config node_modules/@nationalbankbelgium/stark-build/config/webpack.github-deploy.js --progress --profile --env.githubProd", "github-deploy": "npm run github-deploy:dev", "karma": "karma", - "lint": "tslint --config tslint.json --project ./tsconfig.json --format codeFrame", + "lint": "tslint --config ./tslint.json --project ./tsconfig.json --format codeFrame", "lint-css": "stylelint \"./src/**/*.?(pc|sc|c|sa)ss\" --formatter \"string\"", "ngc": "ngc", "node": "node", @@ -63,7 +63,7 @@ "postversion": "git push && git push --tags", "preclean:install": "npm run clean", "precommit": "lint-staged", - "prettier-check": "prettier **/*.{css,js,json,pcss,scss,ts} --write", + "prettier-check": "prettier **/*.{css,js,json,md,pcss,scss,ts} --write", "preversion": "npm test", "protractor": "protractor", "protractor:delay": "sleep 3 && npm run protractor", @@ -100,7 +100,7 @@ "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js" }, "lint-staged": { - "*.{css,js,json,pcss,scss,ts}": [ + "*.{css,js,json,md,pcss,scss,ts}": [ "prettier --write", "git add" ] @@ -141,6 +141,7 @@ "@types/core-js": "2.5.0", "@types/hammerjs": "2.0.35", "@types/node": "8.10.15", + "@types/webpack-env": "1.13.6", "@compodoc/compodoc": "1.1.3", "cross-env": "^5.1.5", "find-root": "^1.1.0", diff --git a/showcase/src/app/app.module.ts b/showcase/src/app/app.module.ts index 0e3d37e482..cf9529d9d9 100644 --- a/showcase/src/app/app.module.ts +++ b/showcase/src/app/app.module.ts @@ -104,7 +104,7 @@ export function logger(reducer: ActionReducer): any { return storeLogger()(reducer); } -export const metaReducers: MetaReducer[] = !environment.production ? [logger, storeFreeze] : []; +export const metaReducers: MetaReducer[] = ENV !== "production" ? [logger, storeFreeze] : []; /** * `AppModule` is the main entry point into Angular2's bootstrapping process diff --git a/showcase/src/custom-typings.d.ts b/showcase/src/custom-typings.d.ts index a0fb47a290..e1b0c30390 100644 --- a/showcase/src/custom-typings.d.ts +++ b/showcase/src/custom-typings.d.ts @@ -56,9 +56,6 @@ declare module 'modern-lru' { } */ -// Extra variables that live on Global that will be replaced by webpack DefinePlugin -declare var ENV: string; -declare var HMR: boolean; declare var System: SystemJS; interface SystemJS { @@ -66,8 +63,8 @@ interface SystemJS { } interface GlobalEnvironment { - ENV: string; - HMR: boolean; + ENV: typeof ENV; + HMR: typeof HMR; SystemJS: SystemJS; System: SystemJS; } @@ -83,40 +80,11 @@ interface AsyncRoutes { type IdleCallbacks = Es6PromiseLoader | Function | FactoryEs6PromiseLoader | FactoryPromise; -interface WebpackModule { - hot: { - data?: any; - idle: any; - accept(dependencies?: string | string[], callback?: (updatedDependencies?: any) => void): void; - decline(deps?: any | string | string[]): void; - dispose(callback?: (data?: any) => void): void; - addDisposeHandler(callback?: (data?: any) => void): void; - removeDisposeHandler(callback?: (data?: any) => void): void; - check(autoApply?: any, callback?: (err?: Error, outdatedModules?: any[]) => void): void; - apply(options?: any, callback?: (err?: Error, outdatedModules?: any[]) => void): void; - status(callback?: (status?: string) => void): void | string; - removeStatusHandler(callback?: (status?: string) => void): void; - }; -} - -interface WebpackRequire { - (id: string): any; - (paths: string[], callback: (...modules: any[]) => void): void; - ensure(ids: string[], callback: (req: WebpackRequire) => void, chunkName?: string): void; - context(directory: string, useSubDirectories?: boolean, regExp?: RegExp): WebpackContext; -} - -interface WebpackContext extends WebpackRequire { - keys(): string[]; -} - interface ErrorStackTraceLimit { stackTraceLimit: number; } // Extend typings -interface NodeRequire extends WebpackRequire {} interface ErrorConstructor extends ErrorStackTraceLimit {} interface NodeRequireFunction extends Es6PromiseLoader {} -interface NodeModule extends WebpackModule {} interface Global extends GlobalEnvironment {} diff --git a/showcase/src/environments/environment.e2e.prod.ts b/showcase/src/environments/environment.e2e.prod.ts index 0f44c2b97e..8cb0e994c7 100644 --- a/showcase/src/environments/environment.e2e.prod.ts +++ b/showcase/src/environments/environment.e2e.prod.ts @@ -1,17 +1,17 @@ import { enableProdMode, NgModuleRef } from "@angular/core"; import { disableDebugTools } from "@angular/platform-browser"; -import { Environment } from "./model"; +import { StarkEnvironment } from "@nationalbankbelgium/stark-core"; enableProdMode(); -export const environment: Environment = { +export const environment: StarkEnvironment = { production: true, hmr: false, - /** Angular debug tools in the dev console + /** + * Angular debug tools in the dev console * https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md - * @param modRef - * + * @param modRef - NgModule Instance created by Angular for a given platform. */ decorateModuleRef(modRef: NgModuleRef): NgModuleRef { disableDebugTools(); diff --git a/showcase/src/environments/environment.hmr.ts b/showcase/src/environments/environment.hmr.ts index dceab97e76..1e8df766fd 100644 --- a/showcase/src/environments/environment.hmr.ts +++ b/showcase/src/environments/environment.hmr.ts @@ -1,20 +1,20 @@ import { ApplicationRef, ComponentRef, NgModuleRef } from "@angular/core"; import { enableDebugTools } from "@angular/platform-browser"; -import { Environment } from "./model"; +import { StarkEnvironment } from "@nationalbankbelgium/stark-core"; // Ensure that we get detailed stack tracks during development (useful with node & Webpack) // Reference: http://stackoverflow.com/questions/7697038/more-than-10-lines-in-a-node-js-stack-error Error.stackTraceLimit = Infinity; require("zone.js/dist/long-stack-trace-zone"); -export const environment: Environment = { +export const environment: StarkEnvironment = { production: false, hmr: true, - /** Angular debug tools in the dev console + /** + * Angular debug tools in the dev console * https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md - * @param modRef - * + * @param modRef - NgModule Instance created by Angular for a given platform. */ decorateModuleRef(modRef: NgModuleRef): NgModuleRef { const appRef: ApplicationRef = modRef.injector.get(ApplicationRef); diff --git a/showcase/src/environments/environment.prod.ts b/showcase/src/environments/environment.prod.ts index 0f44c2b97e..8cb0e994c7 100644 --- a/showcase/src/environments/environment.prod.ts +++ b/showcase/src/environments/environment.prod.ts @@ -1,17 +1,17 @@ import { enableProdMode, NgModuleRef } from "@angular/core"; import { disableDebugTools } from "@angular/platform-browser"; -import { Environment } from "./model"; +import { StarkEnvironment } from "@nationalbankbelgium/stark-core"; enableProdMode(); -export const environment: Environment = { +export const environment: StarkEnvironment = { production: true, hmr: false, - /** Angular debug tools in the dev console + /** + * Angular debug tools in the dev console * https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md - * @param modRef - * + * @param modRef - NgModule Instance created by Angular for a given platform. */ decorateModuleRef(modRef: NgModuleRef): NgModuleRef { disableDebugTools(); diff --git a/showcase/src/environments/environment.ts b/showcase/src/environments/environment.ts index 16274234ad..883f95d72d 100644 --- a/showcase/src/environments/environment.ts +++ b/showcase/src/environments/environment.ts @@ -1,17 +1,20 @@ import { ApplicationRef, ComponentRef, NgModuleRef } from "@angular/core"; import { enableDebugTools } from "@angular/platform-browser"; -import { Environment } from "./model"; +import { StarkEnvironment } from "@nationalbankbelgium/stark-core"; +// Ensure that we get detailed stack tracks during development (useful with node & Webpack) +// Reference: http://stackoverflow.com/questions/7697038/more-than-10-lines-in-a-node-js-stack-error Error.stackTraceLimit = Infinity; require("zone.js/dist/long-stack-trace-zone"); -export const environment: Environment = { +export const environment: StarkEnvironment = { production: false, hmr: false, - /** Angular debug tools in the dev console + /** + * Angular debug tools in the dev console * https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md - * @param modRef + * @param modRef - NgModule Instance created by Angular for a given platform. */ decorateModuleRef(modRef: NgModuleRef): NgModuleRef { const appRef: ApplicationRef = modRef.injector.get(ApplicationRef); diff --git a/showcase/src/environments/model.ts b/showcase/src/environments/model.ts deleted file mode 100644 index 547fb293c7..0000000000 --- a/showcase/src/environments/model.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { NgModuleRef } from "@angular/core"; - -export interface Environment { - production: boolean; - hmr: boolean; - ENV_PROVIDERS: any; - decorateModuleRef(modRef: NgModuleRef): NgModuleRef; -} diff --git a/showcase/src/main.browser.ts b/showcase/src/main.browser.ts index 29ad703ba9..9ef3674b57 100644 --- a/showcase/src/main.browser.ts +++ b/showcase/src/main.browser.ts @@ -32,7 +32,7 @@ switch (document.readyState) { case "interactive": case "complete": default: - if (environment.hmr) { + if (HMR) { if (module["hot"]) { hmrBootstrap(module, main); } else { @@ -45,7 +45,7 @@ switch (document.readyState) { function _domReadyHandler(): void { document.removeEventListener("DOMContentLoaded", _domReadyHandler, false); - if (environment.hmr) { + if (HMR) { if (module["hot"]) { hmrBootstrap(module, main); } else { diff --git a/showcase/tsconfig.json b/showcase/tsconfig.json index f3f68fbb92..4fdac1fb3f 100644 --- a/showcase/tsconfig.json +++ b/showcase/tsconfig.json @@ -5,7 +5,7 @@ "outDir": "./dist", "declaration": false, "lib": ["dom", "dom.iterable", "es2017"], - "typeRoots": ["./node_modules/@types"], + "typeRoots": ["./node_modules/@types", "./node_modules/@nationalbankbelgium/stark-build/typings"], "paths": { "@angular/*": ["../node_modules/@angular/*"], "@nationalbankbelgium/stark-ui": ["../../packages/stark-ui/index.ts"], diff --git a/starter/base.spec.ts b/starter/base.spec.ts index 4d13150ed5..faff5e1426 100644 --- a/starter/base.spec.ts +++ b/starter/base.spec.ts @@ -18,3 +18,6 @@ import { TestBed } from "@angular/core/testing"; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing"; TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); + +// define global environment variable (used in some places in stark-core) +global["ENV"] = "development"; diff --git a/starter/package.json b/starter/package.json index 28102dd010..e44de117f8 100644 --- a/starter/package.json +++ b/starter/package.json @@ -68,7 +68,7 @@ "postversion": "git push && git push --tags", "preclean:install": "npm run clean", "precommit": "lint-staged", - "prettier-check": "prettier **/*.{css,js,json,pcss,scss,ts} --write", + "prettier-check": "prettier **/*.{css,js,json,md,pcss,scss,ts} --write", "preversion": "npm test", "protractor": "protractor", "protractor:delay": "sleep 3 && npm run protractor", @@ -105,7 +105,7 @@ "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js" }, "lint-staged": { - "*.{css,js,json,pcss,scss,ts}": [ + "*.{css,js,json,md,pcss,scss,ts}": [ "prettier --write", "git add" ] @@ -145,6 +145,7 @@ "@types/core-js": "2.5.0", "@types/hammerjs": "2.0.35", "@types/node": "8.10.15", + "@types/webpack-env": "1.13.6", "@compodoc/compodoc": "1.1.3", "cross-env": "^5.1.5", "find-root": "^1.1.0", diff --git a/starter/src/app/app.module.ts b/starter/src/app/app.module.ts index 5d60dea875..d5b02e68c9 100644 --- a/starter/src/app/app.module.ts +++ b/starter/src/app/app.module.ts @@ -140,7 +140,7 @@ export function logger(reducer: ActionReducer): any { /** * Set of meta-reducer, higher order reducer (i.e., functions) */ -export const metaReducers: MetaReducer[] = !environment.production ? [logger, storeFreeze] : []; +export const metaReducers: MetaReducer[] = ENV !== "production" ? [logger, storeFreeze] : []; /** * `AppModule` is the main entry point into Angular2's bootstrapping process diff --git a/starter/src/custom-typings.d.ts b/starter/src/custom-typings.d.ts index a0fb47a290..e1b0c30390 100644 --- a/starter/src/custom-typings.d.ts +++ b/starter/src/custom-typings.d.ts @@ -56,9 +56,6 @@ declare module 'modern-lru' { } */ -// Extra variables that live on Global that will be replaced by webpack DefinePlugin -declare var ENV: string; -declare var HMR: boolean; declare var System: SystemJS; interface SystemJS { @@ -66,8 +63,8 @@ interface SystemJS { } interface GlobalEnvironment { - ENV: string; - HMR: boolean; + ENV: typeof ENV; + HMR: typeof HMR; SystemJS: SystemJS; System: SystemJS; } @@ -83,40 +80,11 @@ interface AsyncRoutes { type IdleCallbacks = Es6PromiseLoader | Function | FactoryEs6PromiseLoader | FactoryPromise; -interface WebpackModule { - hot: { - data?: any; - idle: any; - accept(dependencies?: string | string[], callback?: (updatedDependencies?: any) => void): void; - decline(deps?: any | string | string[]): void; - dispose(callback?: (data?: any) => void): void; - addDisposeHandler(callback?: (data?: any) => void): void; - removeDisposeHandler(callback?: (data?: any) => void): void; - check(autoApply?: any, callback?: (err?: Error, outdatedModules?: any[]) => void): void; - apply(options?: any, callback?: (err?: Error, outdatedModules?: any[]) => void): void; - status(callback?: (status?: string) => void): void | string; - removeStatusHandler(callback?: (status?: string) => void): void; - }; -} - -interface WebpackRequire { - (id: string): any; - (paths: string[], callback: (...modules: any[]) => void): void; - ensure(ids: string[], callback: (req: WebpackRequire) => void, chunkName?: string): void; - context(directory: string, useSubDirectories?: boolean, regExp?: RegExp): WebpackContext; -} - -interface WebpackContext extends WebpackRequire { - keys(): string[]; -} - interface ErrorStackTraceLimit { stackTraceLimit: number; } // Extend typings -interface NodeRequire extends WebpackRequire {} interface ErrorConstructor extends ErrorStackTraceLimit {} interface NodeRequireFunction extends Es6PromiseLoader {} -interface NodeModule extends WebpackModule {} interface Global extends GlobalEnvironment {} diff --git a/starter/src/environments/environment.e2e.prod.ts b/starter/src/environments/environment.e2e.prod.ts index 29d63463c2..2016e43d3d 100644 --- a/starter/src/environments/environment.e2e.prod.ts +++ b/starter/src/environments/environment.e2e.prod.ts @@ -1,20 +1,20 @@ import { enableProdMode, NgModuleRef } from "@angular/core"; import { disableDebugTools } from "@angular/platform-browser"; -import { Environment } from "./model"; +import { StarkEnvironment } from "@nationalbankbelgium/stark-core"; enableProdMode(); /** * @ignore */ -export const environment: Environment = { +export const environment: StarkEnvironment = { production: true, hmr: false, /** * Angular debug tools in the dev console * https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md - * @param modRef - the module ref to decorate + * @param modRef - NgModule Instance created by Angular for a given platform. */ decorateModuleRef(modRef: NgModuleRef): NgModuleRef { disableDebugTools(); diff --git a/starter/src/environments/environment.hmr.ts b/starter/src/environments/environment.hmr.ts index 90466af558..a6c48f374c 100644 --- a/starter/src/environments/environment.hmr.ts +++ b/starter/src/environments/environment.hmr.ts @@ -1,6 +1,6 @@ import { ApplicationRef, ComponentRef, NgModuleRef } from "@angular/core"; import { enableDebugTools } from "@angular/platform-browser"; -import { Environment } from "./model"; +import { StarkEnvironment } from "@nationalbankbelgium/stark-core"; // Ensure that we get detailed stack tracks during development (useful with node & Webpack) // Reference: http://stackoverflow.com/questions/7697038/more-than-10-lines-in-a-node-js-stack-error @@ -10,14 +10,14 @@ require("zone.js/dist/long-stack-trace-zone"); /** * @ignore */ -export const environment: Environment = { +export const environment: StarkEnvironment = { production: false, hmr: true, /** * Angular debug tools in the dev console * https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md - * @param modRef - the module ref to decorate + * @param modRef - NgModule Instance created by Angular for a given platform. */ decorateModuleRef(modRef: NgModuleRef): NgModuleRef { const appRef: ApplicationRef = modRef.injector.get(ApplicationRef); diff --git a/starter/src/environments/environment.prod.ts b/starter/src/environments/environment.prod.ts index 41e802c004..2016e43d3d 100644 --- a/starter/src/environments/environment.prod.ts +++ b/starter/src/environments/environment.prod.ts @@ -1,21 +1,20 @@ import { enableProdMode, NgModuleRef } from "@angular/core"; import { disableDebugTools } from "@angular/platform-browser"; -import { Environment } from "./model"; +import { StarkEnvironment } from "@nationalbankbelgium/stark-core"; enableProdMode(); /** * @ignore */ -export const environment: Environment = { +export const environment: StarkEnvironment = { production: true, hmr: false, /** * Angular debug tools in the dev console * https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md - * @param modRef - the module ref to decorate - * + * @param modRef - NgModule Instance created by Angular for a given platform. */ decorateModuleRef(modRef: NgModuleRef): NgModuleRef { disableDebugTools(); diff --git a/starter/src/environments/environment.ts b/starter/src/environments/environment.ts index e48643b0a5..1a66c49364 100644 --- a/starter/src/environments/environment.ts +++ b/starter/src/environments/environment.ts @@ -1,6 +1,6 @@ import { ApplicationRef, ComponentRef, NgModuleRef } from "@angular/core"; import { enableDebugTools } from "@angular/platform-browser"; -import { Environment } from "./model"; +import { StarkEnvironment } from "@nationalbankbelgium/stark-core"; // Ensure that we get detailed stack tracks during development (useful with node & Webpack) // Reference: http://stackoverflow.com/questions/7697038/more-than-10-lines-in-a-node-js-stack-error @@ -10,14 +10,14 @@ require("zone.js/dist/long-stack-trace-zone"); /** * @ignore */ -export const environment: Environment = { +export const environment: StarkEnvironment = { production: false, hmr: false, /** * Angular debug tools in the dev console * https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md - * @param modRef - the module ref to decorate + * @param modRef - NgModule Instance created by Angular for a given platform. */ decorateModuleRef(modRef: NgModuleRef): NgModuleRef { const appRef: ApplicationRef = modRef.injector.get(ApplicationRef); diff --git a/starter/src/environments/model.ts b/starter/src/environments/model.ts deleted file mode 100644 index c998b81e7d..0000000000 --- a/starter/src/environments/model.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { NgModuleRef } from "@angular/core"; - -/** - * Interface implemented by all environments - */ -export interface Environment { - /** - * @ignore - */ - production: boolean; - /** - * @ignore - */ - hmr: boolean; - /** - * @ignore - */ - ENV_PROVIDERS: any; - /** - * @ignore - */ - decorateModuleRef(modRef: NgModuleRef): NgModuleRef; -} diff --git a/starter/src/main.browser.ts b/starter/src/main.browser.ts index 0347178f45..cac212a437 100644 --- a/starter/src/main.browser.ts +++ b/starter/src/main.browser.ts @@ -32,7 +32,7 @@ switch (document.readyState) { case "interactive": case "complete": default: - if (environment.hmr) { + if (HMR) { if (module["hot"]) { hmrBootstrap(module, main); } else { @@ -48,7 +48,7 @@ switch (document.readyState) { */ function _domReadyHandler(): void { document.removeEventListener("DOMContentLoaded", _domReadyHandler, false); - if (environment.hmr) { + if (HMR) { if (module["hot"]) { hmrBootstrap(module, main); } else { diff --git a/starter/tsconfig.json b/starter/tsconfig.json index c3a3954c47..622e31a585 100644 --- a/starter/tsconfig.json +++ b/starter/tsconfig.json @@ -5,7 +5,7 @@ "outDir": "./dist", "declaration": false, "lib": ["dom", "dom.iterable", "es2017"], - "typeRoots": ["./node_modules/@types"], + "typeRoots": ["./node_modules/@types", "./node_modules/@nationalbankbelgium/stark-build/typings"], "paths": { "@angular/*": ["../node_modules/@angular/*"], "@nationalbankbelgium/*": ["../node_modules/@nationalbankbelgium/*"]