Angular 7 production build does not load styles and js

Question

I have a small project written in Angular 7 and im trying to build the production version out of it.

When i run

ng build --prod --aot --service-worker

The build will run without errors as seen on screenshot.

On the other hand, when im trying to load the app in the browser, it will throw errors in console and will not load at all.

Any ideas what is causing this? The files are in the same directory as the index.html and they do exist.

Answer 1

As said you can use ng build --prod --base-href ./ .

Another option is to configure your angular.json file.

You have to add the following line under angular.json > projects > yourProject > architect > build > configurations > production :

"baseHref": "./"

Answer 2

Use http-server for running your built code locally

npm install http-server
http-server --help
http-server -p 8080 -c-1 dist/<project-name>

-p specifies port, -c-1 disables caching and the last parameter is what directory should be served.

If you are playing with service workers and want to test them, this is good source of info .

Answer 3

So, I figured out that if I want to serve this files statically without using some sort of server in front of the page, I have to set build parameter --base-href ./ and also use relative paths for the assets like images.

So the build command will actually be

ng build --prod --aot --service-worker --base-href ./

Answer 4

编译--prod项目以进行production后-编译后production输出文件，您不仅可以从浏览器打开它，还必须使用计算机上的local server才能使用XAMPP