Added an Angular 6 with Webpack 4 demo to get me started. · thiensk/JavaScript-Demos@aa77382 · GitHub
Skip to content

Commit aa77382

Browse files
bennadelbennadel
committed
Added an Angular 6 with Webpack 4 demo to get me started.
1 parent 13cec4a commit aa77382

19 files changed

Lines changed: 9828 additions & 0 deletions

‎demos/webpack4-angular6/.gitignore‎

Lines changed: 4 additions & 0 deletions

‎demos/webpack4-angular6/app/app.component.less‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
:host {
3+
display: block ;
4+
font-size: 18px ;
5+
}
6+
7+
strong {
8+
background-color: gold ;
9+
display: inline-block ;
10+
padding: 0px 5px 0px 5px ;
11+
}

‎demos/webpack4-angular6/app/app.component.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
5+
// ----------------------------------------------------------------------------------- //
6+
// ----------------------------------------------------------------------------------- //
7+
8+
@Component({
9+
selector: "my-app",
10+
styleUrls: [ "./app.component.less" ],
11+
template:
12+
`
13+
<p>
14+
Hello world, <strong>Angular 6</strong> with <strong>Webpack 4</strong>.
15+
</p>
16+
17+
<p>
18+
I'm not sure how well this works. But, it seems to compile!
19+
</p>
20+
21+
<my-widget></my-widget>
22+
`
23+
})
24+
export class AppComponent {
25+
26+
// I initialize the app component.
27+
constructor() {
28+
// ...
29+
}
30+
31+
}

‎demos/webpack4-angular6/app/app.module.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
// Import the core angular services.
3+
import { BrowserModule } from "@angular/platform-browser";
4+
import { NgModule } from "@angular/core";
5+
6+
// Import the application components and services.
7+
import { AppComponent } from "./app.component";
8+
import { WidgetComponent } from "./widget.component";
9+
10+
// ----------------------------------------------------------------------------------- //
11+
// ----------------------------------------------------------------------------------- //
12+
13+
@NgModule({
14+
imports: [
15+
BrowserModule
16+
],
17+
bootstrap: [
18+
AppComponent
19+
],
20+
declarations: [
21+
AppComponent,
22+
WidgetComponent
23+
]
24+
})
25+
export class AppModule {
26+
// ...
27+
}

‎demos/webpack4-angular6/app/main.htm‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Hello World With Webpack 4.17.2 And Angular 6.1.7
8+
</title>
9+
</head>
10+
<body>
11+
12+
<h1>
13+
Hello World With Webpack 4.17.2 And Angular 6.1.7
14+
</h1>
15+
16+
<my-app>
17+
<p>
18+
<em>Loading files...</em>
19+
</p>
20+
21+
<p>
22+
npm Run Scripts:
23+
</p>
24+
25+
<ul>
26+
<li>
27+
<strong>npm run build</strong> &mdash; Compiles the .ts file into bundles.
28+
</li>
29+
<li>
30+
<strong>npm run watch</strong> &mdash; Compiles the .ts file into bundles and then watches files for changes.
31+
</li>
32+
</ul>
33+
</my-app>
34+
35+
</body>
36+
</html>

‎demos/webpack4-angular6/app/main.polyfill.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
// Import these libraries for their side-effects.
3+
import "core-js/client/shim.min.js";
4+
import "zone.js/dist/zone.js";

‎demos/webpack4-angular6/app/main.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
// Import the core angular services.
3+
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
4+
5+
// Import the root module for bootstrapping.
6+
import { AppModule } from "./app.module";
7+
8+
platformBrowserDynamic().bootstrapModule( AppModule );

‎demos/webpack4-angular6/app/main.vendor.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
// Import these libraries for their side-effects.
3+
// --
4+
// CAUTION: As you add more "import" statements to your application code, you will have
5+
// to come back to this file and add those imports here as well (otherwise that imported
6+
// content may get bundled with your main application bundle, not your vendor bundle.
7+
// import "@angular/common/http";
8+
import "@angular/core";
9+
import "@angular/platform-browser-dynamic";

‎demos/webpack4-angular6/app/widget.component.less‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
:host {
3+
background-color: #333333 ;
4+
color: #ffffff ;
5+
display: block ;
6+
}

‎demos/webpack4-angular6/app/widget.component.ts‎

Lines changed: 23 additions & 0 deletions

0 commit comments

Comments
 (0)