Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore(dependencies): update dependencies, move to @types, some refactoring as per AngularClass/angular2-webpack-starter project

Browse source
This commit is contained in:
nixa 2016-07-28 13:38:22 +03:00
parent 7d0ff2ef96
commit e7fca6d4ed
24 changed files with 505 additions and 295 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.travis.yml
View file

@ -16,7 +16,6 @@ install:
- npm config set spin false
- npm install -g npm@3
- npm install -g webpack
- npm install -g typings
- npm install -g typescript
- npm install -g bower

43
config/head-config.common.js Normal file
View file

@ -0,0 +1,43 @@
/**
* Configuration for head elements added during the creation of index.html.
*
* All href attributes are added the publicPath (if exists) by default.
* You can explicitly hint to prefix a publicPath by setting a boolean value to a key that has
* the same name as the attribute you want to operate on, but prefix with =
*
* Example:
* { name: "msapplication-TileImage", content: "/assets/icon/ms-icon-144x144.png", "=content": true },
* Will prefix the publicPath to content.
*
* { rel: "apple-touch-icon", sizes: "57x57", href: "/assets/icon/apple-icon-57x57.png", "=href": false },
* Will not prefix the publicPath on href (href attributes are added by default
*
*/
module.exports = {
link: [
/** <link> tags for "apple-touch-icon" (AKA Web Clips). **/
{ rel: "apple-touch-icon", sizes: "57x57", href: "/assets/icon/apple-icon-57x57.png" },
{ rel: "apple-touch-icon", sizes: "60x60", href: "/assets/icon/apple-icon-60x60.png" },
{ rel: "apple-touch-icon", sizes: "72x72", href: "/assets/icon/apple-icon-72x72.png" },
{ rel: "apple-touch-icon", sizes: "76x76", href: "/assets/icon/apple-icon-76x76.png" },
{ rel: "apple-touch-icon", sizes: "114x114", href: "/assets/icon/apple-icon-114x114.png" },
{ rel: "apple-touch-icon", sizes: "120x120", href: "/assets/icon/apple-icon-120x120.png" },
{ rel: "apple-touch-icon", sizes: "144x144", href: "/assets/icon/apple-icon-144x144.png" },
{ rel: "apple-touch-icon", sizes: "152x152", href: "/assets/icon/apple-icon-152x152.png" },
{ rel: "apple-touch-icon", sizes: "180x180", href: "/assets/icon/apple-icon-180x180.png" },
/** <link> tags for android web app icons **/
{ rel: "icon", type: "image/png", sizes: "192x192", href: "/assets/icon/android-icon-192x192.png" },
/** <link> tags for favicons **/
{ rel: "icon", type: "image/png", sizes: "32x32", href: "/assets/icon/favicon-32x32.png" },
{ rel: "icon", type: "image/png", sizes: "96x96", href: "/assets/icon/favicon-96x96.png" },
{ rel: "icon", type: "image/png", sizes: "16x16", href: "/assets/icon/favicon-16x16.png" }
],
meta: [
{ name: "msapplication-TileColor", content: "#ffffff" },
{ name: "msapplication-TileImage", content: "/assets/icon/ms-icon-144x144.png", "=content": true },
{ name: "theme-color", content: "#4691d1" }
]
};

61
config/helpers.js
View file

