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.

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 — user184994, Nov 09 '18 at 22:36
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 — Pankaj Parkar, Nov 09 '18 at 22:36
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. — random_user_name, Nov 09 '18 at 22:55

Emeric · Answer 1 · 2019-10-10T15:03:07.043

3

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

edited Oct 10 '19 at 15:03

answered Oct 10 '19 at 13:03

Emeric

6,315
2
41
54

score 2 · Answer 2 · edited Nov 10 '18 at 09:25

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.

edited Nov 10 '18 at 09:25

PeS

3,757
3
40
51

answered Nov 09 '18 at 22:51

Maxim Kuzmin

2,574
19
24

That's it? Can you offer any additional insight, instruction, usage, etc? This is essentially a _link only_ answer, which is [discouraged on StackOverflow](https://meta.stackexchange.com/q/8231/178653) – random_user_name Nov 09 '18 at 22:56

score 2 · Accepted Answer · answered Nov 10 '18 at 06:49

2

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

answered Nov 10 '18 at 06:49

Michal Takáč

1,005
3
17
37

But is it correct to make this adjustment or it should work with the default base path? – esseara Feb 27 '20 at 22:41

score 0 · Answer 4 · answered Nov 09 '18 at 23:01

0

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

answered Nov 09 '18 at 23:01

Amir Fawzy

468
5
12

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) – Michal Takáč Nov 10 '18 at 06:32

Angular 7 production build does not load styles and js

4 Answers4

Linked