navigationend - Angular 2/Angular 4: ¿Cómo puedo acceder al archivo desde la ubicación del sistema local?

router events angular 6

Question

Tengo un archivo JSON en la siguiente ubicación en mi sistema

/etc/project/system.json

Estoy tratando de acceder a este archivo usando la ruta de mi sistema pero no funciona. Sin embargo, está funcionando bien si pongo este archivo dentro de src en mi aplicación.

La ruta del archivo JSON es "/etc/project/system.json" y la ruta de mi aplicación es "/ var / www / DemoProject"

Entonces, ¿cómo puedo acceder al archivo desde mi sistema local.

Answer 1

Como han dicho otros, su problema solo puede ser resuelto por el servidor que está utilizando. Lo que quieres es generalmente llamado, servicio de archivos estáticos. Puede encontrar instrucciones específicas para el servicio de archivos estáticos para su servidor en Internet.

Sin embargo, es probable que esté creando su aplicación Angular en algún momento. Incluso podría estar usando Webpack.

Si está utilizando Angular-cli para construir su aplicación, puede usar la siguiente configuración para copiar la carpeta del sistema bajo sus activos. Si usa Webpack, esto también recuperará dinámicamente el archivo cada vez que lo solicite, sin copiarlo. Lea acerca de webpack here . En su archivo .angular-cli.json :

"assets": [
  "assets",            // These two are generally used in Angular projects
  "favicon.ico",       // ^^^^^^^^^
  {
    "glob": "system.json",
    "input": "/etc/project/",
    "output": "./<outputfolder>"
  }
]

Si hace esto, puede acceder al archivo con la url http://yourdomain/<outputfolder>/system.json

Si está utilizando este archivo json en su código mecanografiado, también puede configurar la configuración de mapeo de la ruta tipográfica para encontrar este archivo. Webpack y Angular-cli también son compatibles con esta configuración. En su archivo tsconfig.json :

"paths": {
  "system.json": [
    "/etc/project/system.json"
  ]
}

A continuación, puede importar el json en mecanografiado como:

import * as data from ''system.json'';

Debe tener una declaración de tipo para este archivo json ya que mecanografiado no puede resolver tipos de archivos json por sí mismo. Puedes leer sobre esto here . En resumen, ponga esto en typings.d.ts en la raíz de su proyecto:

declare module "*.json" {
    [key: string]: any;
}

Puedes leer más sobre la resolución de la ruta mecanografiada here .

Answer 2

JS que se ejecuta en el navegador no puede acceder a los archivos locales, consulte: Acceso a archivos locales con javascript

Debe pedir al usuario que cargue el archivo para tener acceso a él, consulte: ¿ Subir archivo en Angular 2?

Answer 3

Otra opción podría ser usar Electron.

Aquí hay un tutorial: Angular 5 y Electron.

Luego, puedes construir tu aplicación usando angular y usar la API electrónica para acceder a los archivos.

Básicamente, Electron simplemente agrupa su aplicación web en un entorno de nodo autónomo que puede ejecutar desde linux / mac-os o windows como una aplicación, con acceso al sistema a través de una API como una aplicación normal.

Answer 4

Use $ http get request para obtener los datos del archivo json.

$http.get(''system.json'').then(function(response){
    $scope.data = response;
})