@ -1,69 +1,32 @@
/**
* @author: @AngularClass
*/
var path = require('path');
// Helper functions
var _root = path.resolve(__dirname, '..');
console.log('root directory:', root());
var ROOT = path.resolve(__dirname, '..');
function hasProcessFlag(flag) {
return process.argv.join('').indexOf(flag) > -1;
}
function isWebpackDevServer() {
return process.argv[1] && !! (/webpack-dev-server$/.exec(process.argv[1]));
}
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [_root].concat(args));
return path.join.apply(path, [ROOT].concat(args));
}
function rootNode(args) {
args = Array.prototype.slice.call(arguments, 0);
return root.apply(path, ['node_modules'].concat(args));
}
function prependExt(extensions, args) {
args = args || [];
if (!Array.isArray(args)) { args = [args] }
return extensions.reduce(function(memo, val) {
return memo.concat(val, args.map(function(prefix) {
return prefix + val;
}));
}, ['']);
}
function packageSort(packages) {
// packages = ['polyfills', 'vendor', 'main']
var len = packages.length - 1;
var first = packages[0];
var last = packages[len];
return function sort(a, b) {
// polyfills always first
if (a.names[0] === first) {
return -1;
}
// main always last
if (a.names[0] === last) {
return 1;
}
// vendor before app
if (a.names[0] !== first && b.names[0] === last) {
return -1;
} else {
return 1;
}
function checkNodeImport(context, request, cb) {
if (!path.isAbsolute(request) && request.charAt(0) !== '.') {
cb(null, 'commonjs ' + request); return;
}
cb();
}
function reverse(arr) {
return arr.reverse();
}
exports.reverse = reverse;
exports.hasProcessFlag = hasProcessFlag;
exports.isWebpackDevServer = isWebpackDevServer;
exports.root = root;
exports.rootNode = rootNode;
exports.prependExt = prependExt;
exports.prepend = prependExt;
exports.packageSort = packageSort;
exports.checkNodeImport = checkNodeImport;

103
config/html-elements-plugin/index.js Normal file
View file

@ -0,0 +1,103 @@
function HtmlElementsPlugin(locations) {
this.locations = locations;
}
HtmlElementsPlugin.prototype.apply = function(compiler) {
var self = this;
compiler.plugin('compilation', function(compilation) {
compilation.options.htmlElements = compilation.options.htmlElements || {};
compilation.plugin('html-webpack-plugin-before-html-generation', function(htmlPluginData, callback) {
const locations = self.locations;
if (locations) {
const publicPath = htmlPluginData.assets.publicPath;
Object.getOwnPropertyNames(locations).forEach(function(loc) {
compilation.options.htmlElements[loc] = getHtmlElementString(locations[loc], publicPath);
});
}
callback(null, htmlPluginData);
});
});
};
const RE_ENDS_WITH_BS = /\/$/;
/**
* Create an HTML tag with attributes from a map.
*
* Example:
* createTag('link', { rel: "manifest", href: "/assets/manifest.json" })
* // <link rel="manifest" href="/assets/manifest.json">
* @param tagName The name of the tag
* @param attrMap A Map of attribute names (keys) and their values.
* @param publicPath a path to add to eh start of static asset url
* @returns {string}
*/
function createTag(tagName, attrMap, publicPath) {
publicPath = publicPath || '';
// add trailing slash if we have a publicPath and it doesn't have one.
if (publicPath && !RE_ENDS_WITH_BS.test(publicPath)) publicPath += '/';
const attributes = Object.getOwnPropertyNames(attrMap)
.filter(function(name) { return name[0] !== '='; } )
.map(function(name) {
var value = attrMap[name];
if (publicPath) {
// check if we have explicit instruction, use it if so (e.g: =herf: false)
// if no instruction, use public path if it's href attribute.
const usePublicPath = attrMap.hasOwnProperty('=' + name) ? !!attrMap['=' + name] : name === 'href';
if (usePublicPath) {
// remove a starting trailing slash if the value has one so we wont have //
value = publicPath + (value[0] === '/' ? value.substr(1) : value);
}
}
return name + '="' + value + '"';
});
return '<' + tagName + ' ' + attributes.join(' ') + '>';
}
/**
* Returns a string representing all html elements defined in a data source.
*
* Example:
*
* const ds = {
* link: [
* { rel: "apple-touch-icon", sizes: "57x57", href: "/assets/icon/apple-icon-57x57.png" }
* ],
* meta: [
* { name: "msapplication-TileColor", content: "#00bcd4" }
* ]
* }
*
* getHeadTags(ds);
* // "<link rel="apple-touch-icon" sizes="57x57" href="/assets/icon/apple-icon-57x57.png">"
* "<meta name="msapplication-TileColor" content="#00bcd4">"
*
* @returns {string}
*/
function getHtmlElementString(dataSource, publicPath) {
return Object.getOwnPropertyNames(dataSource)
.map(function(name) {
if (Array.isArray(dataSource[name])) {
return dataSource[name].map(function(attrs) { return createTag(name, attrs, publicPath); } );
} else {
return [ createTag(name, dataSource[name], publicPath) ];
}
})
.reduce(function(arr, curr) {
return arr.concat(curr);
}, [])
.join('\n\t');
}
module.exports = HtmlElementsPlugin;

2
config/modules/angular2-hmr-prod.js vendored Normal file
View file

@ -0,0 +1,2 @@
exports.HmrState = function() {
};

93
config/webpack.common.js
View file

@ -1,20 +1,37 @@
const webpack = require('webpack');
const helpers = require('./helpers');
/*
* Webpack Plugins
*/
// problem with copy-webpack-plugin
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
var ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlElementsPlugin = require('./html-elements-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
* Webpack Constants
*/
const METADATA = {
title: 'ng2-admin - Angular 2 Admin Template',
description: 'Free Angular 2 and Bootstrap 4 Admin Template',
baseUrl: '/'
};
/*
* Webpack configuration
*
* See: http://webpack.github.io/docs/configuration.html#cli
*/
module.exports = {
/*
* Static metadata for index.html
*
* See: (custom attribute)
*/
metadata: METADATA,
/*
@ -23,8 +40,10 @@ module.exports = {
* You can pass false to disable it.
*
* See: http://webpack.github.io/docs/configuration.html#cache
* cache: false,
*
*/
//cache: false,
/*
* The entry point for the bundle
* Our Angular.js app
*
@ -32,9 +51,9 @@ module.exports = {
*/
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'main': './src/main.browser.ts'
'polyfills': './src/polyfills.browser.ts',
'vendor': './src/vendor.browser.ts',
'main': './src/main.browser.ts'
},
@ -50,16 +69,21 @@ module.exports = {
*
* See: http://webpack.github.io/docs/configuration.html#resolve-extensions
*/
extensions: ['', '.ts', '.js', '.css', '.scss'],
extensions: ['', '.ts', '.js', '.css', '.scss', '.json'],
// Make sure root is src
root: helpers.root('src'),
// remove other default values
modulesDirectories: ['node_modules', 'bower_components']
modulesDirectories: ['node_modules'],
},
/*
* Options affecting the normal modules.
*
* See: http://webpack.github.io/docs/configuration.html#module
*/
module: {
/*
@ -74,7 +98,7 @@ module.exports = {
*
* See: https://github.com/wbuchwalter/tslint-loader
*/
// { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
// { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
/*
* Source map loader support for *.js files
@ -88,6 +112,8 @@ module.exports = {
exclude: [
// these packages have problems with their sourcemaps
helpers.root('node_modules/rxjs'),
helpers.root('node_modules/@angular'),
helpers.root('node_modules/@ngrx'),
helpers.root('node_modules/ng2-bootstrap'),
helpers.root('node_modules/ng2-branchy')
]
@ -95,6 +121,14 @@ module.exports = {
],
/*
* An array of automatically applied loaders.
*
* IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
* This means they are not resolved relative to the configuration file.
*
* See: http://webpack.github.io/docs/configuration.html#module-loaders
*/
loaders: [
/*
@ -119,14 +153,14 @@ module.exports = {
},
/*
* Raw loader support for *.css files
* to string and css loader support for *.css files
* Returns file content as string
*
* See: https://github.com/webpack/raw-loader
*/
{
test: /\.css$/,
loader: 'raw-loader'
// loaders: ['to-string-loader', 'css-loader']
loaders: ['raw-loader']
},
{
@ -208,7 +242,7 @@ module.exports = {
* See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
*/
new webpack.optimize.CommonsChunkPlugin({
name: helpers.reverse(['polyfills', 'vendor'])
name: ['polyfills', 'vendor'].reverse()
}),
/*
@ -234,16 +268,39 @@ module.exports = {
*/
new HtmlWebpackPlugin({
template: 'src/index.html',
chunksSortMode: helpers.packageSort(['polyfills', 'vendor', 'main'])
chunksSortMode: 'dependency'
}),
// TODO: make sure this is a correct configuration
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
'Tether': 'tether',
'window.Tether': 'tether'
}),
/*
* Plugin: HtmlHeadConfigPlugin
* Description: Generate html tags based on javascript maps.
*
* If a publicPath is set in the webpack output configuration, it will be automatically added to
* href attributes, you can disable that by adding a "=href": false property.
* You can also enable it to other attribute by settings "=attName": true.
*
* The configuration supplied is map between a location (key) and an element definition object (value)
* The location (key) is then exported to the template under then htmlElements property in webpack configuration.
*
* Example:
* Adding this plugin configuration
* new HtmlElementsPlugin({
* headTags: { ... }
* })
*
* Means we can use it in the template like this:
* <%= webpackConfig.htmlElements.headTags %>
*
* Dependencies: HtmlWebpackPlugin
*/
new HtmlElementsPlugin({
headTags: require('./head-config.common')
})
],

10
config/webpack.dev.js
View file

@ -50,7 +50,7 @@ module.exports = webpackMerge(commonConfig, {
* See: http://webpack.github.io/docs/configuration.html#devtool
* See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
*/
devtool: 'cheap-module-eval-source-map',
devtool: 'cheap-module-source-map',
/**
* Options affecting the output of the compilation.
@ -80,15 +80,17 @@ module.exports = webpackMerge(commonConfig, {
*
* See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
*/
sourceMapFilename: '[file].map',
sourceMapFilename: '[name].map',
/** The filename of non-entry chunks as relative path
* inside the output.path directory.
*
* See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
*/
chunkFilename: '[id].chunk.js'
chunkFilename: '[id].chunk.js',
library: 'ac_[name]',
libraryTarget: 'var',
},
plugins: [
@ -111,7 +113,7 @@ module.exports = webpackMerge(commonConfig, {
'NODE_ENV': JSON.stringify(METADATA.ENV),
'HMR': METADATA.HMR,
}
})
}),
],
/**

46
config/webpack.prod.js
View file

@ -1,3 +1,7 @@
/**
* @author: @AngularClass
*/
const helpers = require('./helpers');
const webpackMerge = require('webpack-merge'); // used to merge webpack configs
const commonConfig = require('./webpack.common.js'); // the settings that are common to prod and dev
@ -7,11 +11,12 @@ const commonConfig = require('./webpack.common.js'); // the settings that are co
*/
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');
const IgnorePlugin = require('webpack/lib/IgnorePlugin');
const DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
const CompressionPlugin = require('compression-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CompressionPlugin = require('compression-webpack-plugin');
/**
* Webpack Constants
*/
@ -22,13 +27,11 @@ const METADATA = webpackMerge(commonConfig.metadata, {
host: HOST,
port: PORT,
ENV: ENV,
HMR: false,
baseUrl: ''
HMR: false
});
module.exports = webpackMerge(commonConfig, {
metadata: METADATA,
/**
* Switch loaders to debug mode.
*
@ -72,7 +75,7 @@ module.exports = webpackMerge(commonConfig, {
*
* See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
*/
sourceMapFilename: '[file].map',
sourceMapFilename: '[name].[chunkhash].bundle.map',
/**
* The filename of non-entry chunks as relative path
@ -152,17 +155,34 @@ module.exports = webpackMerge(commonConfig, {
// }, // debug
// comments: true, //debug
beautify: false, //prod
mangle: false, //prod
compress: {
screw_ie8: true
}, //prod
mangle: { screw_ie8 : true }, //prod
compress: { screw_ie8: true }, //prod
comments: false //prod
}),
/**
* Plugin: NormalModuleReplacementPlugin
* Description: Replace resources that matches resourceRegExp with newResource
*
* See: http://webpack.github.io/docs/list-of-plugins.html#normalmodulereplacementplugin
*/
new NormalModuleReplacementPlugin(
/angular2-hmr/,
helpers.root('config/modules/angular2-hmr-prod.js')
),
/**
* Plugin: IgnorePlugin
* Description: Don’t generate modules for requests matching the provided RegExp.
*
* See: http://webpack.github.io/docs/list-of-plugins.html#ignoreplugin
*/
// new IgnorePlugin(/angular2-hmr/),
/**
* Plugin: CompressionPlugin
* Description: Prepares compressed versions of assets to serve

87
package.json
View file

@ -9,17 +9,17 @@
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "^0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/platform-server": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.2",
"@angular/forms":"0.2.0",
"amcharts3": "github:amcharts/amcharts3",
"ammap3": "github:amcharts/ammap3",
"animate.css": "^3.5.1",
"bootstrap": "^4.0.0-alpha.2",
"bootstrap-loader": "^1.0.8",
"bootstrap": "4.0.0-alpha.2",
"bootstrap-loader": "^1.0.10",
"chart.js": "^1.1.1",
"chartist": "^0.9.7",
"ckeditor": "^4.5.9",
@ -30,14 +30,16 @@
"font-awesome-sass-loader": "^1.0.1",
"fullcalendar": "^2.7.2",
"google-maps": "^3.2.1",
"http-server": "^0.9.0",
"ie-shim": "^0.1.0",
"jquery": "^2.2.3",
"jquery-slimscroll": "^1.3.6",
"leaflet": "^0.7.7",
"leaflet-map": "^0.2.1",
"lodash": "^4.12.0",
"ng2-bootstrap": "^1.0.20",
"ng2-ckeditor": "^1.0.4",
"ng2-branchy": "^0.0.2-5",
"ng2-ckeditor": "^1.0.4",
"ng2-uploader": "0.5.2",
"normalize.css": "^4.1.1",
"rxjs": "5.0.0-beta.6",
@ -45,54 +47,61 @@
"zone.js": "~0.6.12"
},
"devDependencies": {
"angular2-hmr": "~0.7.0",
"@types/core-js": "^0.9.28",
"@types/hammerjs": "^2.0.28",
"@types/node": "^4.0.29",
"@types/source-map": "^0.1.26",
"@types/uglify-js": "^2.0.27",
"@types/webpack": "^1.12.29",
"@types/lodash": "0.0.28",
"angular2-hmr": "~0.8.0",
"gh-pages": "^0.11.0",
"parse5": "^1.5.1",
"rimraf": "^2.5.2",
"codelyzer": "~0.0.21",
"tslint": "^3.7.1",
"ts-helpers": "1.1.1",
"ts-node": "^0.9.1",
"typedoc": "^0.4.4",
"typescript": "^2.0.0-beta",
"awesome-typescript-loader": "1.1.1",
"codelyzer": "~0.0.19",
"compression-webpack-plugin": "^0.3.1",
"copy-webpack-plugin": "^3.0.1",
"css-loader": "^0.23.1",
"es6-promise": "^3.1.2",
"angular2-template-loader": "^0.4.0",
"tslint-loader": "^2.1.3",
"url-loader": "^0.5.7",
"style-loader": "^0.13.1",
"raw-loader": "0.5.1",
"source-map-loader": "^0.1.5",
"imports-loader": "^0.6.5",
"istanbul-instrumenter-loader": "^0.2.0",
"json-loader": "^0.5.4",
"es6-promise-loader": "^1.0.1",
"es6-shim": "^0.35.0",
"es7-reflect-metadata": "^1.6.0",
"css-loader": "^0.23.1",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"file-loader": "^0.8.5",
"gh-pages": "^0.11.0",
"html-webpack-plugin": "^2.15.0",
"http-server": "^0.9.0",
"imports-loader": "^0.6.5",
"json-loader": "^0.5.4",
"node-sass": "^3.5.3",
"parse5": "^2.1.5",
"raw-loader": "0.5.1",
"resolve-url-loader": "^1.4.3",
"rimraf": "^2.5.2",
"file-loader": "^0.9.0",
"to-string-loader": "^1.1.4",
"sass-loader": "^3.2.0",
"source-map-loader": "^0.1.5",
"style-loader": "^0.13.1",
"ts-helpers": "1.1.1",
"ts-node": "^0.9.0",
"tslint": "^3.7.1",
"tslint-loader": "^2.1.3",
"typedoc": "^0.4.4",
"typescript": "~1.8.9",
"typings": "^1.0.5",
"url-loader": "^0.5.7",
"resolve-url-loader": "^1.4.3",
"node-sass": "^3.5.3",
"html-webpack-plugin": "^2.21.0",
"copy-webpack-plugin": "^3.0.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^0.14.0"
"webpack-merge": "^0.14.0",
"compression-webpack-plugin": "^0.3.1",
"es6-promise": "^3.1.2",
"es6-shim": "^0.35.0",
"es7-reflect-metadata": "^1.6.0"
},
"scripts": {
"rimraf": "rimraf",
"tslint": "tslint",
"typedoc": "typedoc",
"typings": "typings",
"webpack": "webpack",
"webpack-dev-server": "webpack-dev-server",
"webdriver-manager": "webdriver-manager",
"clean": "npm cache clean && npm run rimraf -- node_modules doc typings coverage dist",
"clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist",
"clean:dist": "npm run rimraf -- dist",
"preclean:install": "npm run clean",
"clean:install": "npm set progress=false && npm install",
@ -108,8 +117,8 @@
"prebuild:prod": "npm run clean:dist",
"build:prod": "webpack --config config/webpack.prod.js --progress --profile --colors --display-error-details --display-cached --bail",
"server": "npm run server:dev",
"server:dev": "webpack-dev-server --config config/webpack.dev.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/",
"server:dev:hmr": "npm run server:dev -- --hot",
"server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --colors --watch --display-error-details --display-cached --content-base src/",
"server:dev:hmr": "npm run server:dev -- --inline --hot",
"server:prod": "http-server dist --cors",
"webdriver:update": "npm run webdriver-manager update",
"webdriver:start": "npm run webdriver-manager start",
@ -120,7 +129,7 @@
"gh-pages": "wintersmith build -C docs && gh-pages -d docs/build",
"start": "npm run server:dev",
"start:hmr": "npm run server:dev:hmr",
"postinstall": "npm run typings -- install && bower install",
"postinstall": "bower install",
"version": "npm run build",
"postversion": "git push && git push --tags"
},

121
src/custom-typings.d.ts vendored
View file

@ -1,31 +1,34 @@
/*
* Custom Type Definitions
* When including 3rd party modules you also need to include the type definition for the module
* if they don't provide one within the module. You can try to install it with typings
typings install node --save
* If you can't find the type definition in the registry we can make an ambient definition in
* if they don't provide one within the module. You can try to install it with @types
npm install @types/node
npm install @types/lodash
* If you can't find the type definition in the registry we can make an ambient/global definition in
* this file for now. For example
declare module "my-module" {
export function doesSomething(value: string): string;
}
declare module "my-module" {
export function doesSomething(value: string): string;
}
* If you are using a CommonJS module that is using module.exports then you will have to write your
* types using export = yourObjectOrFunction with a namespace above it
* notice how we have to create a namespace that is equal to the function we're assigning the export to
declare module "jwt-decode" {
function jwtDecode(token: string): any;
namespace jwtDecode {}
export = jwtDecode;
}
*
* If you're prototying and you will fix the types later you can also declare it as type any
*
declare var assert: any;
declare var assert: any;
declare var _: any;
declare var $: any;
*
* If you're importing a module that uses Node.js modules which are CommonJS you need to import as
* in the files such as main.browser.ts or any file within app/
*
import * as _ from 'lodash'
* You can include your type definitions in this file until you create one for the typings registry
* see https://github.com/typings/registry
import * as _ from 'lodash'
* You can include your type definitions in this file until you create one for the @types
*
*/
@ -36,14 +39,38 @@ declare var AmCharts:any;
declare var Chart:any;
declare var Chartist:any;
// support NodeJS modules without type definitions
declare module "*";
// Extra variables that live on Global that will be replaced by webpack DefinePlugin
declare var ENV: string;
declare var HMR: boolean;
interface GlobalEnvironment {
ENV;
HMR;
}
interface Es6PromiseLoader {
(id: string): (exportName?: string) => Promise<any>;
}
type FactoryEs6PromiseLoader = () => Es6PromiseLoader;
type FactoryPromise = () => Promise<any>;
type AsyncRoutes = {
[component: string]: Es6PromiseLoader |
Function |
FactoryEs6PromiseLoader |
FactoryPromise
};
type IdleCallbacks = Es6PromiseLoader |
Function |
FactoryEs6PromiseLoader |
FactoryPromise ;
interface WebpackModule {
hot: {
data?: any,
@ -60,66 +87,26 @@ interface WebpackModule {
};
}
interface WebpackRequire {
context(file: string, flag?: boolean, exp?: RegExp): any;
(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 {}
declare namespace Reflect {
function decorate(decorators: ClassDecorator[], target: Function): Function;
function decorate(
decorators: (PropertyDecorator | MethodDecorator)[],
target: Object,
targetKey: string | symbol,
descriptor?: PropertyDescriptor): PropertyDescriptor;
function metadata(metadataKey: any, metadataValue: any): {
(target: Function): void;
(target: Object, propertyKey: string | symbol): void;
};
function defineMetadata(metadataKey: any, metadataValue: any, target: Object): void;
function defineMetadata(
metadataKey: any,
metadataValue: any,
target: Object,
targetKey: string | symbol): void;
function hasMetadata(metadataKey: any, target: Object): boolean;
function hasMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
function hasOwnMetadata(metadataKey: any, target: Object): boolean;
function hasOwnMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
function getMetadata(metadataKey: any, target: Object): any;
function getMetadata(metadataKey: any, target: Object, targetKey: string | symbol): any;
function getOwnMetadata(metadataKey: any, target: Object): any;
function getOwnMetadata(metadataKey: any, target: Object, targetKey: string | symbol): any;
function getMetadataKeys(target: Object): any[];
function getMetadataKeys(target: Object, targetKey: string | symbol): any[];
function getOwnMetadataKeys(target: Object): any[];
function getOwnMetadataKeys(target: Object, targetKey: string | symbol): any[];
function deleteMetadata(metadataKey: any, target: Object): boolean;
function deleteMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
}
// We need this here since there is a problem with Zone.js typings
interface Thenable<T> {
then<U>(
onFulfilled?: (value: T) => U | Thenable<U>,
onRejected?: (error: any) => U | Thenable<U>): Thenable<U>;
then<U>(
onFulfilled?: (value: T) => U | Thenable<U>,
onRejected?: (error: any) => void): Thenable<U>;
catch<U>(onRejected?: (error: any) => U | Thenable<U>): Thenable<U>;
}

33
src/index.html
View file

@ -1,31 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= webpackConfig.metadata.title %></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="<%= webpackConfig.metadata.description %>">
<link rel="apple-touch-icon" sizes="57x57" href="assets/icon/apple-icon-57x57.png?v=2">
<link rel="apple-touch-icon" sizes="60x60" href="assets/icon/apple-icon-60x60.png?v=2">
<link rel="apple-touch-icon" sizes="72x72" href="assets/icon/apple-icon-72x72.png?v=2">
<link rel="apple-touch-icon" sizes="76x76" href="assets/icon/apple-icon-76x76.png?v=2">
<link rel="apple-touch-icon" sizes="114x114" href="assets/icon/apple-icon-114x114.png?v=2">
<link rel="apple-touch-icon" sizes="120x120" href="assets/icon/apple-icon-120x120.png?v=2">
<link rel="apple-touch-icon" sizes="144x144" href="assets/icon/apple-icon-144x144.png?v=2">
<link rel="apple-touch-icon" sizes="152x152" href="assets/icon/apple-icon-152x152.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="assets/icon/apple-icon-180x180.png?v=2">
<link rel="icon" type="image/png" sizes="192x192" href="assets/icon/android-icon-192x192.png?v=2">
<link rel="icon" type="image/png" sizes="32x32" href="assets/icon/favicon-32x32.png?v=2">
<link rel="icon" type="image/png" sizes="96x96" href="assets/icon/favicon-96x96.png?v=2">
<link rel="icon" type="image/png" sizes="16x16" href="assets/icon/favicon-16x16.png?v=2">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="assets/icon/ms-icon-144x144.png?v=2">
<meta name="theme-color" content="#4691d1">
<% if (webpackConfig.htmlElements.headTags) { %>
<!-- Configured Head Tags -->
<%= webpackConfig.htmlElements.headTags %>
<% } %>
<!-- base url -->
<base href="<%= webpackConfig.metadata.baseUrl %>">
@ -40,9 +27,9 @@
<div></div>
</div>
<% if (webpackConfig.metadata.ENV === 'development') { %>
<!-- Webpack Dev Server reload -->
<script src="/webpack-dev-server.js"></script>
<% if (webpackConfig.metadata.isDevServer && webpackConfig.metadata.HMR !== true) { %>
<!-- Webpack Dev Server reload -->
<script src="/webpack-dev-server.js"></script>
<% } %>
<link

22
src/main.browser.ts
View file

@ -1,20 +1,20 @@
/*
* Providers provided by Angular
*/
import {bootstrap} from '@angular/platform-browser-dynamic';
import { bootstrap } from '@angular/platform-browser-dynamic';
/*
* Platform and Environment
* our providers/directives/pipes
*/
import {DIRECTIVES, PIPES, PROVIDERS} from './platform/browser';
import {ENV_PROVIDERS} from './platform/environment';
import { PLATFORM_PROVIDERS } from './platform/browser';
import { ENV_PROVIDERS, decorateComponentRef } from './platform/environment';
/*
* App Component
* our top level component that holds all of our components
*/
import {App, APP_PROVIDERS} from './app';
import { App, APP_PROVIDERS } from './app';
/*
* Bootstrap our Angular app with a top level component `App` and inject
@ -23,13 +23,13 @@ import {App, APP_PROVIDERS} from './app';
export function main(initialHmrState?: any): Promise<any> {
return bootstrap(App, [
...PROVIDERS,
// To add more vendor providers please look in the platform/ folder
...PLATFORM_PROVIDERS,
...ENV_PROVIDERS,
...DIRECTIVES,
...PIPES,
...APP_PROVIDERS
...APP_PROVIDERS,
])
.catch(err => console.error(err));
.then(decorateComponentRef)
.catch(err => console.error(err));
}
@ -51,6 +51,6 @@ if ('development' === ENV && HMR === true) {
let ngHmr = require('angular2-hmr');
ngHmr.hotModuleReplacement(main, module);
} else {
// bootstrap when documetn is ready
// bootstrap when document is ready
document.addEventListener('DOMContentLoaded', () => main());
}

9
src/platform/browser/directives.ts → src/platform/browser-directives.ts
View file

@ -1,11 +1,10 @@
/*
* These are globally available directives in any template
*/
import {PLATFORM_DIRECTIVES} from '@angular/core';
// Angular 2
import { PLATFORM_DIRECTIVES } from '@angular/core';
// Angular 2 Router
import {ROUTER_DIRECTIVES} from '@angular/router';
import { ROUTER_DIRECTIVES } from '@angular/router';
// Angular 2 forms
import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
@ -16,5 +15,5 @@ export const APPLICATION_DIRECTIVES = [
];
export const DIRECTIVES = [
{provide: PLATFORM_DIRECTIVES, multi: true, useValue: APPLICATION_DIRECTIVES }
{ provide: PLATFORM_DIRECTIVES, multi: true, useValue: APPLICATION_DIRECTIVES }
];

4
src/platform/browser/pipes.ts → src/platform/browser-pipes.ts
View file

@ -2,7 +2,7 @@
* These are globally available pipes in any template
*/
import {PLATFORM_PIPES} from '@angular/core';
import { PLATFORM_PIPES } from '@angular/core';
// application_pipes: pipes that are global through out the application
export const APPLICATION_PIPES = [
@ -10,5 +10,5 @@ export const APPLICATION_PIPES = [
];
export const PIPES = [
{provide: PLATFORM_PIPES, multi: true, useValue: APPLICATION_PIPES }
{ provide: PLATFORM_PIPES, multi: true, useValue: APPLICATION_PIPES }
];

23
src/platform/browser/providers.ts → src/platform/browser-providers.ts
View file

@ -3,15 +3,16 @@
*/
// Angular 2
import {FORM_PROVIDERS, LocationStrategy, HashLocationStrategy} from '@angular/common';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
// Angular 2 Http
import {HTTP_PROVIDERS} from '@angular/http';
import {APP_ROUTER_PROVIDERS} from '../../app/app.routes';
import { HTTP_PROVIDERS } from '@angular/http';
// Angular 2 Router
import { provideRouter } from '@angular/router';
// Angular 2 forms
import {disableDeprecatedForms, provideForms} from '@angular/forms';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
import { routes } from '../app/app.routes';
/*
* Application Providers/Directives/Pipes
@ -21,10 +22,12 @@ export const APPLICATION_PROVIDERS = [
// new Angular 2 forms
disableDeprecatedForms(),
provideForms(),
provideRouter(routes),
...HTTP_PROVIDERS,
...APP_ROUTER_PROVIDERS,
{provide: LocationStrategy, useClass: HashLocationStrategy},
{provide: LocationStrategy, useClass: HashLocationStrategy}
{ provide: LocationStrategy, useClass: HashLocationStrategy }
];
export const PROVIDERS = [

14
src/platform/browser.ts Normal file
View file

@ -0,0 +1,14 @@
export * from './browser-directives';
export * from './browser-pipes';
export * from './browser-providers';
import { DIRECTIVES } from './browser-directives';
import { PIPES } from './browser-pipes';
import { PROVIDERS } from './browser-providers';
export const PLATFORM_PROVIDERS = [
...PROVIDERS,
...DIRECTIVES,
...PIPES
];

3
src/platform/browser/index.ts
View file

@ -1,3 +0,0 @@
export * from './directives';
export * from './pipes';
export * from './providers';

9
src/platform/environment.ts
View file

@ -1,3 +1,4 @@
// Angular 2
// rc2 workaround
import { enableDebugTools, disableDebugTools } from '@angular/platform-browser';
@ -23,7 +24,13 @@ if ('production' === ENV) {
} else {
_decorateComponentRef = (cmpRef) => enableDebugTools(cmpRef);
_decorateComponentRef = (cmpRef) => {
let _ng = (<any>window).ng;
enableDebugTools(cmpRef);
(<any>window).ng.probe = _ng.probe;
(<any>window).ng.coreTokens = _ng.coreTokens;
return cmpRef;
};
// Development
PROVIDERS = [

45
src/polyfills.browser.ts Normal file
View file

@ -0,0 +1,45 @@
// Polyfills
// import 'ie-shim'; // Internet Explorer 9 support
// import 'core-js/es6';
// Added parts of es6 which are necessary for your project or your browser support requirements.
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/typed';
import 'core-js/es6/reflect';
// see issue https://github.com/AngularClass/angular2-webpack-starter/issues/709
// import 'core-js/es6/promise';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
// Typescript emit helpers polyfill
import 'ts-helpers';
if ('production' === ENV) {
// Production
} else {
// Development
Error.stackTraceLimit = Infinity;
require('zone.js/dist/long-stack-trace-zone');
}

28
src/polyfills.ts
View file

@ -1,28 +0,0 @@
// Polyfills
// (these modules are what are in 'angular2/bundles/angular2-polyfills' so don't use that here)
// import 'ie-shim'; // Internet Explorer
// import 'es6-shim';
// import 'es6-promise';
// import 'es7-reflect-metadata';
// Prefer CoreJS over the polyfills above
import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');
// Typescript emit helpers polyfill
import 'ts-helpers';
if ('production' === ENV) {
// Production
} else {
// Development
Error.stackTraceLimit = Infinity;
require('zone.js/dist/long-stack-trace-zone');
}

2
src/vendor.ts → src/vendor.browser.ts
View file

@ -8,6 +8,7 @@ import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/forms';
import '@angular/http';
import '@angular/router';
@ -26,5 +27,6 @@ if ('production' === ENV) {
} else {
// Development
require('angular2-hmr');
}

19
tsconfig.json
View file

@ -2,16 +2,31 @@
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"noEmitHelpers": true
"noEmitHelpers": true,
"lib": ["es6", "dom"],
"strictNullChecks": false,
"baseUrl": "./src",
"paths": [
],
"types": [
"core-js",
"hammerjs",
"node",
"source-map",
"uglify-js",
"webpack"
]
},
"exclude": [
"node_modules"
],
"awesomeTypescriptLoaderOptions": {
"forkChecker": true
"forkChecker": true,
"useWebpackText": true
},
"compileOnSave": false,
"buildOnSave": false,

6
tslint.json
View file

@ -55,9 +55,9 @@
"no-duplicate-variable": true,
"no-empty": false,
"no-eval": true,
"no-null-keyword": true,
"no-null-keyword": false,
"no-shadowed-variable": true,
"no-string-literal": true,
"no-string-literal": false,
"no-switch-case-fall-through": true,
"no-unreachable": true,
"no-unused-expression": true,
@ -90,7 +90,7 @@
"trailing-comma": [
true,
{
"multiline": "never",
"multiline": false,
"singleline": "never"
}
],

16
typings.json
View file

@ -1,16 +0,0 @@
{
"globalDependencies": {
"angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
"core-js": "registry:dt/core-js#0.0.0+20160602141332",
"hammerjs": "registry:dt/hammerjs#2.0.4+20160417130828",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160621231320",
"selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654",
"source-map": "registry:dt/source-map#0.0.0+20160317120654",
"uglify-js": "registry:dt/uglify-js#2.6.1+20160316155526",
"webpack": "registry:dt/webpack#1.12.9+20160523035535"
},
"dependencies": {
"lodash": "registry:npm/lodash#4.0.0+20160416211519"
}
}