0
我剛剛開始使用Angular作爲UI組件的ASP.NET MVC Web應用程序。將必要的配置文件配置到我的項目中（例如package.json和systemjs.config.js）。創建測試頁Index.cshtml以測試出app.component.ts模板。該應用程序正在我的本地主機下運行。我可以看到從模板中呈現自定義標記<user-app>的頁面。如何配置systemjs.config.js在IIS中使用相對路徑？
但是，問題是，當我將Web應用程序部署到IIS（開發服務器）時，遇到以下HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier)。
這是應用package.json文件
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"@angular/common": "~4.3.4",
"@angular/compiler": "~4.3.4",
"@angular/core": "~4.3.4",
"@angular/forms": "~4.3.4",
"@angular/http": "~4.3.4",
"@angular/platform-browser": "~4.3.4",
"@angular/platform-browser-dynamic": "~4.3.4",
"@angular/router": "~4.3.4",
"angular-in-memory-web-api": "~0.3.0",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.8.4"
},
"devDependencies": {
"concurrently": "^3.2.0",
"lite-server": "^2.2.2",
"typescript": "~2.1.0",
"canonical-path": "0.0.2",
"tslint": "^3.15.1",
"lodash": "^4.16.4",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"@types/node": "^6.0.46",
"@types/jasmine": "2.5.36"
},
"repository": {}
}
的應用systemjs.config.js文件
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(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/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
//meta: {
// './*.js': {
// loader: 'systemjs-angular-loader.js'
// }
//},
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
的app.component.ts文件
import { Component } from '@angular/core';
@Component({
selector: 'user-app',
template: `
<div>
<nav class='navbar navbar-inverse'>
<div class='container-fluid'>
<ul class='nav navbar-nav'>
<li>
<a [routerLink]="['home']">Home</a>
</li>
</ul>
</div>
</nav>
<div class='container'>
<router-outlet></router-outlet>
</div>
</div>
`
})
export class AppComponent {}
的main.ts文件
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
的app.module.ts文件
import { NgModule } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { HomeComponent } from './Components/home.component';
@NgModule({
imports: [BrowserModule, ReactiveFormsModule, HttpModule, routing],
declarations: [AppComponent, HomeComponent],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
bootstrap: [AppComponent]
})
export class AppModule {}
和應用頁面_Layout.cshtml文件
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Control Systems Management</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<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/systemjs/dist/system.src.js"></script>
<script src="~/systemjs.config.js"></script>
<script>
//SystemJS.config({
// baseURL: '.'
//});
System.import('app').catch(function (err) {
console.error(err);
});
</script>
</head>
<body>
<div class="container body-content">
@RenderBody()
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
此外，在IIS中，我已經配置的應用程序和Default Web Site下把它命名爲ControlSystem。查看http error，服務器沒有找到main.js，因爲它被假定爲相對路徑（例如，http://myDomain/controlsystem/app/main.js）。我嘗試了幾種方法來配置systemjs.config.js，但它沒有解決。
這是.ts文件的文件夾結構，我的Visual Studio項目
我做了一些研究網上就如何解決這些問題裏面，但我找不到類似的一個。如果有，請指導我參考。
我是Angular的新手，在線瞭解所有這些相關的配置設置。
任何幫助是極大的讚賞。
在我自己的實現中，我也有這樣的問題。如果我放置直接路徑，但它在我使用導入的地方打破了它，它會工作，它也打破了我使用相對路徑到我的web api端點的地方。我通過在'systemjs.config.js'中加入下面一行'paths'來解決它：'baseURL：'/'，' –
@ I.R.R。謝謝你的評論。因此，我還在System.config（{baseURL：'/'，paths：{...}}）''system's.config.js'中添加了以下代碼行，但是當我檢查瀏覽器的時候仍然出現錯誤控制檯說'錯誤：（SystemJS）XHR錯誤（404未找到）加載http：// mydomain/app/main.js'你是什麼意思的「它會工作，如果我把直接路徑」？ – Juniuz
正如我沒有在路徑之前放置（。）或（..）或（〜），但這只是要求麻煩，因爲它使其他事情破裂。無論如何，我不知道你是否已經這樣做了，但是這對我也有幫助：https://blogs.msdn.microsoft.com/tmarq/2010/05/26/how-extensionless-urls-are-handled- by-asp-net-v4/ –