Angular部署后刷新页面出现MIME类型错误及语法错误求助

问题场景 #

Angular应用配置了app-routing-module，admin-home组件下通过admin-home-routing-module设置子路由，本地ng serve运行正常，但ng build部署到服务器后刷新页面出现两个错误：

1. 加载main、runtime、polyfill等JS文件时提示：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"，触发HTML规范的严格MIME类型检查
2. JS脚本中出现Uncaught SyntaxError: Unexpected token '<'

附admin-home-routing-module代码：

const routes: Routes = [
  {
    path: 'admin-home',
    component: AdminHomeComponent,
    canActivate: [AuthguardGuard],
    children: [
      {
        path: '',
        redirectTo: 'client-home',
        pathMatch: 'full',
      },
      {
        path: 'client-home',
        component: ClientHomeComponent
      },
      {
        path:'configuration',
        component:ConfigurationComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path:'user-signup',
        component:DetailsCollectorComponent
      },
      {
        path:'signup-second',
        component:SignupSecondComponent
      },
      {
        path:'confirm-otp',
        component: ConfirmOtpComponent
      },
      {
        path: 'date-selector',
        component: DateSelectorComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path: 'slot-selector',
        component: SlotSelectorComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path:'slot-confirm',
        component: SlotConfirmComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path: 'confirmation-view',
        component: ConfirmationViewComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path: 'lane-allocation',
        component: LaneAllocationComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path: 'manager-create',
        component: ManagerCreateComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path: 'group-create',
        component: GroupCreateComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path: 'lane-create',
        component: LaneCreateComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path: 'share-app',
        component: ShareAppComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path: 'custom-fields',
        component: CustomFieldsComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path: 'custom-form-view',
        component: CustomFormViewComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path: 'customer-management',
        component: CustomerManagementComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path: 'group-lane-selector',
        component:GroupLaneSelectorComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path: 'custom-field-confirmation',
        component: CustomFieldConfirmationComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path: 'confirm-customfield-removal',
        component: ConfirmCustomfieldRemovalComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path: 'confirm-customfield-update',
        component: ConfirmCustomfieldUpdateComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path: 'error-page',
        component: ErrorPageComponent,
        canActivate: [AuthguardGuard]
      },{
        path:'confirm-delete',
        component:ConfirmDeleteComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path:'confirm-slot-complete',
        component:ConfirmSlotCompleteComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path:'confirm-lane-assign',
        component:ConfirmLaneAssignComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path: 'console-super',
        component: ConsoleSuperComponent,
        canActivate: [AuthguardGuard]
      },
      {
        path: 'create-centers',
        component: CreateCentersComponent,
        canActivate: [AuthguardGuard]
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AdminHomeRoutingModule { }

错误原因 #

这是Angular单页应用（SPA）的典型路由问题：

• 本地开发服务器ng serve内置路由重写规则，会把所有路由请求转发到index.html
• 部署到外部服务器后，刷新页面时浏览器会直接向服务器请求当前路由路径（比如/admin-home/client-home），服务器找不到对应文件，就返回index.html作为响应
• 浏览器原本期望加载JS文件，结果收到HTML内容，触发MIME类型错误和语法错误（解析HTML时第一个字符是<，不符合JS语法）

解决方案 #

1. 配置服务器路由重写规则 #

根据使用的服务器类型，添加将所有请求重定向到index.html的规则：

• Nginx：在配置文件的location块中添加

  location / {
    try_files $uri $uri/ /index.html;
  }
  

• Apache：在项目根目录创建.htaccess文件，添加

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  

• IIS：在web.config中添加URL重写规则

  <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="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
  

2. 确认base href配置正确 #

执行ng build时，指定正确的--base-href参数：

• 部署在根路径时：

  ng build --base-href /
  

• 部署在子路径（比如/admin/）时：

  ng build --base-href /admin/
  

也可在angular.json的projects -> [你的项目名] -> architect -> build -> options中配置baseHref字段：

"options": {
  "baseHref": "/"
}

3. 检查服务器MIME类型配置 #

确保服务器正确设置JS文件的MIME类型为application/javascript：

• Nginx可在mime.types文件中确认存在application/javascript js;
• Apache可在mime.types中检查对应配置
• 其他服务器手动添加对应MIME类型映射

内容的提问来源于stack exchange，提问作者Nizal Sha