ngx-translate 从自定义文件夹加载翻译 returns 404 (Ionic)

Question

以下 This 我已经设置了一个自定义位置来加载翻译。
现在，当我尝试访问我在 Ionic Lab 中的页面时，none 的翻译被加载，我可以在控制台中看到我收到 404 HTTP 错误。

具体来说：

{headers: HttpHeaders, status: 404, statusText: "Not Found", url: 
"http://localhost:8100/lang/de.json", ...}

我也不能直接浏览到这个位置，Ionic Lab 显示一个空白页面说 Cannot GET /lang 但我认为这是故意的。

这是我的 app.module.ts（没有导入）：

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    HttpModule,
    HttpClientModule,
    LoginPageModule,
    TranslateModule.forRoot({
      loader: {
           provide: TranslateLoader,
           useFactory: (createTranslateLoader),
           deps: [HttpClient]
         }
      })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Device,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AuthenticationProvider,
    GlobalServiceProvider
  ],
  exports: [
    TranslateModule
  ]
})
export class AppModule {}

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, "./lang/", ".json");
}

如您所见，我尝试从 "./lang/" 加载，这是我在项目文件夹中创建的目录，如我的 Visual Studio Code Explorer 的屏幕截图所示：

现在，我的问题是，我需要更改引用新位置的方式吗？如果是这样，如何？我是否需要编写自己的自定义加载程序或以某种方式将我的 /lang/ 目录导入我的 @NgModule？

还有，这是我的包裹。json/dependencies 这样你就知道我用的是哪个版本了。

"@angular/common": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"@ionic-native/camera": "^4.3.2",
"@ionic-native/core": "4.4.0",
"@ionic-native/device": "^4.3.2",
"@ionic-native/splash-screen": "4.4.0",
"@ionic-native/status-bar": "4.4.0",
"@ionic/storage": "2.1.3",
"angular-utf8-base64": "0.0.5",
"cordova-ios": "4.5.2",
"cordova-plugin-camera": "^2.4.1",
"cordova-plugin-compat": "^1.2.0",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-ionic-webview": "^1.1.15",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-whitelist": "^1.3.1",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18",
"@ngx-translate/core": "^9.1.1",
"@ngx-translate/http-loader": "^2.0.1"

Answer 1

您需要配置服务框架，在本例中为 ionic，以服务文件夹 lang。

或者您也可以将 lang 文件夹放在 assets 文件夹下，因为默认情况下会提供此文件夹。

在 angular CLI 中，您可以在 .angular-cli.json 像这样：

  {
    "apps": [
      {
        "assets": [
          "assets",
          "favicon.ico",
          "lang"
         ]
      }
  }

Answer 2

备案：在 Ionic 中，您可以访问 package.json 并添加此部分：

"config": {
    "ionic_copy": "/config/assets_rollout.js"
},

解释：Ionic 带有一堆 default app scripts 可以使用 "config" 部分覆盖。

对于我这里的特殊情况，我将此部分添加到默认 copy.config.js 并如上所示重命名：

copyCustomAssets: {
  src: ['{{SRC}}/pages/module/custom-assets/**/*'],
  dest: '{{WWW}}/assets/custom'
},

这将使所有 "custom-assets" 资产在 /assets/custom/*...

下可用

ngx-translate 从自定义文件夹加载翻译 returns 404 (Ionic)

ngx-translate loading translations from custom folder returns 404 (Ionic)

ionic-framework

ngx-translate

angular