Skip to content
This repository was archived by the owner on Dec 30, 2020. It is now read-only.

Commit 8041f83

Browse files
author
Caleb Wells
committed
Added documentation to README.md for phase 3.
1 parent 37a8a0a commit 8041f83

File tree

1 file changed

+66
-3
lines changed

1 file changed

+66
-3
lines changed

README.md

Lines changed: 66 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
1-
# Integrating Angular CLI with dotnet in Visual Studio
1+
# Hit The Ground Running
2+
3+
Clone repo.
4+
5+
`npm run setup`
6+
7+
Open solution in Visual Studio, choose either IIS Express or dotnet Kestrel and F5 or Ctrl-F5. Make a change and verify that the browser reloads with the change.
8+
9+
10+
# Phases to integrate Angular CLI with dotnet in Visual Studio
211

312
## Phase 1
413

@@ -22,12 +31,66 @@ Make sure that you follow the instructions in this [article](https://blogs.msdn.
2231

2332
Open a command prompt to your project folder and type in `dotnet add package Microsoft.AspNetCore.StaticFiles`.
2433

25-
In Visual Studio open Startup.cs and remove the app.Run code inside the Configure section. Add `app.UseDefaultFiles(); app.UseStaticFiles();`
34+
In Visual Studio open Startup.cs and remove the app.Run code inside the Configure section. Add
35+
```
36+
app.UseDefaultFiles();
37+
app.UseStaticFiles();
38+
```
2639

2740
Change the outDir in the angular-cli.json from dist to wwwroot.
2841

2942
Now when you build your solution in Visual Studio it will kick off ng serve and open a new browser window pointing to `http://localhost:4200/`.
3043

3144
## Phase 3
3245

33-
Coming up...
46+
In this phase we are going to take over management of webpack and run everything through IIS Express or dotnet run.
47+
48+
Replace npm start script in package.json to original version.
49+
50+
Remove -vs-binding reference at bottom of package.json.
51+
52+
Open a command prompt to your project folder and type in `ng eject`.
53+
54+
Copy webpack.config.js, webpack.config.vendor.js and package.json from this [commit](https://github.com/calebcwells/angular-cli-visualstudio/tree/37a8a0ad31a63d01a399c574f8673c58d8c523f3).
55+
56+
Edit your proj file to include
57+
```
58+
<Target Name="AngularBuild" AfterTargets="Build">
59+
<Exec Command="webpack" />
60+
</Target>
61+
```
62+
63+
In a command prompt in your project folder and type in `dotnet add package Microsoft.AspNetCore.SpaServices`.
64+
65+
In Startup.cs add
66+
```
67+
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
68+
{
69+
HotModuleReplacement = true
70+
});
71+
```
72+
73+
Open main.ts file and replace
74+
```
75+
import { environment } from './environments/environment';
76+
77+
if (environment.production) {
78+
enableProdMode();
79+
}
80+
```
81+
with
82+
```
83+
if (module['hot']) {
84+
module['hot'].accept();
85+
} else {
86+
enableProdMode();
87+
}
88+
```
89+
90+
Add references to vendor.css and vendor.js in index.html
91+
92+
Open your project properties and under Debug make sure Environment Variables has `ASPNETCORE_ENVIRONMENT Development` as a name:value pair.
93+
94+
In a command prompt in your project folder and type in `npm run buildFull`.
95+
96+
You should now be able to run the solution in IIS Express or dotnet run with F5 or Ctrl-F5 with HMR.

0 commit comments

Comments
 (0)