javascript - Angular 7 production build does not load styles and js - Stack Overflow

admin管理员组

文章数量:1336089

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.

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.

• javascript
• angular
• production
• angular7

Share Improve this question Follow edited Nov 10, 2018 at 20:42 Gonçalo Peres 13.6k55 gold badges6969 silver badges9494 bronze badges asked Nov 9, 2018 at 22:34 Michal TakáčMichal Takáč 1,05533 gold badges1717 silver badges3838 bronze badges 3

• 2 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 Commented Nov 9, 2018 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 Commented Nov 9, 2018 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 Commented Nov 9, 2018 at 22:55

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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": "./"

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 mand will actually be

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

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.

after pile your project for production --prod the output files after piling 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

本文标签： javascriptAngular 7 production build does not load styles and jsStack Overflow