Upgraded AngularJS to 6.0

[kichalla]

No description provided.

[kichalla]

With "progress: true"

[naveedahmed1]

Once done please also share pre release download link.

[naveedahmed1]

If SSR is broken it probably would be fixed when the commits mentioned in this issue are released angular/angular-cli#8616

[SteveSandersonMS]

For our own future reference, here are the steps we went through when upgrading this template. The same steps should be applicable to future Angular version upgrades.

Upgrade steps

• Run build on templating repo to generate the .csproj files
• cd to content\Angular-CSharp
• dotnet build
• set ASPNETCORE_Environment to Development
• dotnet run

Install latest Angular CLI

• npm install -g @angular/cli
• rm -rf ClientApp
• ng new ClientApp

Compare the old and new versions in your chosen Git tool
Re-apply all the ASP.NET Core-specific modifications from the previous version to the new version

• Project name should be "Company.WebApplication1", not "ClientApp" - everywhere
• In angular.json
  • remove "favicon.ico" everywhere
  • Add "node_modules/bootstrap/dist/css/bootstrap.min.css" to the array of styles
  • Add "progress": true under architect/build/options
  • Add "extractCss": true under architect/build/options
  • Set outputpath back just to "dist"
• In .gitignore
  • Keep the exclusion for /dist-server
• In README.md
  • Replace "ClientApp" with "Company.WebApplication1"
• Preserve our content in app.e2e-spec.ts and app.po.ts
• In package.json
  • Replace "client-app" with "Company.WebApplication1"
  • Add aspnet-prerendering and bootstrap packages like before
• Restore our versions of the content files
  • src/app/app.component.css
  • src/app/app.component.ts
  • src/app/app.component.spec.ts
  • delete src/app/app.component.spec.ts
  • app.module.ts
  • bring back all the counter, home, fetch-data, nav-meny files
  • delete their favicon.ico
  • index.html
  • main.ts (e.g., BASE_URL providers)

Try it out

• cd ClientApp
• npm install
• cd ..
• dotnet run

Check out tests

• cd ClientApp
• ng lint
• ng test
• ng e2e
  Should all pass without warnings or errors

Try publishing

• cd back to the main project root directory (AngularSpa)
• dotnet publish -c Release
• cd to the publish output folder
• set ASPNETCORE_Environment to Production
• dotnet Company.WebApplication1.dll

[naveedahmed1]

@SteveSandersonMS Angular and CLI version 6.0.1 has been released which finally fixes long awaited

angular/angular-cli#8616

Please release the new template with version 6.0.1

[dballemo]

I followed the steps indicated by @SteveSandersonMS and using spa.UseProxyToSpaDevelopmentServer ("http: // localhost: 4200") it seems that Hot Module Replacement (HMR) does not work. Changes in html or ts have no effect.

• Visual Studio 2017 (net core) and Visual studio code (Clientapp - npm start)
• dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0
• dotnet new angular --target-framework-override net461 -o myApp
• Apply change Angular 6.0.0

No problems in the template by default

[naveedahmed1]

@kichalla I think below files require update:

src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/package-lock.json
src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/package.json

[wesleygrimes]

@SteveSandersonMS Thanks for the instructions. This works perfectly!

[naveedahmed1]

@wesleygrimes I downloaded templating repo but I am receiving below error when I run Build. Any help would be highly appreciated.

C:\Users\User\.dotnet\buildtools\korebuild\2.2.0-preview1-17051\modules\KoreBuild.Tasks\module.targets(47,5): error : dotnet-install failed on ASP.NET Core Runtime (x64) 2.2.0-preview1-34184. [C:\Users\User\.dotnet\buildtools\korebuild\2.2.0-preview1-17051\KoreBuild.proj]

Build FAILED.

C:\Users\User\.dotnet\buildtools\korebuild\2.2.0-preview1-17051\modules\KoreBuild.Tasks\module.targets(47,5): error : dotnet-install failed on ASP.NET Core Runtime (x64) 2.2.0-preview1-34184. [C:\Users\User\.dotnet\buildtools\korebuild\2.2.0-preview1-17051\KoreBuild.proj]
    0 Warning(s)
    1 Error(s)

Time Elapsed 00:00:01.48
dotnet.exe failed with exit code: 1
At C:\Users\User\.dotnet\buildtools\korebuild\2.2.0-preview1-17051\scripts\common.psm1:11 char:9
+         throw "$cmdName failed with exit code: $exitCode"
+         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : OperationStopped: (dotnet.exe failed with exit code: 1:String) [], RuntimeException
    + FullyQualifiedErrorId : dotnet.exe failed with exit code: 1

[LockTar]

Any idea when this will be pushed so we can use it?

[dballemo]

I have made new tests. If in the angular.json file change architect\build\options
"outputPath": "dist/MyApp" to "outputPath": "dist"
fails hot compilation ([WDS] App updated. Recompiling.)

[speige]

Has anyone had success with SSR while using this pull request? In my case I had an issue until I fixed a bug in https://github.com/aspnet/JavaScriptServices/blob/dev/src/Microsoft.AspNetCore.SpaServices.Extensions/Util/EventedStreamReader.cs

I created an issue aspnet/JavaScriptServices#1619 with pull request aspnet/JavaScriptServices#1620 but the issue was closed without the PR being accepted. Not sure if it was closed by mistake thinking it was a duplicate issue in the wrong repo or if no one else is having this issue with SSR. Just wanted to double-check. Thanks.

[j-nord]

Is there a way to see a really working example of Angular-Cli 1 the best 6.0 that "really" works with net core. Not only in the development but also a version that you can actually publish on the IIS and then "really" straight away synonymous server side without that you have to search for days for any errors?

[tomgruszowski]

@j-nord have you ever looked at https://github.com/MarkPieszak/aspnetcore-angular2-universal, it looks very tempting and is constantly updated. It looks like he's in the process of updating to ngCli but there may be some complications TrilonIO/aspnetcore-angular-universal#539

For the time being, I'd like to avoid direct webpack involvement if I can especially when it's hooked into server code, there are enough moving pieces with that setup that can go wrong.

I really wish the aspnet team would prioritize high quality templates, 2.1 is feature complete enough (for me at least :).

[j-nord]

one thing i had forgot: It should also work with Angular lazy loading module without errors.

@tomgruszowski: thanks for the link. We experimented so much and nothing really worked. The only target is to get his angular-cli running properly with asp.net core, otherwise you can also search all webpack errors.

[kichalla]

Closing this PR in favor of #581