CODEWITHSUNDEEP
javascriptangularwebpack
Guerrilla
Guerrilla

Reputation: 14876

Angular 2 documentation for using webpack?

I have just started to learn angualar 2 and all tutorials use Systemjs. I created a new project using the angular cli and there is no systemjs.

After googling issue I discovered that the cli is now using webpack. When I run ng serve the app loads correctly locally but what I cannot understand is how it works when there are no javascript files referenced in the index.html.

This is the index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Project</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>

If I try to run that in another server nothing happens as there are no javascript files to do anything. I am guessing webpack must inject them somehow but I can't find any documentation that just gives simple instruction for how to publish/build this so it can run with a server that isn't the ng serve local server.

I guess it's probably too simple to mention but as a complete beginner it is confusing.

Upvotes: 0

Views: 60

Answers (1)

ssougnez
ssougnez

Reputation: 5876

Basically, after all your bundles have been generated by webpack, a plugin inspects an index.html (the one from the "src" folder) and include the JavaScript and CSS files in it.

The plugin responsible of doing so is "html-webpack-plugin": https://github.com/jantimon/html-webpack-plugin

You can also find more information about webpack and angular in here: https://angular.io/docs/ts/latest/guide/webpack.html

Upvotes: 2

Related Questions