将现有的asp.net core 2.1角度应用程序转换为Angular 6和Angular CLI 6

Question

I created an asp.net core 2.1 angular web app which is come with 5.2 Angular. I would like to upgrade to angular 6 and Angular CLI 6. These are the steps I did:

1. Create project in VS2017 .net 2.1 Angular
2. npm install
3. ng update --all
4. ng update @angular/cli
5. create angular.json
6. added "@angular-devkit/build-angular": "~0.6.0", to dev dependencies
7. npm install
8. ng build --prod (this threw error say "Unknown option: --extractCss"
9. removed --extractCss from package.json
10. Run application from VS2017. Application loads up but css is not loading
11. when I try to deploy to azure web app application does not load.

Not sure what other steps I am missing

Sample project link https://github.com/tkumark/WebApplication3

Answer 1

Update your angular.json to force extractCss on build and don't miss to add bootstrap as style dependency:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "your-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "extractCss": true,
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],

Check the configuration section as well:

"configurations": {
            "production": {
...
              "extractCss": true
            "debug": {
...

The angular.json schema can be found here : https://github.com/angular/angular-cli/wiki/angular-workspace

You also need to check if the SPA static files root path match the out path of your angular.json :

Startup.cs

// In production, the Angular files will be served from this directory
services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/dist";
});

angular.json

"outputPath": "dist",