Not sure if this can work. Created new angular-cli project, run ng serve and opened browser. It worked.
Run ng build --prod, created dist folder with index.html and number of js bundles.
I then opened index.html in browser. Hangs waiting for javascript (so I just see "loading ...").
Should this work? And if not, could someone explain why?
You should not just open this file. Web server is what you need for production usage.
If you want to serve build version of application using built in server, you can use ng serve --prod command.
After build Angular with ng build, from the current directory we use http-server ./dist. http-server is module run server nodeJS.
Reference: https://www.npmjs.com/package/http-server
ng build <br>
http-server ./dist
http/web server is a software that implements http protocol and its primary goal is provide static html page.
when you perform ng serve -o it brings server up with sole purpose is when application hits localhost (ex. http://localhost:4200/) provide files main.js, polyfills.js, runtime.js and other files such as favicon.ico or stylesheet, after that browser is smart enough read this files and render application
now when you run ng build --prod=true it creates dist folder with all required dependencies
and if you open index.html it will not show you content like regular HTML page(static web app) because generated index.html has src considering all dependencies served by server
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.ec2944dd8b20ec099bf3.js"></script>
<script type="text/javascript" src="polyfills.e6fbd82b34ccb0c8609f.js"></script>
<script type="text/javascript" src="main.de97b389e57e8b1c5843.js"></script>
</body>
Below information is just for understanding purpose its strictly not recommended to do this changes in production
If you want to bring up app just clicking index.html like static web page comes up you need to update these path
ex. create basic project with
ng new my-app
ng build --prod=true
dist Location : D:\angular\dist\my-app so index.html will be in D:\angular\dist\my-app\index.html.
Update index.html as below
<body>
<app-root></app-root>
<script type="text/javascript" src="angular/dist/my-app/runtime.ec2944dd8b20ec099bf3.js"></script>
<script type="text/javascript" src="angular/dist/my-app/polyfills.e6fbd82b34ccb0c8609f.js"></script>
<script type="text/javascript" src="angular/dist/my-app/main.de97b389e57e8b1c5843.js"></script>
And after that reload you web page.
