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

• 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

4 Answers 4

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