To get Angular2 routing working on IIS 7.5, you need to configure IIS to redirect all requests to your Angular application’s main HTML file. This is because Angular’s routing is handled client-side, so the server needs to be configured to serve the main file for all routes.
Here’s how you can do it:
-
Install URL Rewrite Module: If you haven’t already, you’ll need to install the URL Rewrite module for IIS. You can download it from the Microsoft site.
-
Configure Web.config: In your Angular application’s root directory, create a
web.config
file if it doesn’t already exist. Add the following configuration inside the
element:xml"1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="Angular Routes" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> conditions> <action type="Rewrite" url="/" /> rule> rules> rewrite> system.webServer> configuration>
This configuration tells IIS to rewrite all URLs to the root (
/
), except for files and directories that actually exist. -
Ensure Hash Location Strategy: In your Angular application, use the hash location strategy instead of the default path location strategy. This is because the hash strategy works better with server-side routing. You can enable hash location strategy by providing the
useHash: true
option when configuring your routes.For example, in your
app.module.ts
:typescriptimport { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; import { LogonComponent } from './components/logon/logon.component'; import { EmployeeComponent } from './components/employee/employee.component'; @NgModule({ imports: [ BrowserModule, RouterModule.forRoot([ { path: 'employee', component: EmployeeComponent }, { path: '', component: LogonComponent, pathMatch: 'full' }, { path: '**', redirectTo: '' } // Redirect any other route to the main page ], { useHash: true }) // Use hash location strategy ], declarations: [ AppComponent, LogonComponent, EmployeeComponent ], bootstrap: [AppComponent] }) export class AppModule { }
-
Publish Your Application: Publish your Angular application for deployment on IIS. Make sure to include the
web.config
file in the published output.
With these steps, your Angular application should now work correctly with routing on IIS 7.5. When you navigate directly to a route (e.g., localhost:2500/employee
), IIS will serve the main index.html
file, and Angular will handle the routing on the client side.
المزيد من المعلومات
لا تتردد في طلب مزيد من المعلومات. من الممكن أن تحتاج إلى تحديث بعض الإعدادات في تطبيق Angular الخاص بك للتأكد من أنه يعمل بشكل صحيح على IIS. إليك بعض النقاط الإضافية التي قد تساعدك:
-
قواعد إعادة الكتابة (Rewrite Rules): قد تحتاج أيضًا إلى تكوين قواعد إعادة الكتابة في IIS لضمان أنه يتم إعادة التوجيه بشكل صحيح. يمكنك فعل ذلك من خلال الاستخدام اليدوي لـ”URL Rewrite” في إعدادات IIS أو عن طريق إضافة تكوين إضافي في ملف
web.config
. على سبيل المثال، إذا كنت تستخدم Angular CLI، يمكنك تضمين ملفweb.config
مع التكوين التالي:xml"1.0" encoding="utf-8"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="Angular Routes" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> conditions> <action type="Rewrite" url="/" /> rule> rules> rewrite> system.webServer> configuration>
-
تحديث
base href
: تأكد من أنك قمت بتحديث عنوانbase href
في ملفindex.html
ليعكس الجذر النسبي لتطبيق Angular الخاص بك. على سبيل المثال، إذا كان التطبيق موجودًا في الجذر، يجب أن تكون قيمةbase href
كالتالي:html<base href="/">
إذا كان التطبيق موجودًا في مجلد فرعي، فعليك تحديث قيمة
base href
وفقًا لذلك. -
تحديث التكوين في Angular: تأكد من أنك قمت بتحديث التكوين في تطبيق Angular الخاص بك ليستخدم إستراتيجية توجيه العلامات التجارية (
HashLocationStrategy
) بدلاً من استخدام إستراتيجية توجيه المسارات (PathLocationStrategy
). يمكنك فعل ذلك عن طريق تضمين{ useHash: true }
فيRouterModule.forRoot()
كما هو موضح في الرمز السابق.
باستخدام هذه الخطوات، يجب أن يعمل تطبيق Angular الخاص بك بشكل صحيح على خادم IIS 7.5 مع التوجيه الصحيح.