Commit beed8538 authored by 2dmaster's avatar 2dmaster

Angular 5 starter

parent 20f18262
.DS_Store
.idea
node_modules
/dist/
!/dist/index.html
/node_modules/
......@@ -25,12 +25,12 @@
|-- readme.md
|-- tsconfig.ts
|-- weback.config.js (file to manage webpack)
|-- weback.wendors.ts (list of packages to building: themes, bootstrap,e.t.c, don't including imported modules)
|-- weback.wendors.js (list of packages to building: themes, bootstrap,e.t.c, don't including imported modules)
### Features
- Building separate vendors and bundle js and css files.
- Media files DON'T included in bundle (to minimize the initial load). Media is loaded in default HTML mode.
- The webpack.vendors.ts file to specify the components for the assembly (do not load anything superfluous).
- The webpack.vendors.js file to specify the components for the assembly (do not load anything superfluous).
- Files of fonts and images are collected automatically. Links are also created automatically
\ No newline at end of file
<h2>App Index</h2>
<img src="../../img/angular2-typescript-webpack-source-maps.png" />
\ No newline at end of file
// Prefer CoreJS over the polyfills above
// import 'zone.js/dist/zone';
// import 'core-js/es7/reflect';
// import 'reflect-metadata';
//
// 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/reflect';
......@@ -5,13 +5,13 @@
<meta charset="UTF-8">
<base href="./">
<link rel="stylesheet" type="text/css" href="app.min.css">
<link rel="stylesheet" type="text/css" href="css/bundle.min.css">
</head>
<body>
<my-app>Loading...</my-app>
</body>
<script src="vendor.bundle.js"></script>
<script src="app.bundle.js"></script>
<script src="js/vendors.min.js"></script>
<script src="js/bundle.min.js"></script>
</html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<base href="./">
</head>
<body>
<my-app>Loading...</my-app>
</body>
<script src="dist/vendor.bundle.js"></script>
<script src="dist/app.bundle.js"></script>
</html>
......@@ -5,67 +5,67 @@
"requires": true,
"dependencies": {
"@angular/common": {
"version": "4.2.6",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-4.2.6.tgz",
"integrity": "sha1-IQrOS9JON1+LQbpS/rNLGKiH1do=",
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-5.2.1.tgz",
"integrity": "sha512-O7FA4Qpcu6GYMzlsNTHtUsAl6W0SXepP7qEMx83fC1Xje2GEtulp/99Pg6bvpFKiZYdCjJDhjbUZhIO5x0UncQ==",
"requires": {
"tslib": "1.8.1"
"tslib": "1.9.0"
}
},
"@angular/compiler": {
"version": "4.2.6",
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.2.6.tgz",
"integrity": "sha1-ZndW1JXKDUXSBhJooQ1Sr4Ofr/Q=",
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-5.2.1.tgz",
"integrity": "sha512-c/HDfbDr8yDUCoVCbGHgoae3YCoWG3EuM/l7jfHflE8sbdppiFVxCRd3VkygkwfPGpUZbZaW2x/OK4Z1dQa34g==",
"requires": {
"tslib": "1.8.1"
"tslib": "1.9.0"
}
},
"@angular/core": {
"version": "4.2.6",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-4.2.6.tgz",
"integrity": "sha1-DByP8BV/B29KfAtyHKFCPxu+Fk4=",
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-5.2.1.tgz",
"integrity": "sha512-2kyXVl+OK/LRUisSfILkRyWiD2BGXysQkN2dwxfwYZwDciH7o8wGSlDDZw0lXIBt0Ly0stYiorIIJGVs5TffaA==",
"requires": {
"tslib": "1.8.1"
"tslib": "1.9.0"
}
},
"@angular/forms": {
"version": "4.2.6",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.2.6.tgz",
"integrity": "sha1-nTI5lgjkYDu/GXQXqluU6ApGfrA=",
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.2.1.tgz",
"integrity": "sha512-DeTpReZcK93FBxTdXqtmuzuW5blMu4fWe7JtmDXWD9UhTw7DwRbPO+7yFRbbfSDd3UzfGfqYBqOlSOdPh9dLbg==",
"requires": {
"tslib": "1.8.1"
"tslib": "1.9.0"
}
},
"@angular/http": {
"version": "4.2.6",
"resolved": "https://registry.npmjs.org/@angular/http/-/http-4.2.6.tgz",
"integrity": "sha1-SZ4roLvB89cbdt6+wDTJWMrxE04=",
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/@angular/http/-/http-5.2.1.tgz",
"integrity": "sha512-wMX7rnZcanYT2uVeqr1V9k9lduxZprVjvgetUlj6IuO7kbr22SAJN7phuubI0uAd7MUb7uDXBG8cJ00Q/NH6zw==",
"requires": {
"tslib": "1.8.1"
"tslib": "1.9.0"
}
},
"@angular/platform-browser": {
"version": "4.2.6",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.2.6.tgz",
"integrity": "sha1-oTH/WSIl/mSWvKLJr/YSpNvd9Dc=",
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.2.1.tgz",
"integrity": "sha512-+cE7FM6/WIMZWpxf+LxYhfTPBbxSvLNZv5+RnGcOeg4nEG3x0Ny1dr14r5HyudvKfu/A+xTlVCNY7RjZ6HsWVw==",
"requires": {
"tslib": "1.8.1"
"tslib": "1.9.0"
}
},
"@angular/platform-browser-dynamic": {
"version": "4.2.6",
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.2.6.tgz",
"integrity": "sha1-TmyK0s1c/BeIBBf3fyo0E895HCY=",
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.2.1.tgz",
"integrity": "sha512-S73suoYfGIj7eQlOBXvj3BO8mW8TUUZEUZ/nvFgB/jsb6PtYk1ByIVIWjcV5yttd4TXf7ZhaEYZPm1vBjIN0pA==",
"requires": {
"tslib": "1.8.1"
"tslib": "1.9.0"
}
},
"@angular/router": {
"version": "4.2.6",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-4.2.6.tgz",
"integrity": "sha1-ppGdm2HEX/wV++5ZM5jj/VMtq0Y=",
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-5.2.1.tgz",
"integrity": "sha512-NS8ttrfpjETfIt8Wn4oCP5KQ55UKuj6g3iG/yduoDMWel19KOINUYqz5ujL1gHha4A4Tgs1tBZKQKr0LmapTdA==",
"requires": {
"tslib": "1.8.1"
"tslib": "1.9.0"
}
},
"@types/core-js": {
......@@ -1811,7 +1811,8 @@
"core-js": {
"version": "2.5.3",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.3.tgz",
"integrity": "sha1-isw4NFgk8W2DZbfJtCWRaOjtYD4="
"integrity": "sha1-isw4NFgk8W2DZbfJtCWRaOjtYD4=",
"dev": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -7013,6 +7014,15 @@
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
"dev": true
},
"string_decoder": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
"integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
"dev": true,
"requires": {
"safe-buffer": "5.1.1"
}
},
"string-width": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
......@@ -7046,15 +7056,6 @@
}
}
},
"string_decoder": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
"integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
"dev": true,
"requires": {
"safe-buffer": "5.1.1"
}
},
"stringstream": {
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
......@@ -7461,9 +7462,9 @@
}
},
"tslib": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.8.1.tgz",
"integrity": "sha1-aUavLR1lGnsYY7Ux1uWvpBqkTqw="
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz",
"integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ=="
},
"tty-browserify": {
"version": "0.0.0",
......
{
"name": "app",
"version": "2.0.0",
"description": "AngularTS 4.*",
"description": "Angular 5.*",
"scripts": {
"webpack-build": "webpack -p --env.NODE_ENV=production --config webpack.config.js",
"webpack-prod": "webpack -p --env.NODE_ENV=production --config webpack.config.js",
"webpack-dev": "webpack --env.NODE_ENV=development --config webpack.config.js --watch"
},
"repository": {
......@@ -12,17 +12,15 @@
},
"license": "ISC",
"dependencies": {
"@angular/common": "~4.2.6",
"@angular/compiler": "~4.2.6",
"@angular/core": "~4.2.6",
"@angular/forms": "~4.2.6",
"@angular/http": "~4.2.6",
"@angular/platform-browser": "~4.2.6",
"@angular/platform-browser-dynamic": "~4.2.6",
"@angular/router": "~4.2.6",
"core-js": "^2.4.1",
"@angular/common": "^5.2.1",
"@angular/compiler": "^5.2.1",
"@angular/core": "^5.2.1",
"@angular/forms": "^5.2.1",
"@angular/http": "^5.2.1",
"@angular/platform-browser": "^5.2.1",
"@angular/platform-browser-dynamic": "^5.2.1",
"@angular/router": "^5.2.1",
"reflect-metadata": "^0.1.3",
"tslib": "^1.7.1",
"rxjs": "^5.0.1",
"zone.js": "^0.8.10"
},
......
......@@ -2,10 +2,7 @@ import {Component} from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>My First Angular 4 App</h1>
<app-index></app-index>
`,
styles: [require("./app.scss").toString()]
template: require('./app.html'),
styles: [require("./scss/global.scss").toString()]
})
export class AppComponent {}
<h1>My First Angular 5 App</h1>
<app-index></app-index>
\ No newline at end of file
......@@ -2,13 +2,13 @@ import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {CommonModule} from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import {AppComponent} from './app.component';
import {IndexComponent} from './index/index.component';
@NgModule({
imports: [BrowserModule, CommonModule],
declarations: [AppComponent, IndexComponent],
exports: [BrowserModule, CommonModule],
bootstrap: [AppComponent]
})
......
import 'reflect-metadata';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';
// Uncomment below to enable Angular prod mode.
// import {enableProdMode} from '@angular/core';
// enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<h2>App Index</h2>
<img src="./assets/img/angular2-typescript-webpack-source-maps.png"/>
\ No newline at end of file
import {Component} from '@angular/core';
@Component({
selector: 'app-index',
template: require('./index.component.html'),
styles: [
require("./index.component.scss").toString()
require('./index.component.scss').toString()
]
})
......
var webpack = require("webpack"),
autoprefixer = require("autoprefixer"),
ExtractTextPlugin = require("extract-text-webpack-plugin"),
path = require('path');
function root(__path) {
return path.join(__dirname, 'dist');
}
path = require('path'),
root = function (__path) {
return path.join(__dirname, 'dist');
};
module.exports = function (env) {
return {
devtool: env.NODE_ENV == 'development' ? '#eval' : false,
entry: {
"vendor": "./webpack.vendors",
"app": "./app/main"
"vendors": "./webpack.vendors",
"bundle": "./src/app"
},
resolve: {
extensions: ['.ts', '.js'],
modules: [
path.resolve('./app'),
path.resolve('./src'),
path.resolve('./node_modules')
]
},
plugins: [
new ExtractTextPlugin('./dist/[name].min.css'),
new ExtractTextPlugin('css/[name].min.css'),
// Takes care of warnings described at https://github.com/angular/angular/issues/11580
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)@angular/,
root('./app'),
{}
/(.+)?angular(\\|\/)core(.+)?/, root('./src'), {}
),
new webpack.LoaderOptionsPlugin({
new webpack.optimize.UglifyJsPlugin({
minimize: true,
debug: false
sourceMap: false,
compress: {
unused: true,
dead_code: true,
drop_debugger: true,
conditionals: true,
evaluate: false,
drop_console: true,
sequences: true,
booleans: true,
warnings: false
},
comments: false
})
// new webpack.optimize.UglifyJsPlugin({
// minimize: true,
// sourceMap: false
// })
],
output: {
path: __dirname,
filename: "./dist/[name].bundle.js"
filename: 'js/[name].min.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
......
import 'zone.js/dist/zone';
import 'reflect-metadata';
\ No newline at end of file
/**
* Comment or uncomment modules as needed
*/
import 'zone.js/dist/zone';
import 'rxjs/Observable';
import '@angular/common';
import '@angular/compiler';
import '@angular/core';
// import '@angular/forms';
import '@angular/http';
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/router';
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment