Update AngularJS to 6.0

[ryanbrandenburg]

This is essentially just a rebase of #515, but I didn't want to mess up the history of @kichalla's branch in case there was a problem with the rebase.

[ryanbrandenburg]

🆙📅 the VSTS Windows failure is almost certainly a problem on their end, so I think this is ready for review.

[kichalla]

Please get a sign off from @SteveSandersonMS too and also there are some comments (new & old) going on in my original PR. Please check to see if they have some information that we need to handle.

[SteveSandersonMS]

This looks great!

The only bit I'm unsure about is whether there's a sane path to enabling server-side rendering (SSR) on this new base. I know @kichalla was investigating SSR but am not sure how close he got to making it work.

Ultimately we need to update the docs in https://docs.microsoft.com/en-us/aspnet/core/spa/angular about SSR. In the worst case we could remove the whole section about SSR and just say it's not something we have any recommendations about how to do. But it would be better if there was a known set of steps to enable SSR that we could document.

[naveedahmed1]

@SteveSandersonMS I think there should be an option to enabled SSR:

What we can do is add the min required configuration for ssr in angular.json, package.json file and .csproject file with switch to enable ssr (like we have for old template).

Required Changes in angular.json

What we can do is either add server under architecture array:

"server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist-server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "optimization": false,
              "outputHashing": "media",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "bundleDependencies": "all",

              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        }

Or add a new project for ssr in the projects array:

"ssr": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist-server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json",
            "progress": true
          },
          "configurations": {
            "production": {
              "optimization": false,
              "outputHashing": "media",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "bundleDependencies": "all"
            }
          }
        }
      }
    }

Required Changes for packages.json

If you choose the option of adding server under architecture array, we can add below to packages.json

ng run MyProject:server:production

If we choose the second option i.e. add a new project for SSR, we can add below to packages.json

ng build --configuration=production --project=ssr

Required Changes in .csproj file

in .csproj file we can add below under PublishRunWebpack node:

<Exec WorkingDirectory="$(SpaRoot)dist-server\" Command="uglifyjs main.js --output main.js" />

With these configurations we wont be required to published node_modules directory. I have tested it in production and it works perfectly.

[naveedahmed1]

