تكوين توجيه Angular2 على IIS 7.5

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:

1. 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.

2. 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:

   xmlCopy code
   "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.

3. 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:

   typescriptCopy code
   import { 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 { }
   

4. 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. إليك بعض النقاط الإضافية التي قد تساعدك:

1. قواعد إعادة الكتابة (Rewrite Rules): قد تحتاج أيضًا إلى تكوين قواعد إعادة الكتابة في IIS لضمان أنه يتم إعادة التوجيه بشكل صحيح. يمكنك فعل ذلك من خلال الاستخدام اليدوي لـ”URL Rewrite” في إعدادات IIS أو عن طريق إضافة تكوين إضافي في ملف web.config. على سبيل المثال، إذا كنت تستخدم Angular CLI، يمكنك تضمين ملف web.config مع التكوين التالي:

   xmlCopy code
   "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>
   

2. تحديث base href: تأكد من أنك قمت بتحديث عنوان base href في ملف index.html ليعكس الجذر النسبي لتطبيق Angular الخاص بك. على سبيل المثال، إذا كان التطبيق موجودًا في الجذر، يجب أن تكون قيمة base href كالتالي:

   htmlCopy code
   <base href="/">
   

   إذا كان التطبيق موجودًا في مجلد فرعي، فعليك تحديث قيمة base href وفقًا لذلك.

3. تحديث التكوين في Angular: تأكد من أنك قمت بتحديث التكوين في تطبيق Angular الخاص بك ليستخدم إستراتيجية توجيه العلامات التجارية (HashLocationStrategy) بدلاً من استخدام إستراتيجية توجيه المسارات (PathLocationStrategy). يمكنك فعل ذلك عن طريق تضمين { useHash: true } في RouterModule.forRoot() كما هو موضح في الرمز السابق.

باستخدام هذه الخطوات، يجب أن يعمل تطبيق Angular الخاص بك بشكل صحيح على خادم IIS 7.5 مع التوجيه الصحيح.