在Azure上部署当微软DNX应用Angular2不运行 [英] Microsoft DNX application Angular2 does not run when deployed on Azure
本文介绍了在Azure上部署当微软DNX应用Angular2不运行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我按照这个教程说明如何建立使用Angular2和打字稿<一个一个ASP.NET MVC应用程序href=\"https://ievangelistblog.word$p$pss.com/2016/01/13/building-an-angular2-spa-with-asp-net-5-mvc-6-web-api-2-and-typescript-1-7-5/\" rel=\"nofollow\">https://ievangelistblog.word$p$pss.com/2016/01/13/building-an-angular2-spa-with-asp-net-5-mvc-6-web-api-2-and-typescript-1-7-5/
应用部署在本地
我做了一些修改后，我的本地机器（红隼）上运行，比如版本库的
![茶隼上部署本地作品](\"http://i.stack.imgur.com/uvYrr.png\")
应用部署在Windows Azure上不显示菜单
不幸的是，部署在Windows Azure上相同的应用程序不会显示的索引页菜单：
下面是链接到菜单页面（未showned上天青）
![应用程序部署在Windows](\"http://i.stack.imgur.com/gT7eC.png\")
![发布网站](\"http://i.stack.imgur.com/gPWMp.png\")
**请记住，有在浏览器上没有错误**，从Firefox，IE浏览器，Chrome和Opera的所有日志做present在同一页
你有，我需要看看任何想法？
app.componennt.ts源文件
进口{组件，OnInit中}从angular2 /芯;
进口{AsyncRoute，路由器，RouteDefinition，RouteConfig，位置，ROUTER_DIRECTIVES}从angular2 /路由器;
进口{} StaticComponent从./components/static.component声明VAR系统：任何;@零件（{
选择应用程序，
templateUrl：/app/app.html
指令：[ROUTER_DIRECTIVES]
}）出口类AppComponent实现的OnInit {
公共路线：RouteDefinition [] = NULL;
构造函数（私人路由器：路由器，
私人的位置：位置）{ } ngOnInit（）{
如果（this.routes === NULL）{
this.routes = [
{路径：/指数，分量：StaticComponent，名称：索引，useAsDefault：真正}，
新AsyncRoute（{
路径：/分，
名称：子
装载机：（）=＆GT; 。System.import（应用程序/组件/ mvc.component），那么（C =＆GT; C [MvcComponent]）
}），
新AsyncRoute（{
路径：/数字
名称：数字，
装载机：（）=＆GT; System.import（应用程序/组件/ api.component），那么（C =＆GT; C [ApiComponent]）。
}）
]; this.router.config（this.routes）;
}
} getLinkStyle（路线：RouteDefinition）{
返回this.location.path（）的indexOf（route.path）GT。 -1;
}
}
的package.json
{
版本：0.0.0
名：marketresearchio
私：真实，
依赖：{
angular2：2.0.0-beta.13
引导：3.3.6
ES6-承诺：^ 3.0.2
ES6-垫片：^ 0.35.0
jQuery的：2.1.4
反映了元数据：0.1.2
rxjs：5.0.0-beta.2
systemjs：0.19.25，
zone.js：0.6.6
}，
devDependencies：{
同时：^ 2.0.0
吞掉：3.8.11
一饮而尽-CONCAT：2.5.2
一饮而尽-cssmin：0.1.7
咕嘟咕嘟-重命名：1.2.2
咕嘟咕嘟-丑化：1.2.0
精简版服务器：^ 1.3.1
lodash：3.10.1，
rimraf：2.2.8
打字稿：^ 1.8.9
分型：^ 0.7.12
}，
脚本：{
TSC：台糖
TSC：W：TSC -w
精简版：精简版服务器
开始：兼\\故宫运行TSC：W \\\\运行故宫精简版\\，
分型：分型，
安装后：分型安装
}
}
project.json
{
版本：1.0.0- *，
说明：找公共市场研究报告最简单的方法，
作家：]，
标签：市场研究]，
projectUrl：https://marketresearchio.net，
compilationOptions：{
emitEntryPoint：真
}， 依赖：{
掠影：2.0.0-β1
Microsoft.AspNet.Authentication.Cookies：1.0.0-RC1决赛
Microsoft.AspNet.Diagnostics：1.0.0-RC1决赛
Microsoft.AspNet.Diagnostics.Entity：7.0.0-RC1决赛
Microsoft.AspNet.IISPlatformHandler：1.0.0-RC1决赛
Microsoft.AspNet.Mvc：6.0.0-RC1决赛
Microsoft.AspNet.Mvc.TagHelpers：6.0.0-RC1决赛
Microsoft.AspNet.Mvc.WebApiCompatShim：6.0.0-RC1决赛
Microsoft.AspNet.Server.Kestrel：1.0.0-RC1决赛
Microsoft.AspNet.StaticFiles：1.0.0-RC1决赛
Microsoft.AspNet.Tooling.Razor：1.0.0-RC1决赛
Microsoft.Extensions codeGenerators.Mvc：1.0.0-RC1决赛
Microsoft.Extensions.Configuration.FileProviderExtensions：1.0.0-RC1决赛
Microsoft.Extensions.Configuration.Json：1.0.0-RC1决赛
Microsoft.Extensions.Configuration.UserSecrets：1.0.0-RC1决赛
Microsoft.Extensions.Logging：1.0.0-RC1决赛
Microsoft.Extensions.Logging.Console：1.0.0-RC1决赛
Microsoft.Extensions.Logging.Debug：1.0.0-RC1决赛
Microsoft.VisualStudio.Web.BrowserLink.Loader：14.0.0-RC1决赛
Microsoft.AspNet.Server.WebListener：1.0.0-RC1决赛
}， 命令：{
网络：Microsoft.AspNet.Server.Kestrel
}， 构架： {
dnx451：{}，
dnxcore50：{}
}， 排除：[
wwwroot的
node_modules
]
publishExclude：[
**。用户，
**。vspscc
]
}
tsconfig.json
{
compilerOptions：{
目标：ES5
模块：系统
moduleResolution：节点，
sourceMap：真实，
emitDecoratorMetadata：真实，
experimentalDecorators：真实，
removeComments：假的，
noImplicitAny：假的，
ROOTDIR：wwwroot文件/应用程序，
OUTDIR：wwwroot文件/应用程序，
listFiles：真实，
noLib：假的，
诊断：真
}，
排除：[
node_modules
分型/主 分型/ main.d.ts
分型/ browser.d.ts
分型/浏览器/环境/ ES6-垫片/ index.d.ts
分型/浏览器/环境/茉莉/ index.d.ts
]
}
typings.json
{
ambientDependencies：{
ES6-垫片： \"github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd\",
茉莉花： \"github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd\"
}
}
global.json
{
工程：SRC，测试]，
SDK：{
版本：1.0.0-RC1-UPDATE2
}
}
解决方案
router.dev.js的微小突破1天的应用程序！
我已经改变了code做加载所有JavaScript的未缩小的版本
由于@Brad的支持！
I have followed this tutorial describing how to build an ASP.NET MVC app using Angular2 and typescript https://ievangelistblog.wordpress.com/2016/01/13/building-an-angular2-spa-with-asp-net-5-mvc-6-web-api-2-and-typescript-1-7-5/
App deployed locally
I made it run on my local machine (Kestrel) after some changes such as the version of the libraries
App deployed on Windows Azure does not display the menu
Unfortunately, deploying the same application on Windows Azure does not display the menu on the index page:
Here are the pages linked to the menu (that is not showned on azure)
** Bear in mind that there is no error on the browser**, all logs from firefox, internet explorer, chrome and opera do present the same page
Do you have any idea where I need to look at?
app.componennt.ts source file
import {Component, OnInit} from "angular2/core";
import {AsyncRoute, Router, RouteDefinition, RouteConfig, Location, ROUTER_DIRECTIVES} from "angular2/router";
import {StaticComponent} from "./components/static.component";
declare var System: any;
@Component({
selector: "app",
templateUrl: "/app/app.html",
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent implements OnInit {
public routes: RouteDefinition[] = null;
constructor(private router: Router,
private location: Location) {
}
ngOnInit() {
if (this.routes === null) {
this.routes = [
{ path: "/index", component: StaticComponent, name: "Index", useAsDefault: true },
new AsyncRoute({
path: "/sub",
name: "Sub",
loader: () => System.import("app/components/mvc.component").then(c => c["MvcComponent"])
}),
new AsyncRoute({
path: "/numbers",
name: "Numbers",
loader: () => System.import("app/components/api.component").then(c => c["ApiComponent"])
})
];
this.router.config(this.routes);
}
}
getLinkStyle(route: RouteDefinition) {
return this.location.path().indexOf(route.path) > -1;
}
}
Package.json
{
"version": "0.0.0",
"name": "marketresearchio",
"private": true,
"dependencies": {
"angular2": "2.0.0-beta.13",
"bootstrap": "3.3.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.35.0",
"jquery": "2.1.4",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"systemjs": "0.19.25",
"zone.js": "0.6.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"gulp": "3.8.11",
"gulp-concat": "2.5.2",
"gulp-cssmin": "0.1.7",
"gulp-rename": "1.2.2",
"gulp-uglify": "1.2.0",
"lite-server": "^1.3.1",
"lodash": "3.10.1",
"rimraf": "2.2.8",
"typescript": "^1.8.9",
"typings": "^0.7.12"
},
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"typings": "typings",
"postinstall": "typings install"
}
}
project.json
{
"version": "1.0.0-*",
"description": "The simplest way to find public Market Research Reports",
"authors": [ "" ],
"tags": [ "Market Research"],
"projectUrl": "https://marketresearchio.net",
"compilationOptions": {
"emitEntryPoint": true
},
"dependencies": {
"Glimpse": "2.0.0-beta1",
"Microsoft.AspNet.Authentication.Cookies": "1.0.0-rc1-final",
"Microsoft.AspNet.Diagnostics": "1.0.0-rc1-final",
"Microsoft.AspNet.Diagnostics.Entity": "7.0.0-rc1-final",
"Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final",
"Microsoft.AspNet.Mvc": "6.0.0-rc1-final",
"Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-rc1-final",
"Microsoft.AspNet.Mvc.WebApiCompatShim": "6.0.0-rc1-final",
"Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final",
"Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final",
"Microsoft.AspNet.Tooling.Razor": "1.0.0-rc1-final",
"Microsoft.Extensions.CodeGenerators.Mvc": "1.0.0-rc1-final",
"Microsoft.Extensions.Configuration.FileProviderExtensions": "1.0.0-rc1-final",
"Microsoft.Extensions.Configuration.Json": "1.0.0-rc1-final",
"Microsoft.Extensions.Configuration.UserSecrets": "1.0.0-rc1-final",
"Microsoft.Extensions.Logging": "1.0.0-rc1-final",
"Microsoft.Extensions.Logging.Console": "1.0.0-rc1-final",
"Microsoft.Extensions.Logging.Debug": "1.0.0-rc1-final",
"Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.0.0-rc1-final",
"Microsoft.AspNet.Server.WebListener": "1.0.0-rc1-final"
},
"commands": {
"web": "Microsoft.AspNet.Server.Kestrel"
},
"frameworks": {
"dnx451": { },
"dnxcore50": { }
},
"exclude": [
"wwwroot",
"node_modules"
],
"publishExclude": [
"**.user",
"**.vspscc"
]
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"rootDir": "wwwroot/app",
"outDir": "wwwroot/app",
"listFiles": true,
"noLib": false,
"diagnostics": true
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts",
"typings/browser.d.ts",
"typings/browser/ambient/es6-shim/index.d.ts",
"typings/browser/ambient/jasmine/index.d.ts"
]
}
typings.json
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
}
}
global.json
{
"projects": [ "src", "test" ],
"sdk": {
"version": "1.0.0-rc1-update2"
}
}
解决方案
the minification of router.dev.js broke the app from day 1!
I have changed the code to do load the un-minified versions of all javascripts
thanks to @Brad for the support!
这篇关于在Azure上部署当微软DNX应用Angular2不运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
