Question

这个标题可能有点误导，但请耐心等待一段时间。

我在visual studio 2015上制作了一个简单的Angular2应用，现在我有published it on Azure。

在开发环境中使用node_modules是完美的，但在部署之后显示错误，说找不到node_modules。

以下是我在 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>

它也在 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);

错误是有道理的，因为我有一个.gitignore文件，它不允许node_modules部署到服务器。

有人可以协助我在部署后如何运行它以及可以对上述参考进行哪些更改以使其正常工作。

Answer 1

我没有使用过SystemJS，但你的赏金诱使我尝试回答，因为看起来你仍然需要答案。：）

在浏览了一些SystemJS文档之后，看起来您的index.html需要与开发与生产使用不同。这就是文档显示的development：

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

这是他们为production显示的内容（请注意第一行有不同的src路径）：

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

更重要的是，请注意在任何一种情况下node_modules 不都会被引用，也不应该引用。如果您正确设置了代码和配置，SystemJS（与其他构建工具一样）将打包您需要的所有内容，而无需任何其他<script>标记。相反，您应该从代码中的某个位置导入垫片（和类似的）。例如，在他们的Webpack指南（Webpack是另一个填充SystemJS类似角色的构建工具）中，Angular团队显示了一个导入其填充程序的polyfills.ts文件，然后它们将polyfills文件包含在他们{{{ 3}}

对不起，我不能特别提供有关SystemJS的更具体的建议，但希望这个答案足以指出你正确的方向。

Answer 2

您必须将node_modules部署为程序包的一部分，或者让脚本运行npm install，以便从package.json

获取程序包

要获取package.json文件中的包，请执行npm install --save package-you-want-to-install

然后，您可以通过尝试此链接https://github.com/woloski/nodeonazure-blog/blob/master/articles/startup-task-to-run-npm-in-azure.markdown

上的脚本从包json安装启动脚本

Answer 3

您可以做的一件事是通过Kudu仪表板安装Azure服务器上所需的软件包。

转到https://yoursitename.scm.azurewebsites.net
然后调试控制台 - ＆gt; CMD
转到主页\ site \ wwwroot目录
键入npm install

这将安装Angular 2应用程序所需的软件包以在Azure服务器上运行。

Answer 4

不要使用system.config.js

您需要先捆绑它。不要在Azure中上传node_modules。要捆绑参考以下链接。

How to bundle an Angular app for production

捆绑dist文件夹后会创建。您可以在Azure中上传dist文件夹。

Answer 5

npm在prod env上安装你的deps ..

npm i --production

部署后找不到node_modules

5 个答案: