0
私はUIコンポーネントにAngularを使用するASP.NET MVC Webアプリケーションを開始しました。プロジェクトに必要な設定ファイル（例えば、package.jsonとsystemjs.config.js）を配備しました。 app.component.tsテンプレートをテストするためのテストページIndex.cshtmlを作成します。私のlocalhostの下で実行しているとき、アプリケーションは動作しています。カスタムタグ<user-app>をテンプレートからレンダリングしたページが表示されます。IISで相対パスを使用するようにsystemjs.config.jsを設定するにはどうすればよいですか？
ただし、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ファイルIISでも
<!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>
、私は、アプリケーションを構成し、Default Web Site下でそれControlSystem命名しました。 http errorを見ると、サーバはmain.jsを見つけられませんでした。これは、相対パス（例えば、）であるためです。私はsystemjs.config.jsを設定するいくつかのアプローチを試みたが、うまくいかなかった。
これは私のVisual Studioプロジェクト内の.tsファイル
のフォルダ構造である私は、このような問題を解決する方法に関するオンラインいくつかの研究をしましたが、私は似たものを見つけることができませんでした。もしあれば、そのような参照に私を指示してください。
私はこれらのすべての関連する設定を学ぶためにオンラインで角張っており、門戸に来ています。
ご協力いただきまして誠にありがとうございます。
私自身の実装では、この種の問題もありました。私は直接のパスを入れても、インポートを使用した場所の中で壊れてしまいました。それは、Web APIのエンドポイントへの相対パスを使用した場所でも壊れました。私は 'systemjs.config.js'の' paths'という行の前に 'baseURL： '/'、' –
@ I.R.Rという行を追加して解決しました。ご意見ありがとうございます。ですから、 'System.config（{baseURL： '/'、paths：{...}}）'のように 'systemjs.config.js'に次の行を追加します。コンソールに 'Error：（SystemJS）XHRエラー（404 Not Found）がロードされています。http：// mydomain/app/main.js'と表示されます。 – Juniuz
私はパスの前に（。）か（..）か（〜）を入れなかったのですが、それはトラブルを求めているだけなので、他のものが壊れてしまいました。とにかく、これを済ませたのかどうかはわかりませんが、これもまた助けになりました：https://blogs.msdn.microsoft.com/tmarq/2010/05/26/how-extensionless-urls-are-handled- by-asp-net-v4/ –