22 |
23 | _[Fabian Gosebrink](https://twitter.com/FabianGosebrink), [Damien Bowden](https://twitter.com/damien_bod), [Roberto Simonetti](https://twitter.com/robisim74)_
24 |
25 | Blogs:
26 | - [damienbod.com](https://damienbod.com/2016/06/12/asp-net-core-angular2-with-webpack-and-visual-studio/)
27 | - [offering.solutions](http://offering.solutions//blog/articles/2016/06/12/asp-net-core-angular-2-webpack-visual-studio/)
28 |
29 | ## Table of contents
30 | * [Project structure](#1)
31 | * [Installing](#2)
32 | * [Running](#3)
33 | * [Commands](#3.1)
34 | * [Development](#3.2)
35 | * [Production](#3.3)
36 | * [Testing](#4)
37 | * [Dotnet Template](#5)
38 | * [Notes](#6)
39 | * [Links](#7)
40 |
41 | ## -
8 |
- Readme 9 |
- Changelog 10 |
- Lazy Loading 11 |
- Building production ready Angular apps with Visual Studio and ASP.NET Core 12 |
78 |
79 | The application is now running on localhost with port 8080 as defined.
80 |
81 | http://localhost:8080/home
82 |
83 | If for example, the color is changed in the app.scss, the bundles will be reloaded in the browser without refreshing.
84 | 
85 |
86 | ## Links
87 |
88 | https://webpack.js.org/concepts/hot-module-replacement/
89 |
90 | https://webpack.js.org/configuration/dev-server/#devserver
91 |
92 | https://github.com/webpack/webpack-dev-server
93 |
94 | https://www.sitepoint.com/beginners-guide-to-webpack-2-and-module-bundling/
95 |
96 | https://medium.com/@rajaraodv/webpack-hot-module-replacement-hmr-e756a726a07
97 |
--------------------------------------------------------------------------------
/docs/LAZY_LOADING.md:
--------------------------------------------------------------------------------
1 |
2 | # Angular Lazy Loading with Webpack 3
3 |
4 | This documentation shows how Angular lazy loading can be supported using Webpack 3 for both JIT and AOT builds. The Webpack loader angular-router-loader from Brandon Roberts is used to implement this.
5 |
6 | A big thanks to Roberto Simonetti for his help in this.
7 |
8 |
9 | Code VS2017 angular 4.x
10 |
11 |
12 | -
13 |
- Readme 14 |
- Changelog 15 |
- Hot Module Replacement 16 |
- Building production ready Angular apps with Visual Studio and ASP.NET Core 17 |
229 |
230 | Then start the application. The server is implemented using ASP.NET Core 1.1.
231 |
232 | ```javascript
233 | dotnet run
234 | ```
235 |
236 | When the application is started, the AboutModule is not loaded.
237 |
238 | 
239 |
240 | When the about tab is clicked, the chunked AboutModule is loaded.
241 |
242 | 
243 |
244 | Absolutely fantastic. You could also pre-load the modules if required. See this blog.
245 |
246 | Links:
247 |
248 | https://github.com/brandonroberts/angular-router-loader
249 |
250 | https://www.npmjs.com/package/angular-router-loader
251 |
252 | https://vsavkin.com/angular-router-preloading-modules-ba3c75e424cb
253 |
254 | https://webpack.github.io/docs/
255 |
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/.eslintignore:
--------------------------------------------------------------------------------
1 | # don't ever lint node_modules
2 | node_modules
3 | # don't lint build output (make sure it's set to your correct build folder name)
4 | .template.config
5 | # don't lint nyc coverage output
6 | bin
7 | obj
8 | wwwroot
9 | config
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | parser: '@typescript-eslint/parser',
4 | parserOptions: {
5 | tsconfigRootDir: __dirname,
6 | project: ['./tsconfig.json', './tsconfig-aot.json'],
7 | },
8 | plugins: [
9 | '@typescript-eslint',
10 | ],
11 | extends: [
12 | 'eslint:recommended',
13 | 'plugin:@typescript-eslint/eslint-recommended',
14 | 'plugin:@typescript-eslint/recommended',
15 | 'plugin:@typescript-eslint/recommended-requiring-type-checking',
16 | ],
17 | };
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/.template.config/template.json:
--------------------------------------------------------------------------------
1 | {
2 | "author": "Damien Bowden, Roberto Simonetti, Fabian Gosebrink",
3 | "classifications": [ "Web", "SPA", "Angular" ],
4 | "name": "ASP.NET Core with Angular and Webpack",
5 | "identity": "AngularWebpackVisualStudio",
6 | "shortName": "angularwebapi",
7 | "tags": {
8 | "language": "C#"
9 | },
10 | "sourceName": "AngularWebpackVisualStudio",
11 | "preferNameDirectory" : "true"
12 | }
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "0.2.0",
3 | "configurations": [
4 | {
5 | "name": ".NET Core Launch (web)",
6 | "type": "coreclr",
7 | "request": "launch",
8 | "preLaunchTask": "build",
9 | "program": "${workspaceRoot}\\bin\\Debug\\netcoreapp1.1\\Angular2WebpackVisualStudio.dll",
10 | "args": [],
11 | "cwd": "${workspaceRoot}",
12 | "stopAtEntry": false,
13 | "internalConsoleOptions": "openOnSessionStart",
14 | "launchBrowser": {
15 | "enabled": true,
16 | "args": "${auto-detect-url}",
17 | "windows": {
18 | "command": "cmd.exe",
19 | "args": "/C start ${auto-detect-url}"
20 | },
21 | "osx": {
22 | "command": "open"
23 | },
24 | "linux": {
25 | "command": "xdg-open"
26 | }
27 | },
28 | "env": {
29 | "ASPNETCORE_ENVIRONMENT": "Development"
30 | },
31 | "sourceFileMap": {
32 | "/Views": "${workspaceRoot}/Views"
33 | }
34 | },
35 | {
36 | "name": ".NET Core Attach",
37 | "type": "coreclr",
38 | "request": "attach",
39 | "processId": "${command.pickProcess}"
40 | }
41 | ]
42 | }
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "0.1.0",
3 | "command": "dotnet",
4 | "isShellCommand": true,
5 | "args": [],
6 | "tasks": [
7 | {
8 | "taskName": "build",
9 | "args": [
10 | "${workspaceRoot}\\project.json"
11 | ],
12 | "isBuildCommand": true,
13 | "problemMatcher": "$msCompile"
14 | }
15 | ]
16 | }
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/AngularWebpackVisualStudio.csproj:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/angularApp/app/about/components/about.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-about-component',
5 | templateUrl: './about.component.html'
6 | })
7 |
8 | export class AboutComponent {
9 |
10 | message: string;
11 |
12 | constructor() {
13 | this.message = 'Hello from AboutComponent constructor';
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/angularApp/app/app.component.html:
--------------------------------------------------------------------------------
1 | 3 | {{message}} 4 |
5 |
3 |
5 |
2 |
6 |
20 | 3 | {{message}} 4 |
5 |
21 |
42 |
22 |
23 |
24 |
40 |
41 | | # | 26 |Name | 27 |28 | |
|---|---|---|
| {{i + 1}} | 33 |{{thing.name}} | 34 |35 | 36 | | 37 |
43 |
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/angularApp/app/home/components/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | import { ThingService } from './../../core/services/thing-data.service';
4 | import { Thing } from './../../models/thing';
5 |
6 | @Component({
7 | selector: 'app-home-component',
8 | templateUrl: './home.component.html'
9 | })
10 | export class HomeComponent implements OnInit {
11 | message: string;
12 | things: Thing[] = [];
13 | thing: Thing = new Thing();
14 |
15 | constructor(private dataService: ThingService) {
16 | this.message = 'Things from the ASP.NET Core API';
17 | }
18 |
19 | ngOnInit(): void {
20 | this.getAllThings();
21 | }
22 |
23 | addThing(): void {
24 | this.dataService.add(this.thing).subscribe(
25 | () => {
26 | this.getAllThings();
27 | this.thing = new Thing();
28 | },
29 | error => {
30 | console.log(error);
31 | }
32 | );
33 | }
34 |
35 | deleteThing(thing: Thing): void {
36 | this.dataService.delete(thing.id).subscribe(
37 | () => {
38 | this.getAllThings();
39 | },
40 | error => {
41 | console.log(error);
42 | }
43 | );
44 | }
45 |
46 | private getAllThings(): void {
47 | this.dataService
48 | .getAll()
49 | .subscribe(
50 | data => (this.things = data),
51 | error => console.log(error),
52 | () => console.log('Get all complete')
53 | );
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/angularApp/app/home/home.module.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { HttpClientModule } from '@angular/common/http';
3 | import { NgModule } from '@angular/core';
4 | import { FormsModule } from '@angular/forms';
5 |
6 | import { HomeComponent } from './components/home.component';
7 | import { HomeRoutes } from './home.routes';
8 |
9 | @NgModule({
10 | imports: [
11 | CommonModule,
12 | FormsModule,
13 | HttpClientModule,
14 | HomeRoutes
15 | ],
16 |
17 | declarations: [
18 | HomeComponent
19 | ],
20 |
21 | exports: [
22 | HomeComponent
23 | ]
24 | })
25 |
26 | export class HomeModule { }
27 |
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/angularApp/app/home/home.routes.ts:
--------------------------------------------------------------------------------
1 | import { RouterModule, Routes } from '@angular/router';
2 |
3 | import { HomeComponent } from './components/home.component';
4 |
5 | const routes: Routes = [
6 | { path: 'home', component: HomeComponent }
7 | ];
8 |
9 | export const HomeRoutes = RouterModule.forChild(routes);
10 |
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/angularApp/app/models/thing.ts:
--------------------------------------------------------------------------------
1 | export class Thing {
2 | public id = 0;
3 | public name = '';
4 | }
5 |
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/angularApp/app/shared/components/customfooter/customfooter.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/angularApp/app/shared/components/customfooter/customfooter.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-custom-footer',
5 | templateUrl: './customfooter.component.html'
6 | })
7 |
8 | export class CustomFooterComponent {
9 | currentYear: number = new Date().getFullYear();
10 | }
11 |
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/angularApp/app/shared/components/navigation/navigation.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/angularApp/app/shared/components/navigation/navigation.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-navigation',
5 | templateUrl: 'navigation.component.html'
6 | })
7 |
8 | export class NavigationComponent { }
9 |
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/angularApp/app/shared/shared.module.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { NgModule } from '@angular/core';
3 | import { RouterModule } from '@angular/router';
4 |
5 | import { CustomFooterComponent } from './components/customfooter/customfooter.component';
6 | import { NavigationComponent } from './components/navigation/navigation.component';
7 |
8 | @NgModule({
9 | imports: [
10 | CommonModule,
11 | RouterModule
12 | ],
13 |
14 | declarations: [
15 | NavigationComponent,
16 | CustomFooterComponent
17 | ],
18 |
19 | exports: [
20 | NavigationComponent,
21 | CustomFooterComponent
22 | ]
23 | })
24 |
25 | export class SharedModule { }
26 |
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/angularApp/images/RobertoSimonetti.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/damienbod/AngularWebpackVisualStudio/0fc0571920e94dcb2a6fe232e89e9baaa2bb0817/src/AngularWebpackVisualStudio/angularApp/images/RobertoSimonetti.jpg
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/angularApp/images/damienbod.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/damienbod/AngularWebpackVisualStudio/0fc0571920e94dcb2a6fe232e89e9baaa2bb0817/src/AngularWebpackVisualStudio/angularApp/images/damienbod.jpg
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/angularApp/images/fabianGosebrink.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/damienbod/AngularWebpackVisualStudio/0fc0571920e94dcb2a6fe232e89e9baaa2bb0817/src/AngularWebpackVisualStudio/angularApp/images/fabianGosebrink.jpg
--------------------------------------------------------------------------------
/src/AngularWebpackVisualStudio/angularApp/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
44 |
48 |
45 | No items found
46 |
47 |