Angular-cli: Angular 2 CLI ng build inline.js,styles.bundle.js and main.bundle.js 404 error

[prasadrajacse]

Please provide us with the following information:

OS?

Mac OSX (El Capitan)

Versions.

angular-cli: 1.0.0-beta.17
node: 4.6.1
os: darwin x64

Repro steps.

Created a sample application using angular-cli. Ran ng build command to build the app for development.Tried to access index.html under dist folder from the browser.The following errors are seen in console

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:63342/inline.js

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:63342/inline.js

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:63342/styles.bundle.js

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:63342/main.bundle.js

index.html and above files are under same root.

Please let me know if I am going wrong.

Thanks and Regards,
Durga Prasad Telu.

[manish7singh]

@prasadrajacse You need to paste all the files present in the dist folder directly under the webapps folder where you must have pasted the dist folder currently.

Try this, it will work. :)

[prasadrajacse]

I am having some custom css files referred in index.html file and after build there are missing in the dist folder.

[manish7singh]

There is style.css (master css file) which applies to the whole project. You can add your custom styles to that file.
Alternatively, you can try placing your custom css file to the assets folder and refer the same in your index.html. After build the assets folder is present in the dist folder.
Then the file wont be missing anymore and you won't get the 404 error.

[filipesilva]

index.html is managed by the CLI build system, which means that you shouldn't try to add script or css tags there directly. Instead, you can use the global styles file as shown in https://github.com/angular/angular-cli#global-styles.

Also, when you are trying to debug your app I recommend you use ng serve to serve it. Once you have verified it works with ng serve, you can try to deploy it somewhere else.

If you are deploying to a subfolder within a server, you might need to change the base tag via https://github.com/angular/angular-cli#base-tag-handling-in-indexhtml to match your subfolder path.

[iamsarav]

I am running my app in linux server.I understand, I just have to copy all dist folder files into my project path in the server

• When I did that, it worked fine for couple of hours. but now am getting the above mentioned error. 404 error.
  please correct me If I am wrong.

[Ashishgollamudy]

@iamsarav I am getting the same error please let me know if you have found the solution

[JesusMuller]

I had the same problem,but I fixed it.
If you are using a maven project, you must remeber all static files must be in webapp/resources.
I have my index.html in webapp/ so my base path in index.html is =><base href="./resources/">
to change this path for next builds you must execute ng build --base-href /newpath/
I hope it helps you.

[AlwaysAbhl001]

@JesusMuller could you have a look on it https://stackoverflow.com/questions/44470995/angular-2-cli-how-to-use-dist-folder-files-created-by-angular-cli-ng-build

[pbuhrmann]

I just replaced the base in index.html with this now it works

[freemansj]

@JesusMuller Thanks, that does helpful.

[Sachin124]

Okay Recently I fetched this problem I have very simple solution for solve this Issue , follow these steps:
go to these directories src-> app-> index.html open the index.html and find
<base href="your app name ">change this to <base href="/">

[manojrana94]

i just replace my base tag in index.html like below
<base href="/">

[waqasraza123]

@Sachin124 thanks man, it worked.

[isatterfield]

@Sachin124 thank you! I had been fighting this for 4 hours! Your suggestion fixed it for me.

[bilal-korir]

In my case, I had to comment out <base href="/"> to fix the 404 error.

Note*: I'm using Angular CLI version 1.6.5

[ziaongit]

Follow steps:

1. run ng build (keeping in mins the base url / no sub folder with command ng build)
2. If your porject is in sub folder then then past

Use this .htaccess

<IfModule mod_rewrite.c>
    RewriteEngine on
    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
    # Rewrite everything else to index.html
    # to allow html5 state links
    RewriteRule ^ index.html [L]
</IfModule>

[yarlenvas]

I just go to .angular-cli.json an change
"deployUrl": "/"
by
"deployUrl": "./"

and works perfectly

[clydin]

@yarlenvas Just a quick note that a deploy URL of ./ is the equivalent of not having a deploy URL defined.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}