One more thing, it would be great if we could add an Error page to this template indicating how to properly return HttpStatus code for the requests such as 404 for not found. SpaPrerenderingExtensions does support returning HttpStatus code. For NodeJs applications, returning HttpStatus code is really simple since it has access to Response object (https://stackoverflow.com/a/44939037/2755616), for .Net Core things are not that simple or at least not very clear.

Ref: https://stackoverflow.com/q/50934948/2755616

[ryanbrandenburg]

I don't think adding new features is really in scope for this issue. Feel free to create a separate issue for that and we'll triage it.

[naveedahmed1]

Oh sorry, done!

[naveedahmed1]

LGTM!

[ryanbrandenburg]

@SteveSandersonMS can I get your re-approval too for just the SSR part?

[SteveSandersonMS]

@ryanbrandenburg If these changes are what's needed to have working SSR, that's really valuable information we can put in the docs, and well done for figuring it out!

However, the design we settled on in 2.0 was not to have SSR on by default. There are various reasons, primarily that the costs significantly outweigh the benefits for most apps. We felt it was a better tradeoff not to have it on by default in the out-of-the-box template, but rather to document the steps for adding that code for devs who really do want it.

So if you agree with sticking with that design, I'd recommend removing the changes from the last two commits that enable it by default (and instead putting that info into a PR on the docs repo). What do you think, @ryanbrandenburg?

[naveedahmed1]

@SteveSandersonMS what if we have these changes in template and:

• Have BuildServerSideRenderer in .csproj file set to false.
• And comment out the ssr code in startup file.

This way, it would be turned off by default. And enabling it would be simple.

[SteveSandersonMS]

It generally works better to have it in the docs rather than the template code, because Angular's SSR APIs have changed a lot from version to version, and we don't want to be coupled to a specific version and have to support all historical versions depending on which specific version of a template you happen to be using.

[naveedahmed1]

Okay makes sense, probably that's because the default app generated by the Angular CLI doesn't have SSR enabled.

Having these steps in documentation would also be valuable. And please also add docs for returning http status codes under ssr section from Angular app.

[ryanbrandenburg]

@SteveSandersonMS the more I poke at this the less I think these are the complete steps to get SSR working, so I don't think it's a good idea to put it in the docs. I only was trying to do it because your first comment sounded to me at the time like you were saying we should really have SSR, but reading it now it sounds more about the docs. I'll clean out the SSR stuff and file an issue to either address or remove SSR from the docs.

[naveedahmed1]

@ryanbrandenburg I would still say that docs should have the section and instructions to enable SSR in the template.

The steps I mentioned above are the only thing required to enable ssr in angular template for asp.net core. I believe you are confusing it with topics related to making your complete angular app work on server. I agree its quite complex but I believe this is beyond the scope of this template, the more the complex app is the more challenging it would be to make it compatible with server. For such issues docs can point developers to official universal guide https://angular.io/guide/universal

If you take a look at official guide https://github.com/angular/angular-cli/wiki/stories-universal-rendering it has instructions for NodeJs (https://github.com/angular/angular-cli/wiki/stories-universal-rendering#step-4-setting-up-an-express-server-to-run-our-universal-bundles) but doesn't contains pointers for other servers such as ASP.Net Core.

Because how different server implementations works depend on the underlying technologies. Angular team doesn't know how asp.net core team implemented SpaPrerenderingExtensions and how asp.net core process response from node instance (JavaScriptServices). Its the .net team that knows this, so developers expect asp.net team to provide some direction.

[ryanbrandenburg]

My wording was a bit unclear there. What I meant was that when I did the steps you listed above it didn't work, and so before putting any suggestions into the doc we need to verify that they are correct. Not that we shouldn't ever but SSR instructions in the docs. Likely it's just missing some "glue" step to connect it all, but that should all be included when we fix the doc.

My poor phrasing choice is compounded by my being relatively new to our templates and JS frameworks, so sorry for any confusion.

[naveedahmed1]

No worries, I think I pointed out the missing portion:

You have below in startup file:
options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.bundle.js";

It should be:
options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.js";

[jcphlux]

So this might be a dumb question but how to I get my hands on this new Template that has Angular 6.

[ryanbrandenburg]

We haven't yet shipped a version of the templates with Angular 6. If you would like to try it out in the mean time you will have to use the (only semi-supported) steps here.

[latchkostov]

@ryanbrandenburg Any estimate on when the templates will be released?

[sdcb]

@latchkostov looks like Angular 6.0 template is already included in dotnet core sdk 3.0 from daily build: https://github.com/dotnet/core/blob/master/daily-builds.md

[maxisam]

just curious, I notice that angular output folder is pointing to dist instead of wwwroot. I guess it doesn't really matter. But any reason for not pointing to wwwroot?

[changhuixu]

@maxisam It's better to not touch angular.json file (unless you know what you are doing). By default, angular.json points output folder to dist/prj_name.
SpaService serves whatever RootPath you set up in ConfigureServices method. You can point it to wwwroot and use UseDefaultFiles() if you really want. However, I think you may want to follow convention, so that future developers can easily understand and update solutions.

[blogcraft]

At this rate they should be working for an Angular 7 template for Net Core 3, this templates are always lagging behind.

[IEvangelist]

Does anyone here have a clean slate "template" repo that has angular 5 or 6, with ASP.NET Core and SSR? If so please post it here as I really need it. I am stuck and spinning my wheels. I cannot get my repo to actually have SSR work, https://github.com/IEvangelist/IEvangelist.PhotoBooth.

[lunar-safari]

Hopefully the new template will drop Bootstrap design all together and just use material.angular.io? It's not a big job to change it over but I suspect it's what most people want?

[naveedahmed1]

@IEvangelist have you tried these steps #581 (comment) ?

[IEvangelist]

@naveedahmed1 this must be a different version template that I started from, but that is not working. Could you create a repo that has this working?

[chrisjmccrum]

@naveedahmed1 this must be a different version template that I started from, but that is not working. Could you create a repo that has this working?

Did you ever get it working - I think I'm having the same issue as you

[blogcraft]

Angular 7 is now live, thankfully there is not much to change if you already have Angular 6 working in your project.