Angular CLI in .NET Core and the modification of index.html

Question

I 've created an Angular project in VS 2017 without using Angular template provided by VS. Instead, I used the Angular CLI stuff by applying:

dotnet new angular

(have a look at https://learn.microsoft.com/en-us/aspnet/core/spa/angular?tabs=netcore-cli&view=aspnetcore-2.1).

So far, so good. However, I have great difficulties in understanding how the following index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>angular_cli</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

created by dotnet new angular is being converted to that one when the project is run and getting the first HTTP response:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>angular_cli</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="styles.bundle.css" rel="stylesheet"/>
</head>
<body>
  <app-root>Loading...</app-root>
  <script type="text/javascript" src="inline.bundle.js"></script>
  <script type="text/javascript" src="polyfills.bundle.js"></script>
  <script type="text/javascript" src="vendor.bundle.js"></script>
  <script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>

How the following lines are added?

  <link href="styles.bundle.css" rel="stylesheet"/>      
  <script type="text/javascript" src="inline.bundle.js"></script>
  <script type="text/javascript" src="polyfills.bundle.js"></script>
  <script type="text/javascript" src="vendor.bundle.js"></script>
  <script type="text/javascript" src="main.bundle.js"></script>

Tomasz Kula · Accepted Answer · 2018-04-16 09:21:47Z

2

Under the hood angular-cli uses Webpack to bundle the js/css files. The html is edited as the part of the build process.

If you want to inspect what exactly is being done to your scripts/html/code/assets you can always eject the webpack.config.js, by running ng eject.

Remember to commit your changes before running the eject command, so you can easily revert it.

answered Apr 16, 2018 at 9:21

Tomasz Kula

16.9k3 gold badges72 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Unknown developer Over a year ago

So, is it webpack that modifies index.html itself? Are you sure? Moreover, why to revert after running ng eject?

Tomasz Kula Over a year ago

Yes, it is webpack. @angular-cli provides an abstraction over the webpack configuration. You should not edit the webpack.config.js without a good reason. But you can take a look at what is being done by ejecting, and after you are done, you can revert the eject.

Unknown developer Over a year ago

Why reverting the eject? What changes are introduced by that and why not keeping them?

Niladri Over a year ago

ng eject is no more available from version 6 onwards

Collectives™ on Stack Overflow

Angular CLI in .NET Core and the modification of index.html

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related