ngx-translate при загрузке переводов из пользовательской папки возвращает 404 (Ionic)

Следуя Этому я настроил собственное местоположение для загрузки переводов.
Теперь, когда я пытаюсь получить доступ к своей странице в Ionic Lab, ни один из переводов не загружается, и я вижу в консоли, что получаю ошибку 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:

исследователь

Теперь мой вопрос заключается в следующем: нужно ли мне изменить способ, которым я называю свое новое местоположение? Если да, то как? Нужно ли мне писать свой собственный загрузчик или каким-то образом импортировать мой каталог /lang/ в мой @NgModule?

Кроме того, вот мой package.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"

ionic-framework angular ngx-translate
person Wep0n    schedule 06.03.2018    source источник
comment
Вы используете angular-cli? В этом случае вам нужно добавить папку lang в apps=›assets в .angular-cli.json.   -  person Naoe    schedule 06.03.2018
comment
@Angular/compiler-cli является одной из автоматических/по умолчанию зависимостей с ионным стартером, который я использовал (Ionic Menu Starter), хотя я вообще не использовал его активно. Я читал, что компилятор cli используется для компиляции AoT. Это то, что вы имеете в виду?   -  person Wep0n    schedule 06.03.2018
comment
Я спрашиваю, какую систему вы используете для создания/обслуживания углового приложения. Если вы используете angular-cli, вы обычно используете ng serve/ng build. Если вы используете... скажем, ядро ​​​​dotnet, вы должны использовать dotnet run/dotnet build.   -  person Naoe    schedule 06.03.2018
comment
О, я строю/обслуживаю с помощью ionic, т.е. ionic serve --lab   -  person Wep0n    schedule 06.03.2018
comment
Я вижу, я не знаком с ionic. Но я предполагаю, что вам нужно указать ionic включить папку lang. Вы можете попробовать поместить папку lang в папку с ресурсами, так как она обычно используется по умолчанию.   -  person Naoe    schedule 06.03.2018
comment
Да, я попробовал это очень быстро, теперь это работает. Пришло время разобраться, как это правильно настроить. Спасибо, если хотите, можете опубликовать это как ответ.   -  person Wep0n    schedule 06.03.2018

Ответы (2)


arrow_upward
1
arrow_downward

Вам необходимо настроить обслуживающую среду, в данном случае ionic, для обслуживания папки lang .

Или вы также можете поместить папку lang в папку assets, так как эта папка обслуживается по умолчанию.

В angular CLI вы должны настроить это в .angular-cli.json следующим образом:

  {
    "apps": [
      {
        "assets": [
          "assets",
          "favicon.ico",
          "lang"
         ]
      }
  }
person Naoe    schedule 06.03.2018

arrow_upward
0
arrow_downward

Для записи: в Ionic вы можете получить доступ к package.json и добавить этот раздел:

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

Объяснение: Ionic поставляется с набором скриптов приложений по умолчанию, который можно переопределить с помощью этого раздела «config».

Для моего конкретного случая я добавил этот раздел к разделу по умолчанию copy.config.js и переименовал его, как показано выше:

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

Это сделает все активы "custom-assets" доступными в /assets/custom/*...

person Wep0n    schedule 09.04.2018