docs(aio): add examples to test cookbook doc
This commit is contained in:
Peter Bacon Darwin
Igor Minar
parent
41db177d0c
commit
bcba0332a6
|
|
@ -0,0 +1,42 @@
|
||||||
|
'use strict'; // necessary for es6 output in node
|
||||||
|
|
||||||
|
import { browser, element, by, ElementFinder } from 'protractor';
|
||||||
|
|
||||||
|
describe('Cookbook: component-relative paths', function () {
|
||||||
|
|
||||||
|
interface Page {
|
||||||
|
title: ElementFinder;
|
||||||
|
absComp: ElementFinder;
|
||||||
|
relComp: ElementFinder;
|
||||||
|
|
||||||
|
}
|
||||||
|
function getPageStruct() {
|
||||||
|
return {
|
||||||
|
title: element( by.tagName( 'h1' )),
|
||||||
|
absComp: element( by.css( 'absolute-path div' ) ),
|
||||||
|
relComp: element( by.css( 'relative-path div' ) )
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let page: Page;
|
||||||
|
beforeAll(function () {
|
||||||
|
browser.get('');
|
||||||
|
page = getPageStruct();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should display title of the sample', function () {
|
||||||
|
expect(element(by.tagName('h1')).getText()).toContain('Paths');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should have absolute-path element', function () {
|
||||||
|
expect(page.absComp.isPresent()).toBe(true, 'no <absolute-path> element');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should display the absolute path text', function () {
|
||||||
|
expect(page.absComp.getText()).toContain('Absolute');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should display the component-relative path text', function () {
|
||||||
|
expect(page.relComp.getText()).toContain('Component-relative');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
// #docregion
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'my-app',
|
||||||
|
template:
|
||||||
|
`<h1>Absolute & <i>Component-Relative</i> Paths</h1>
|
||||||
|
<absolute-path></absolute-path>
|
||||||
|
<relative-path></relative-path>
|
||||||
|
`
|
||||||
|
})
|
||||||
|
export class AppComponent {}
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
|
|
||||||
|
import { AppComponent } from './app.component';
|
||||||
|
import { SomeAbsoluteComponent, SomeRelativeComponent } from './some.component';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
BrowserModule
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
AppComponent,
|
||||||
|
SomeAbsoluteComponent,
|
||||||
|
SomeRelativeComponent
|
||||||
|
],
|
||||||
|
bootstrap: [ AppComponent ]
|
||||||
|
})
|
||||||
|
export class AppModule { }
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||||
|
|
||||||
|
import { AppModule } from './app.module';
|
||||||
|
|
||||||
|
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
/* #docregion */
|
||||||
|
div.absolute {
|
||||||
|
background: beige;
|
||||||
|
border: 1px solid darkred;
|
||||||
|
color: red;
|
||||||
|
margin: 8px;
|
||||||
|
max-width: 20em;
|
||||||
|
padding: 4px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.relative {
|
||||||
|
background: powderblue;
|
||||||
|
border: 1px solid darkblue;
|
||||||
|
color: Blue;
|
||||||
|
font-style: italic;
|
||||||
|
margin: 8px;
|
||||||
|
max-width: 20em;
|
||||||
|
padding: 4px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
<!-- #docregion -->
|
||||||
|
<div class={{class}}>
|
||||||
|
{{type}}<br>{{path}}
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
// #docregion
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
///////// Using Absolute Paths ///////
|
||||||
|
|
||||||
|
// #docregion absolute-config
|
||||||
|
@Component({
|
||||||
|
selector: 'absolute-path',
|
||||||
|
templateUrl: 'app/some.component.html',
|
||||||
|
styleUrls: ['app/some.component.css']
|
||||||
|
})
|
||||||
|
// #enddocregion absolute-config
|
||||||
|
export class SomeAbsoluteComponent {
|
||||||
|
class = 'absolute';
|
||||||
|
type = 'Absolute template & style URLs';
|
||||||
|
path = 'app/path.component.html';
|
||||||
|
}
|
||||||
|
|
||||||
|
///////// Using Relative Paths ///////
|
||||||
|
|
||||||
|
// #docregion relative-config
|
||||||
|
@Component({
|
||||||
|
// #docregion module-id
|
||||||
|
moduleId: module.id,
|
||||||
|
// #enddocregion module-id
|
||||||
|
selector: 'relative-path',
|
||||||
|
templateUrl: './some.component.html',
|
||||||
|
styleUrls: ['./some.component.css']
|
||||||
|
})
|
||||||
|
// #enddocregion relative-config
|
||||||
|
|
||||||
|
export class SomeRelativeComponent {
|
||||||
|
class = 'relative';
|
||||||
|
type = 'Component-relative template & style URLs';
|
||||||
|
path = 'path.component.html';
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<base href="/">
|
||||||
|
|
||||||
|
<title>
|
||||||
|
Component-Relative Paths
|
||||||
|
</title>
|
||||||
|
|
||||||
|
<!-- #docregion style -->
|
||||||
|
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||||
|
<!-- #enddocregion style -->
|
||||||
|
|
||||||
|
<!-- Polyfills for older browsers -->
|
||||||
|
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||||
|
|
||||||
|
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||||
|
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||||
|
|
||||||
|
<script src="systemjs.config.js"></script>
|
||||||
|
<script>
|
||||||
|
System.import('app').catch(function(err){ console.error(err); });
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<my-app>Loading app...</my-app>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"description": "Module-relative Paths",
|
||||||
|
"files": [
|
||||||
|
"!**/*.d.ts",
|
||||||
|
"!**/*.js"
|
||||||
|
],
|
||||||
|
"tags": [ "cookbook" ]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
'use strict'; // necessary for es6 output in node
|
||||||
|
|
||||||
|
import { browser, element, by } from 'protractor';
|
||||||
|
|
||||||
|
describe('QuickStart E2E Tests', function () {
|
||||||
|
|
||||||
|
let expectedMsg = 'Hello from Angular App with Webpack';
|
||||||
|
|
||||||
|
beforeEach(function () {
|
||||||
|
browser.get('');
|
||||||
|
});
|
||||||
|
|
||||||
|
it(`should display: ${expectedMsg}`, function () {
|
||||||
|
expect(element(by.css('h1')).getText()).toEqual(expectedMsg);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should display an image', function () {
|
||||||
|
expect(element(by.css('img')).isPresent()).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
/* tslint:disable */
|
||||||
|
// #docregion one-entry
|
||||||
|
entry: {
|
||||||
|
app: 'src/app.ts'
|
||||||
|
}
|
||||||
|
// #enddocregion one-entry
|
||||||
|
|
||||||
|
// #docregion app-example
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
...
|
||||||
|
})
|
||||||
|
export class AppComponent {}
|
||||||
|
// #enddocregion app-example
|
||||||
|
|
||||||
|
// #docregion one-output
|
||||||
|
output: {
|
||||||
|
filename: 'app.js'
|
||||||
|
}
|
||||||
|
// #enddocregion one-output
|
||||||
|
|
||||||
|
// #docregion two-entries
|
||||||
|
entry: {
|
||||||
|
app: 'src/app.ts',
|
||||||
|
vendor: 'src/vendor.ts'
|
||||||
|
},
|
||||||
|
|
||||||
|
output: {
|
||||||
|
filename: '[name].js'
|
||||||
|
}
|
||||||
|
// #enddocregion two-entries
|
||||||
|
|
||||||
|
// #docregion loaders
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.ts$/
|
||||||
|
loader: 'awesome-typescript-loader'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/
|
||||||
|
loaders: 'style-loader!css-loader'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
// #enddocregion loaders
|
||||||
|
|
||||||
|
// #docregion imports
|
||||||
|
// #docregion single-import
|
||||||
|
import { AppComponent } from './app.component.ts';
|
||||||
|
// #enddocregion single-import
|
||||||
|
import 'uiframework/dist/uiframework.css';
|
||||||
|
// #enddocregion imports
|
||||||
|
|
||||||
|
// #docregion plugins
|
||||||
|
plugins: [
|
||||||
|
new webpack.optimize.UglifyJsPlugin()
|
||||||
|
]
|
||||||
|
// #enddocregion plugins
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
dist
|
||||||
|
!karma.webpack.conf.js
|
||||||
|
!webpack.config.js
|
||||||
|
!config/*
|
||||||
|
!public/css/styles.css
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
// #docregion
|
||||||
|
var path = require('path');
|
||||||
|
|
||||||
|
var _root = path.resolve(__dirname, '..');
|
||||||
|
|
||||||
|
function root(args) {
|
||||||
|
args = Array.prototype.slice.call(arguments, 0);
|
||||||
|
return path.join.apply(path, [_root].concat(args));
|
||||||
|
}
|
||||||
|
|
||||||
|
exports.root = root;
|
||||||
|
// #enddocregion
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
// #docregion
|
||||||
|
Error.stackTraceLimit = Infinity;
|
||||||
|
|
||||||
|
require('core-js/es6');
|
||||||
|
require('core-js/es7/reflect');
|
||||||
|
|
||||||
|
require('zone.js/dist/zone');
|
||||||
|
require('zone.js/dist/long-stack-trace-zone');
|
||||||
|
require('zone.js/dist/proxy');
|
||||||
|
require('zone.js/dist/sync-test');
|
||||||
|
require('zone.js/dist/jasmine-patch');
|
||||||
|
require('zone.js/dist/async-test');
|
||||||
|
require('zone.js/dist/fake-async-test');
|
||||||
|
|
||||||
|
var appContext = require.context('../src', true, /\.spec\.ts/);
|
||||||
|
|
||||||
|
appContext.keys().forEach(appContext);
|
||||||
|
|
||||||
|
var testing = require('@angular/core/testing');
|
||||||
|
var browser = require('@angular/platform-browser-dynamic/testing');
|
||||||
|
|
||||||
|
testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
// #docregion
|
||||||
|
var webpackConfig = require('./webpack.test');
|
||||||
|
|
||||||
|
module.exports = function (config) {
|
||||||
|
var _config = {
|
||||||
|
basePath: '',
|
||||||
|
|
||||||
|
frameworks: ['jasmine'],
|
||||||
|
|
||||||
|
files: [
|
||||||
|
{pattern: './config/karma-test-shim.js', watched: false}
|
||||||
|
],
|
||||||
|
|
||||||
|
preprocessors: {
|
||||||
|
'./config/karma-test-shim.js': ['webpack', 'sourcemap']
|
||||||
|
},
|
||||||
|
|
||||||
|
webpack: webpackConfig,
|
||||||
|
|
||||||
|
webpackMiddleware: {
|
||||||
|
stats: 'errors-only'
|
||||||
|
},
|
||||||
|
|
||||||
|
webpackServer: {
|
||||||
|
noInfo: true
|
||||||
|
},
|
||||||
|
|
||||||
|
reporters: ['progress'],
|
||||||
|
port: 9876,
|
||||||
|
colors: true,
|
||||||
|
logLevel: config.LOG_INFO,
|
||||||
|
autoWatch: false,
|
||||||
|
browsers: ['PhantomJS'],
|
||||||
|
singleRun: true
|
||||||
|
};
|
||||||
|
|
||||||
|
config.set(_config);
|
||||||
|
};
|
||||||
|
// #enddocregion
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
// #docregion
|
||||||
|
var webpack = require('webpack');
|
||||||
|
var HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
|
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||||
|
var helpers = require('./helpers');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
// #docregion entries
|
||||||
|
entry: {
|
||||||
|
'polyfills': './src/polyfills.ts',
|
||||||
|
'vendor': './src/vendor.ts',
|
||||||
|
'app': './src/main.ts'
|
||||||
|
},
|
||||||
|
// #enddocregion
|
||||||
|
|
||||||
|
// #docregion resolve
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.ts', '.js']
|
||||||
|
},
|
||||||
|
// #enddocregion resolve
|
||||||
|
|
||||||
|
// #docregion loaders
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.ts$/,
|
||||||
|
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.html$/,
|
||||||
|
loader: 'html-loader'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
|
||||||
|
loader: 'file-loader?name=assets/[name].[hash].[ext]'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
exclude: helpers.root('src', 'app'),
|
||||||
|
loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
include: helpers.root('src', 'app'),
|
||||||
|
loader: 'raw-loader'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// #enddocregion loaders
|
||||||
|
|
||||||
|
// #docregion plugins
|
||||||
|
plugins: [
|
||||||
|
// Workaround for angular/angular#11580
|
||||||
|
new webpack.ContextReplacementPlugin(
|
||||||
|
// The (\\|\/) piece accounts for path separators in *nix and Windows
|
||||||
|
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
|
||||||
|
helpers.root('./src'), // location of your src
|
||||||
|
{} // a map of your routes
|
||||||
|
),
|
||||||
|
|
||||||
|
new webpack.optimize.CommonsChunkPlugin({
|
||||||
|
name: ['app', 'vendor', 'polyfills']
|
||||||
|
}),
|
||||||
|
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
template: 'src/index.html'
|
||||||
|
})
|
||||||
|
]
|
||||||
|
// #enddocregion plugins
|
||||||
|
};
|
||||||
|
// #enddocregion
|
||||||
|
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
// #docregion
|
||||||
|
var webpackMerge = require('webpack-merge');
|
||||||
|
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||||
|
var commonConfig = require('./webpack.common.js');
|
||||||
|
var helpers = require('./helpers');
|
||||||
|
|
||||||
|
module.exports = webpackMerge(commonConfig, {
|
||||||
|
devtool: 'cheap-module-eval-source-map',
|
||||||
|
|
||||||
|
output: {
|
||||||
|
path: helpers.root('dist'),
|
||||||
|
publicPath: 'http://localhost:8080/',
|
||||||
|
filename: '[name].js',
|
||||||
|
chunkFilename: '[id].chunk.js'
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
new ExtractTextPlugin('[name].css')
|
||||||
|
],
|
||||||
|
|
||||||
|
devServer: {
|
||||||
|
historyApiFallback: true,
|
||||||
|
stats: 'minimal'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// #enddocregion
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
// #docregion
|
||||||
|
var webpack = require('webpack');
|
||||||
|
var webpackMerge = require('webpack-merge');
|
||||||
|
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||||
|
var commonConfig = require('./webpack.common.js');
|
||||||
|
var helpers = require('./helpers');
|
||||||
|
|
||||||
|
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
|
||||||
|
|
||||||
|
module.exports = webpackMerge(commonConfig, {
|
||||||
|
devtool: 'source-map',
|
||||||
|
|
||||||
|
output: {
|
||||||
|
path: helpers.root('dist'),
|
||||||
|
publicPath: '/',
|
||||||
|
filename: '[name].[hash].js',
|
||||||
|
chunkFilename: '[id].[hash].chunk.js'
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
new webpack.NoEmitOnErrorsPlugin(),
|
||||||
|
new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
|
||||||
|
mangle: {
|
||||||
|
keep_fnames: true
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
new ExtractTextPlugin('[name].[hash].css'),
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
'process.env': {
|
||||||
|
'ENV': JSON.stringify(ENV)
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
new webpack.LoaderOptionsPlugin({
|
||||||
|
htmlLoader: {
|
||||||
|
minimize: false // workaround for ng2
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
// #enddocregion
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
// #docregion
|
||||||
|
var webpack = require('webpack');
|
||||||
|
var helpers = require('./helpers');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
devtool: 'inline-source-map',
|
||||||
|
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.ts', '.js']
|
||||||
|
},
|
||||||
|
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.ts$/,
|
||||||
|
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.html$/,
|
||||||
|
loader: 'html-loader'
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
|
||||||
|
loader: 'null-loader'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
exclude: helpers.root('src', 'app'),
|
||||||
|
loader: 'null-loader'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
include: helpers.root('src', 'app'),
|
||||||
|
loader: 'raw-loader'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
new webpack.ContextReplacementPlugin(
|
||||||
|
// The (\\|\/) piece accounts for path separators in *nix and Windows
|
||||||
|
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
|
||||||
|
helpers.root('./src'), // location of your src
|
||||||
|
{} // a map of your routes
|
||||||
|
)
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
// #enddocregion
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"build": "build:webpack",
|
||||||
|
"run": "http-server:cli"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
// #docregion
|
||||||
|
module.exports = require('./config/karma.conf.js');
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
{
|
||||||
|
"name": "angular2-webpack",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "A webpack starter for Angular",
|
||||||
|
"scripts": {
|
||||||
|
"start": "webpack-dev-server --inline --progress --port 8080",
|
||||||
|
"test": "karma start",
|
||||||
|
"build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@angular/common": "~2.4.0",
|
||||||
|
"@angular/compiler": "~2.4.0",
|
||||||
|
"@angular/core": "~2.4.0",
|
||||||
|
"@angular/forms": "~2.4.0",
|
||||||
|
"@angular/http": "~2.4.0",
|
||||||
|
"@angular/platform-browser": "~2.4.0",
|
||||||
|
"@angular/platform-browser-dynamic": "~2.4.0",
|
||||||
|
"@angular/router": "~3.4.0",
|
||||||
|
"core-js": "^2.4.1",
|
||||||
|
"rxjs": "5.0.1",
|
||||||
|
"zone.js": "^0.7.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^6.0.45",
|
||||||
|
"@types/jasmine": "^2.5.35",
|
||||||
|
"angular2-template-loader": "^0.6.0",
|
||||||
|
"awesome-typescript-loader": "^3.0.0-beta.18",
|
||||||
|
"css-loader": "^0.26.1",
|
||||||
|
"extract-text-webpack-plugin": "2.0.0-beta.5",
|
||||||
|
"file-loader": "^0.9.0",
|
||||||
|
"html-loader": "^0.4.3",
|
||||||
|
"html-webpack-plugin": "^2.16.1",
|
||||||
|
"jasmine-core": "^2.4.1",
|
||||||
|
"karma": "^1.2.0",
|
||||||
|
"karma-jasmine": "^1.0.2",
|
||||||
|
"karma-phantomjs-launcher": "^1.0.2",
|
||||||
|
"karma-sourcemap-loader": "^0.3.7",
|
||||||
|
"karma-webpack": "^2.0.1",
|
||||||
|
"null-loader": "^0.1.1",
|
||||||
|
"phantomjs-prebuilt": "^2.1.7",
|
||||||
|
"raw-loader": "^0.5.1",
|
||||||
|
"rimraf": "^2.5.2",
|
||||||
|
"style-loader": "^0.13.1",
|
||||||
|
"typescript": "~2.0.10",
|
||||||
|
"webpack": "2.2.0",
|
||||||
|
"webpack-dev-server": "2.2.0-rc.0",
|
||||||
|
"webpack-merge": "^2.4.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
/* #docregion */
|
||||||
|
body {
|
||||||
|
background: #0147A7;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
/* #enddocregion */
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -0,0 +1,9 @@
|
||||||
|
/* #docregion */
|
||||||
|
main {
|
||||||
|
padding: 1em;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 50px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
/* #enddocregion */
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
<!-- #docregion -->
|
||||||
|
<main>
|
||||||
|
<h1>Hello from Angular App with Webpack</h1>
|
||||||
|
|
||||||
|
<img src="../../public/images/angular.png">
|
||||||
|
</main>
|
||||||
|
<!-- #enddocregion -->
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
// #docregion
|
||||||
|
import { TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { AppComponent } from './app.component';
|
||||||
|
|
||||||
|
describe('App', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
TestBed.configureTestingModule({ declarations: [AppComponent]});
|
||||||
|
});
|
||||||
|
|
||||||
|
it ('should work', () => {
|
||||||
|
let fixture = TestBed.createComponent(AppComponent);
|
||||||
|
expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// #enddocregion
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
// #docregion
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
import '../../public/css/styles.css';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'my-app',
|
||||||
|
templateUrl: './app.component.html',
|
||||||
|
styleUrls: ['./app.component.css']
|
||||||
|
})
|
||||||
|
export class AppComponent { }
|
||||||
|
// #enddocregion
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
// #docregion
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
|
|
||||||
|
import { AppComponent } from './app.component';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
BrowserModule
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
AppComponent
|
||||||
|
],
|
||||||
|
bootstrap: [ AppComponent ]
|
||||||
|
})
|
||||||
|
export class AppModule { }
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!-- #docregion -->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<base href="/">
|
||||||
|
<title>Angular With Webpack</title>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<my-app>Loading...</my-app>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
<!-- #enddocregion -->
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
// #docregion
|
||||||
|
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||||
|
import { enableProdMode } from '@angular/core';
|
||||||
|
|
||||||
|
import { AppModule } from './app/app.module';
|
||||||
|
|
||||||
|
// #docregion enable-prod
|
||||||
|
if (process.env.ENV === 'production') {
|
||||||
|
enableProdMode();
|
||||||
|
}
|
||||||
|
// #enddocregion enable-prod
|
||||||
|
|
||||||
|
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||||
|
// #enddocregion
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
// #docregion
|
||||||
|
import 'core-js/es6';
|
||||||
|
import 'core-js/es7/reflect';
|
||||||
|
require('zone.js/dist/zone');
|
||||||
|
|
||||||
|
if (process.env.ENV === 'production') {
|
||||||
|
// Production
|
||||||
|
} else {
|
||||||
|
// Development and test
|
||||||
|
Error['stackTraceLimit'] = Infinity;
|
||||||
|
require('zone.js/dist/long-stack-trace-zone');
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
// #docregion
|
||||||
|
// Angular
|
||||||
|
import '@angular/platform-browser';
|
||||||
|
import '@angular/platform-browser-dynamic';
|
||||||
|
import '@angular/core';
|
||||||
|
import '@angular/common';
|
||||||
|
import '@angular/http';
|
||||||
|
import '@angular/router';
|
||||||
|
|
||||||
|
// RxJS
|
||||||
|
import 'rxjs';
|
||||||
|
|
||||||
|
// Other vendors for example jQuery, Lodash or Bootstrap
|
||||||
|
// You can import js, ts, css, sass, ...
|
||||||
|
// #enddocregion
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"module": "commonjs",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"sourceMap": true,
|
||||||
|
"emitDecoratorMetadata": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"lib": ["es2015", "dom"],
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"suppressImplicitAnyIndexErrors": true
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue