azure - Kan inte hitta node_modules efter distribution

Denna titel kan vara lite vilseledande, men vänligen stå ut med mig en stund.

Jag har gjort en enkel Angular2 app i Visual Studio 2015 och nu har jag publicerat den på Azure.

Att ha node_modules i utvecklingsmiljön var perfekt, men efter distributionen visar det ett fel som säger att node_modules inte kan hittas.

Här är hur jag refererar i min utvecklingsmiljö i 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>

Det refereras också i 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);

Felet är begripligt eftersom jag har en .gitignore-fil som inte låter node_modules distribueras till servern.

Kan någon vänligen hjälpa till med hur jag kan köra det efter distribution och vilken förändring som kan göras med ovanstående referenser för att få det att fungera.

Svar #1

Jag har inte använt SystemJS, men din belöning har lockat mig att försöka svara ändå, eftersom det ser ut som att du fortfarande behöver ett svar. :)

Efter att ha bläddrat igenom några SystemJS-dokument ser det ut som att din index.html behöver vara olika för utveckling och produktion. Detta är vad dokumenten visar för utveckling:

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

Och detta är vad de visar för produktion (observera att den första raden har en annan src-väg):

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

Än viktigare, notera att node_modules inte refereras till i något av fallen, och det bör det inte göra. Om du har din kod och konfiguration korrekt inställda, kommer SystemJS (likt andra byggverktyg) att paketera allt du behöver utan några ytterligare <script>-taggar. Istället bör du importera dina shims (och liknande) någonstans inom din kod. Till exempel, i deras Webpack-guide (Webpack är ett annat byggverktyg som fyller en liknande roll som SystemJS) visar Angular-teamet en polyfills.ts-fil som importerar deras shims, och sedan inkluderar de polyfills-filen i byggprocessen inom deras webpack-konfiguration.

Jag är ledsen att jag inte kan ge mer specifika råd om SystemJS i synnerhet, men förhoppningsvis räcker detta svar för att peka dig i rätt riktning.

Svar #2

Du måste antingen distribuera node_modules som en del av ditt paket eller ha ett skript som kör npm install åt dig för att hämta paketen från din package.json

För att få paketen i din package.json-fil, kör npm install --save package-you-want-to-install

Då kan du låta ditt startskript installera från package json genom att prova skriptet på denna länk https://github.com/woloski/nodeonazure-blog/blob/master/articles/startup-task-to-run-npm-in-azure.markdown

Relaterade artiklar