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.

Moten

It's because the paths to the files are looking relative to the root, which in this case is at the root of your C: drive – Nutmeg

Because you're loading it from file system, you won't get resources loaded with file:// protocol, deploy your application on real server to see it in action – Hypanthium

For crying out loud: Screenshots of code and errors suck. Google can't index them, I can't copy / paste them, please - put the actual text into your question. – Datura

Answer 1

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 ./

Moten

But is it correct to make this adjustment or it should work with the default base path? – Apex

Answer 2

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": "./"

Deva

Answer 3

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.

Landon

That's it? Can you offer any additional insight, instruction, usage, etc? This is essentially a link only answer, which is discouraged on StackOverflow – Datura

Answer 4

after compile your project for production --prod the output files after compiling you can't just open it from you browser you have to use local server on your machine to do so you can use XAMPP

Bret

My goal was to use aws s3 to serve it as a static page. So you are saying that is not possible to do as well? ( same issue as when serving the application locally) – Ledet