-1

Context
For a client, I wrap 3D animations in interactive HTML/CSS/JS mini-apps. As their demands are getting more complex, i would like to use Angular 6 as framework to replace my from-scratch base. Also, they need it to work without Internet access.

Problem
The animations must be open-able locally without an http server. No apache, or anything. My client need it simple: They can at best unzip the project and open the index.html file but installing anything would be too much to ask.

So i ran some tests, and built a "real" angular 6 app i previously designed, which uses internationalization. I figured that opening the index.html file outside of a http server breaks the app with the following error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///assets/i18n/fr.json. (Reason: CORS request not http).[Learn More]

This is because, without an server, CORS requests fail. My contents are not loaded.

References
This post seemed promising but did not help.

Also i thought there was a way to replace file:///assets/i18n/fr.json with something like ./assets/i18n/fr.json but i found no explanation in the docs (I might have missed it but it's technical for a backend-dev like me).

So i am trying to search for other workarounds. Any clues?

Loïc Pennamen
  • 197
  • 1
  • 17
  • A quick search wouldn't have been dangerous https://stackoverflow.com/a/54143163/4544288 – Massimiliano Sartoretto Mar 07 '19 at 13:01
  • You can serve your production build in place using a npm package - [http-server](https://www.npmjs.com/package/http-server) – Tushar Walzade Mar 07 '19 at 13:05
  • @MassimilianoSartoretto indeed, my many searches did not hurt me. I wonder why this post did not pop up in Google neither SO. https://stackoverflow.com/search?q=angular+without+server I will now look into it. – Loïc Pennamen Mar 07 '19 at 13:14
  • Don't worry, sometimes you just need better search engines. Hope the link solution works for you. – Massimiliano Sartoretto Mar 07 '19 at 13:16
  • Unfortunately, http-server would require to be installed on every machine where the app would be lanched - i think. And the post https://stackoverflow.com/questions/54143002/run-angular-7-project-locally-on-file-without-server/54143163#54143163 does not solve my issue; the translation file is still fetched via `file:///assets/i18n/fr.json`. **So** i guess this is a problem with ngx-translate module. – Loïc Pennamen Mar 07 '19 at 13:29

2 Answers2

0

I think not. Angular needs a server to run upon. But you can deploy on heroku and present this to client in realtime. Otherwise they have to install packages if the client want to run on his/her local machine.

Muhammad Abdullah Shafiq
  • 854
  • 6
  • 16
-1

Solved it. So the real issue was with ngx-translate.

This thread answers my question, but my app was still bugged by the fact that ngx-translate fetched translations files with an absolute file\\ URL.

So, i had to use ngx-translate with an HTTP loader as explained here but most importantly change the prefix of the files in production as such (in app.module.ts):

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

The . before /assets is the key. That allows locally-openable, translatable, Angular6 apps without http server.

Loïc Pennamen
  • 197
  • 1
  • 17