2017-02-06 18 views
12

Tiêu đề này có thể gây hiểu lầm đôi chút nhưng hãy chịu đựng tôi một lúc.Không thể tìm thấy node_modules sau khi triển khai

Tôi đã tạo đơn giản Angular2 ứng dụng trên studio trực quan 2015 và giờ tôi có published it on Azure.

Có node_modules trong môi trường phát triển hoàn hảo nhưng sau khi triển khai nó cho thấy lỗi không thể tìm thấy node_modules.

Sau đây là cách tôi đề cập trong env phát triển của tôi trong 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> 

của nó cũng được gọi trong 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); 

Lỗi có ý nghĩa vì tôi có tệp .gitignore không cho phép các node_modules triển khai đến máy chủ.

Ai đó có thể vui lòng hỗ trợ cách tôi có thể chạy sau khi triển khai và thay đổi nào có thể được thực hiện với các tham chiếu ở trên để làm cho nó hoạt động.

Trả lời

2

Bạn có thể phải triển khai node_modules như một phần của gói của bạn hoặc có một kịch bản chạy npm install cho bạn để có được các gói từ bạn package.json

Để có được gói trong tập tin package.json bạn làm npm install --save package-you-want-to-install

Sau đó, bạn có thể cài đặt tập lệnh khởi động từ gói json bằng cách thử tập lệnh trên liên kết này https://github.com/woloski/nodeonazure-blog/blob/master/articles/startup-task-to-run-npm-in-azure.markdown

+0

Cảm ơn bạn đã liên kết. Nhưng tôi không thể hiểu được làm thế nào để chạy các lệnh trong liên kết. –

4

Tôi chưa sử dụng SystemJS, nhưng tiền thưởng của bạn đã lôi kéo tôi thử trả lời dù sao, vì nó l ooks như bạn vẫn cần một câu trả lời. :)

Sau khi lướt qua một số tài liệu SystemJS, có vẻ như index.html của bạn cần phải khác nhau để phát triển so với sử dụng sản xuất. Đây là những gì các tài liệu hiển thị cho development:

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

Và đây là những gì họ thể hiện cho production (chú ý dòng đầu tiên có một src con đường khác nhau):

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

Quan trọng hơn, hãy lưu ý rằng node_moduleskhông phải là được tham chiếu trong cả hai trường hợp và cũng không được. Nếu bạn có mã và cấu hình được thiết lập đúng, SystemJS (giống như các công cụ xây dựng khác) sẽ đóng gói mọi thứ bạn cần mà không cần thêm bất kỳ thẻ <script>. Thay vào đó, bạn nên nhập shims của bạn (và tương tự) từ bên trong mã của bạn ở đâu đó. Ví dụ, trong hướng dẫn Webpack của họ (Webpack là một công cụ xây dựng khác có vai trò tương tự với SystemJS), nhóm Angular hiển thị tệp polyfills.ts nhập khẩu miếng chêm của chúng, sau đó chúng bao gồm tệp polyfills vào bản dựng trong phạm vi webpack configuration của chúng.

Tôi rất tiếc, tôi không thể cung cấp lời khuyên cụ thể hơn về SystemJS nói riêng, nhưng hy vọng câu trả lời này đủ để chỉ cho bạn đúng hướng.

1

Một điều bạn có thể làm là cài đặt các gói cần thiết trên máy chủ Azure qua bảng điều khiển Kudu.

  1. Đến https://yoursitename.scm.azurewebsites.net
  2. Sau đó, gỡ lỗi giao diện điều khiển -> CMD
  3. Đến home \ trang web thư mục \ wwwroot
  4. Loại NPM cài đặt

này sẽ cài đặt các gói cần thiết cho các kiễu góc 2 ứng dụng chạy trên máy chủ Azure.

2

Không sử dụng system.config.js

Bạn cần gói trước. Không tải lên node_modules trong Azure. Để tham khảo gói tham chiếu bên dưới.

How to bundle an Angular app for production

Khi bạn bó thư mục, TP sẽ tạo ra. Bạn có thể tải lên thư mục dist trong Azure.

+0

Tôi đã thử chạy 'npm run bundle' nhưng có lỗi bó' missing script'. –

+0

lỗi là gì? và bạn đã làm theo liên kết ở trên để gói nó? –

+1

@rajm là đúng, bạn không nên tải lên node_modules, nhưng gói mọi thứ trong tập lệnh .js. liên quan đến 'tập lệnh thiếu' chỉ có nghĩa là bạn chưa định cấu hình lệnh có tên 'bundle' trong tệp' package.json' của bạn. về cách này: http://stackoverflow.com/questions/35539622/how-do-you-deploy-angular-2-apps? –

2

NPM cài đặt DEPS của bạn trên sản env ..

npm i --production 
+0

khi chạy ứng dụng này, tôi nhận được một số 'gõ install' trên bàn điều khiển và sau đó thực hiện dừng lại. –

+0

sau đó sau khi chạy .... npm bắt đầu – danday74

Các vấn đề liên quan