使用.net mvc發佈IIS角度2應用程序

我已經使用mvc設置了角度2應用程序。我爲visual studio使用typescript 2.3.1.0。我安裝了節點模塊，並添加參考角2使用.net mvc發佈IIS角度2應用程序

視圖 - >首頁 - >索引文件 -

@{ 
    ViewBag.Title = "Home Page"; 
} 
<div class="jumbotron"> 
    <h1>Angular 2 QuickStart</h1> 
</div> 
<div class="row"> 
    <div class="col-md-4"> 
     <!-- Angular2 Code --> 
     <my-app>Loading...</my-app> 
     <!-- Angular2 Code --> 
    </div> 
</div>

我添加了所有引用我的意見 - >共享 - >佈局文件 -

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="google-signin-client_id" content="118134028665-i6h833e7irrrhk0n52bgj7ve6fet4vgr.apps.googleusercontent.com"> 
    <title>@ViewBag.Title - My ASP.NET Application</title> 

    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 

    <!-- Angular2 Code --> 
    <base href="/"> 
    <link rel="stylesheet" href="styles.css"> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script> 
    <script src="https://code.angularjs.org/tools/system.js"></script> 
    <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> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
    <!-- Angular2 Code --> 

</head> 
<body> 
    <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> 
    <script src="~/JS/SocialLogin.js" type="text/javascript"></script> 
    <script src="https://apis.google.com/js/platform.js" async defer></script> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
      </div> 
      <div class="navbar-collapse collapse"> 
      </div> 
     </div> 
    </div> 
    <div class="container body-content"> 
     @RenderBody() 
     <hr /> 
     <footer> 
      <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p> 
     </footer> 
    </div> 

    @Scripts.Render("~/bundles/bootstrap") 
    @RenderSection("scripts", required: false) 
</body> 
</html>

這是我的package.json文件 -

{ 
    "name": "angular-quickstart", 
    "version": "1.0.0", 
    "scripts": { 
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", 
    "lite": "lite-server", 
    "postinstall": "typings install", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "typings": "typings" 
    }, 
    "license": "ISC", 
    "dependencies": { 
    "@angular/common": "2.0.0", 
    "@angular/compiler": "2.0.0", 
    "@angular/core": "2.0.0", 
    "@angular/forms": "2.0.0", 
    "@angular/http": "2.0.0", 
    "@angular/platform-browser": "2.0.0", 
    "@angular/platform-browser-dynamic": "2.0.0", 
    "@angular/router": "3.0.0", 
    "@angular/upgrade": "2.0.0", 
    "core-js": "^2.4.1", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.12", 
    "systemjs": "0.19.27", 
    "zone.js": "^0.6.23", 
    "angular2-in-memory-web-api": "0.0.20", 
    "bootstrap": "^3.3.6" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.2.0", 
    "lite-server": "^2.2.2", 
    "typescript": "^2.0.2", 
    "typings":"^1.3.2" 
    } 
}

釷是我systemjs.config.js文件 -

(function (global) { 
    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: 'app', 
     // angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
     // other libraries 
     'rxjs':      'npm:rxjs', 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
     main: './main.js', 
     defaultExtension: 'js' 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     }, 
     'angular-in-memory-web-api': { 
     main: './index.js', 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this);

如果不包含在項目節點模塊文件夾，它是成功打造，當我運行它好的工作。

一旦我發佈它並將發佈移動到開發服務器並將其部署到IIS上，mvc將運行，但角度2不是。這是我得到的錯誤 -

我認爲由於節點模塊文件夾丟失，我得到這個錯誤。

如果我回去的項目，包括項目節點模塊，並建立它，我得到這些錯誤 -

嚴重性代碼說明項目文件的線路抑制狀態錯誤編譯：文件「E：/ MyApp/MyApp/MyApp.Site/node_modules/browser-sync/node_modules/rx/ts/core/linq/observable/mergeproto.ts' 找不到。 MyApp.Site E：\ MyApp的\ MyApp的\ MyApp.Site \ TSC

嚴重性代碼說明項目文件的線路抑制狀態錯誤編譯：文件「E：/MyApp/MyApp/MyApp.Site/node_modules/browser-sync /node_modules/rx/ts/core/linq/observable/zipproto.ts' 找不到。 MyApp.Site E：\ MyApp \ MyApp \ MyApp.Site \ tsc

我該如何解決這個問題？使用.net mvc在iis上部署angular 2應用程序的正確方法是什麼？在這個項目中包含節點模塊的正確方法是什麼？

謝謝！

來源

2017-05-22 Dina

嗨迪娜，我面臨同樣的問題，無法繼續下去。你有沒有找到任何解決方案？請讓我知道如果你發現任何東西？ –

我也面臨同樣的問題，並沒有得到適當的解決方案，所以我使用了另一種解決方案。

在IIS上獨立部署您的MVC（API）。
使用ng prod單獨構建您的Angular 2應用程序。
在IIS上部署Angular 2應用程序（dist文件夾）作爲靜態網站。
在Angular 2 API中，使用已部署的API進行數據訪問。

如果你得到任何錯誤ping我。

來源

2017-10-30 13:27:36

使用.net mvc發佈IIS角度2應用程序

回答

相關問題