javascript - proyecto - instalar angular 5

Ejecutar una aplicación angular 2 construida localmente en Chrome usando angular-cli sin un servidor de nodo

Question

Haré que mi pregunta Angular 2 sea muy precisa.

1. Estoy usando:

Angular 2, angular-cli: 1.0.0-beta.15, (construcción de webpack) nodo: 6.4.0, os: linux x64

2. Lo que quiero lograr:

Quiero compilar mi proyecto de manera que después de la compilación (ng build project-name) obtengo archivos estáticos de mi aplicación Angular 2, que puedo ejecutar directamente desde Chrome sin usar ng serve o el servidor de nodo. Solo quiero hacer doble clic en index.html y ejecutar la aplicación localmente.

3. Mientras tanto, lo que obtengo en la salida de la consola del navegador Chrome cuando hago doble clic en el index.html generado es:

file: ///inline.js Fallo al cargar el recurso: net :: ERR_FILE_NOT_FOUND file: ///styles.b52d2076048963e7cbfd.bundle.js Fallo al cargar el recurso: net :: ERR_FILE_NOT_FOUND file: ///main.c45b45ccccccccccccccccccccpcpccpccpccpccpcpccpccpcpcpcpcpccpccpcpcpcpcpcpcpcpcpcpcpcpcpcpcpcpcpcpcpcpcpcpcpcpcpcpcpccpcppccppccpccpccpccpccccccpccccc <br> <br> <br> <br>por <br> <br> Costa Rica: Casco / arqueado. Error al cargar el recurso: net :: ERR_FILE_NOT_FOUND file: ///favicon.ico Error al cargar el recurso: net :: ERR_FILE_NOT_FOUND

4. Según entiendo esto está relacionado con los caminos. La aplicación incorporada y agrupada no puede encontrar las rutas correctas. Así que mi pregunta es dónde y cómo debo cambiar las rutas en mi aplicación o en cualquier archivo de configuración de compilación para que mi aplicación funcione como me gustaría que funcionara de la manera que he descrito en el punto número 2.

5. Gracias de antemano por una respuesta directa y completa sobre ese tema, porque otros temas no explican el alcance completo de ese tema.

Answer 1

Debe servir la carpeta /dist utilizando un servidor HTTP. No puede evitar esto porque cargar archivos localmente no permite la ejecución de código por razones de seguridad.

El servidor no tiene que ser algo pesado como Express o incluso uno minimalista altamente destacado como HapiJS. El servidor http incorporado de Node funcionará bien. Si ya tiene configurados Apache, nginx o IIS, también puede usarlos para servir su aplicación.

EDIT: Hice una búsqueda moral y decidí ofrecer una solución que personalmente no usaría, pero puede ser una buena opción para usted: Servidor web para Chrome Extension

Answer 2

Eliminar <base href="/"> de index.html funcionó para mí.

Answer 3

Puedes lograr algo como esto usando nw.js por ejemplo (o electrón). Yo mismo creé una aplicación que usa angular 2 localmente con nw.js y funciona como un encanto;)

nwjs.io

Answer 4

Recomiendo usar Expressjs, ¿por qué servidores? Xampp, laragon, etc ... las rutas no funcionan bien, lo hice así: creé una nueva carpeta con el servidor de nombres, dentro de un archivo index.js copiado, la ruta sería "src /assets/server/index.js ",

Contenido de index.js

var express = require(''express''),
path = require(''path''),
fs = require(''fs'');
var app = express();
var staticRoot = __dirname + ''/../../'';
app.set(''port'', (process.env.PORT || 80));
app.use(express.static(staticRoot));
app.use(function(req, res, next){
var accept = req.accepts(''html'', ''json'', ''xml'');
if(accept !== ''html''){
return next();
}
var ext = path.extname(req.path);
if (ext !== ''''){
return next();
}
fs.createReadStream(staticRoot + ''index.html'').pipe(res);
});
app.listen(app.get(''port''), function() {
console.log(''app running on port'', app.get(''port''));
});

En package.json, dentro de la raíz del proyecto.

{
"dependencies": {
"express": "4.13.4"
}
}

más tarde, ejecute el comando de consola ng build prod y ejecute

nodo dist / asset / server /

este comando ejecuta un servidor Express, que indica la dirección de configuración de archivo de nuestro servidor, en esta ocasión, el archivo index.js preconfigurado

ps: perdon por mi mal ingles, estoy aprendiendo

Answer 5

Si está utilizando Angular-Cli, no es necesario que modifique index.html después de generar el proyecto. Según el documento github de Angular-CLi https://github.com/angular/angular-cli#base-tag-handling-in-indexhtml simplemente puede modificar el argumento mientras está creando el proyecto:

 Example: ng build --prod --base-href .

El uso real es:

ng build --base-href <base>

simplemente puede introducir una URL específica en lugar de una base. En este ejemplo utilizamos. (punto) como argumento

Answer 6

Todo lo que necesitas es construir tu aplicación usando esta única línea de código:

ng build --prod --base-href ./

Answer 7

Una solución simple: cambia tu base href cuando construyas.

ng build --prod --base-href .

Ahora puede hacer doble clic en el archivo index.html y funcionará.

Aquí hay un ejemplo de este trabajo: https://mattspaulding.github.io/angular-material-starter/

Answer 8

Primer paso:

Ejecuta el comando

ng build

o

ng build -prod (then it will compact all files for production version)

Segundo paso:

Cambio en index.html

<base href="/"> to <base href="./">

Tercer paso:

Coloque todos los archivos en el servidor (puede ser htdocs en localhost o en cualquier servidor)

Esperemos que funcione.

Answer 9

Solución sin servidor :

Primer paso

Cambio en index.html :

eliminar <base href="/">

Segundo paso:

Cambio en app.module.ts :

import { CommonModule, APP_BASE_HREF, LocationStrategy, HashLocationStrategy} from ''@angular/common'';
@NgModule({
providers: [
{ provide: APP_BASE_HREF, useValue: ''/'' },
{ provide: LocationStrategy, useClass: HashLocationStrategy }
]
})

Tercer paso:

Ejecuta el comando

ng build

o

ng build -prod

Haga dist/index.html clic en dist/index.html para ver el resultado.