management - portal azure

No se pueden encontrar node_modules después del despliegue

Question

Este título puede ser un poco engañoso, pero por favor ten paciencia conmigo por un tiempo.

Angular2 una simple aplicación Angular2 en Visual Studio 2015 y ahora la published it on Azure .

Tener node_modules en el entorno de desarrollo fue perfecto, pero después de desplegarlo muestra un mensaje de error diciendo que no puede encontrar node_modules.

Así es como me refiero en mi entorno de desarrollo en index.html -

<!-- Polyfill(s) for older browsers -->
    <script src="/node_modules/core-js/client/shim.min.js"></script>
    <script src="/node_modules/zone.js/dist/zone.js"></script>
    <script src="/node_modules/reflect-metadata/Reflect.js"></script>
    <script src="/node_modules/systemjs/dist/system.src.js"></script>
    <script src="/systemjs.config.js"></script>

También se menciona en system.config.js -

/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {

// map tells the System loader where to look for things
var map = {
''app'':                        ''/app'', // ''dist'',

''@angular'':                   ''/node_modules/@angular'',
''angular2-in-memory-web-api'': ''/node_modules/angular2-in-memory-web-api'',
''rxjs'':                       ''/node_modules/rxjs''
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
''app'':                        { main: ''main.js'',  defaultExtension: ''js'' },
''rxjs'':                       { defaultExtension: ''js'' },
''angular2-in-memory-web-api'': { main: ''index.js'', defaultExtension: ''js'' },
};

var ngPackageNames = [
''common'',
''compiler'',
''core'',
''forms'',
''http'',
''platform-browser'',
''platform-browser-dynamic'',
''router'',
''router-deprecated'',
''upgrade'',
];

// Individual files (~300 requests):
function packIndex(pkgName) {
packages[''@angular/''+pkgName] = { main: ''index.js'', defaultExtension: ''js'' };
}

// Bundled (~40 requests):
function packUmd(pkgName) {
packages[''@angular/''+pkgName] = { main: ''/bundles/'' + pkgName + ''.umd.js'', defaultExtension: ''js'' };
}

// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);

// No umd for router yet
packages[''@angular/router''] = { main: ''index.js'', defaultExtension: ''js'' };

var config = {
map: map,
packages: packages
};

System.config(config);

})(this);

El error tiene sentido ya que tengo un archivo .gitignore que no permite que los node_modules se desplieguen en el servidor.

¿Puede alguien ayudarme en cómo puedo ejecutarlo después de la implementación y qué cambio se puede hacer con las referencias anteriores para que funcione?

Answer 1

node_modules implementar node_modules como parte de su paquete o hacer que un script ejecute npm install para que pueda obtener los paquetes de su package.json . package.json

Para obtener los paquetes en su archivo package.json , haga la npm install --save package-you-want-to-install

Luego, puede hacer que su script de inicio se instale desde el paquete json probando el script en este enlace https://github.com/woloski/nodeonazure-blog/blob/master/articles/startup-task-to-run-npm-in -azure.markdown

Answer 2

No he usado SystemJS, pero tu recompensa me ha animado a intentar responder de todos modos, ya que parece que todavía necesitas una respuesta. :)

Después de echar un vistazo a algunos documentos de SystemJS, parece que su index.html debe ser diferente para el uso de desarrollo vs producción. Esto es lo que muestran los documentos para el desarrollo :

<script src="systemjs/dist/system.js"></script>
<script>
  SystemJS.import(''/js/main.js'');
</script>

Y esto es lo que muestran para la producción (observe que la primera línea tiene una ruta src diferente):

<script src="systemjs/dist/system-production.js"></script>
<script>
  SystemJS.import(''/js/main.js'');
</script>

Más importante aún, tenga en cuenta que node_modules no se referencia en ningún caso, ni debería serlo. Si tiene su código y configuración configurados correctamente, SystemJS (al igual que otras herramientas de compilación) empaquetará todo lo que necesita sin ninguna etiqueta <script> adicional. En su lugar, debe importar sus cuñas (y similares) desde su código en algún lugar. Por ejemplo, en su guía Webpack (Webpack es otra herramienta de compilación que desempeña un papel similar a SystemJS), el equipo Angular muestra un archivo polyfills.ts que importa sus cuñas, luego incluyen el archivo polyfills en la compilación dentro de su configuración de paquete web .

Lamento no poder ofrecer consejos más específicos sobre SystemJS en particular, pero espero que esta respuesta sea suficiente para apuntarlo en la dirección correcta.

Answer 3

Una cosa que podría hacer es instalar los paquetes necesarios en el servidor de Azure a través del panel de Kudu.

1. Vaya a https://yoursitename.scm.azurewebsites.net
2. Luego, consola de depuración -> CMD
3. Ir al directorio home / site / wwwroot
4. Escriba npm install

Esto instalará los paquetes necesarios para que la aplicación Angular 2 se ejecute en el servidor de Azure.

Answer 4

npm instala tus deps en prod env env ..

npm i --production

Answer 5

No use system.config.js

Necesitas agruparlo primero. No cargue node_modules en Azure. Para agrupar, consulte el siguiente enlace.

Cómo agrupar una aplicación angular para producción

Una vez que agrupe, la carpeta dist se creará. Puede cargar la carpeta dist en Azure.