Angular 5加载Locale时出现404错误求助

你遇到的这个问题很典型——SystemJS没有正确识别Angular locale文件的加载路径，所以才会默认去bundles目录下找，而不是你预期的locales文件夹。下面是一步步的排查和解决方法：

1. 修正SystemJS的路径映射配置 #

打开你的systemjs.config.js，重点检查map和packages部分，确保正确映射了@angular/common/locales的路径：

首先在map对象中添加locale目录的映射：

map: {
  // 保留你已有的其他映射...
  '@angular/common/locales': 'npm:@angular/common/locales/',
  '@angular/common/locales/extra': 'npm:@angular/common/locales/extra/'
}

然后在packages对象中配置该路径的文件加载规则：

packages: {
  // 保留你已有的其他包配置...
  '@angular/common/locales': {
    main: './[你的locale文件名].js', // 例如zh-Hans.js、fr.js
    defaultExtension: 'js'
  },
  '@angular/common/locales/extra': {
    main: './[你的locale文件名].js',
    defaultExtension: 'js'
  }
}

另外还要确认paths里的npm:指向正确的node_modules目录：

paths: {
  'npm:': 'node_modules/'
}

2. 确保AppModule中的Locale加载代码正确 #

在app.module.ts中，要按照正确的方式导入并注册locale数据，比如以中文简体为例：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { registerLocaleData } from '@angular/common';
// 导入对应的locale文件
import localeZhHans from '@angular/common/locales/zh-Hans';
import localeZhHansExtra from '@angular/common/locales/extra/zh-Hans';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {
    // 注册locale数据
    registerLocaleData(localeZhHans, 'zh-Hans', localeZhHansExtra);
  }
}

3. 验证依赖包完整性 #

检查你的node_modules/@angular/common目录下是否存在locales文件夹，里面是否有你需要的locale文件（比如zh-Hans.js）。如果缺失，重新执行npm install来恢复完整的依赖包。

为什么会出现这个问题？ #

Angular的locale文件默认存放在@angular/common/locales目录下，但SystemJS如果没有明确的路径映射，会尝试用Angular核心包的默认加载路径（也就是bundles目录）去查找，自然就会出现404错误。只要配置好正确的路径映射，就能让SystemJS找到正确的文件位置。

内容的提问来源于stack exchange，提问作者Giannis Paraskevopoulos