问题
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:
- http://marketresearchio.azurewebsites.net/index
Here are the pages linked to the menu (that is not showned on azure)
- http://marketresearchio.azurewebsites.net/sub
- http://marketresearchio.azurewebsites.net/numbers
** 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"
}
}
回答1:
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!
来源：https://stackoverflow.com/questions/36464020/microsoft-dnx-application-angular2-does-not-run-when-deployed-on-azure