Файлы Angular 7 prod build i18n не найдены

Я пытаюсь развернуть приложение Angular 7, которое использует ngx-translate и переведенные языковые файлы в папке /dist/assets. Я указал правильный базовый адрес в файле build. После развертывания я вижу, что загружается все, кроме файла языков, который возвращает код ошибки 404 (не найден).

Я пытался изменить файл angular.json несколькими способами. Я попытался изменить TranslateHttpLoader. Кажется, ничего не работает. Я вижу папку i18n со всеми языковыми файлами в папке /dist. Однако на него не ссылаются.

в app.module.ts

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
}

в угловом.json

"assets": [
  "src/favicon.ico",
  "src/assets"
],

Но в итоге я получаю эту ошибку в браузере:

/assets/i18n/en.json 404 не найден

Любая помощь будет оценена по достоинству!

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
5
0
7 204
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Вы импортировали в AppModule?

export function HttpLoaderFactory(httpClient: HttpClient) {
    return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
}

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Спасибо за ответ. Да, я импортировал в AppModule. Так же, как вы показали в своем фрагменте. До сих пор не работает.

npabs18 24.05.2019 05:18

Убедитесь, что ваша папка с ресурсами находится на этом уровне: /источник/активы/ Вы используете angular-cli?

Tan Nguyen 24.05.2019 05:42

Да, я использую Angular-CLI. Когда я запускаю ng build --prod, папка dist создает сборку с папкой ресурсов в /dist/<project_name>/assets. Разве я не должен развертывать структуру приложения таким образом? В приложении перед сборкой есть папка с ресурсами, расположенная в /src/assets, как вы упомянули.

npabs18 24.05.2019 16:50
Ответ принят как подходящий

Я столкнулся с той же проблемой, что и вы, я считаю, что это связано с этой командой:

ng build --prod

Попробуйте использовать эту команду:

ng build --base-href=/deployed_app_name/ --prod

Например, если имя вашего развернутого приложения: stackoverflow команда должна быть такой:

ng build --base-href=/stackoverflow/ --prod

И здесь у вас будет правильный путь к вашим файлам i18n json

Вот путь, по которому я пошел, чтобы решить аналогичную проблему:

  1. Убедитесь, что файлы с ошибкой 404 находились в папке dist по правильному пути, если нет, подтвердите, все ли параметры ресурсов в порядке в angular.json.
  2. Проверьте параметр base-ref как:
  3. И посмотрите, есть ли у вас правильное значение параметра i18n в файле environment.prod.ts (или environment.ts и т. д.).

На Angular 9.0.4 я столкнулся с той же проблемой.

Только когда у меня был префикс косой черты в пути как ./assets/i18n/, проблема была бы решена:

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/');
}

Префикс TranslateHttpLoader по умолчанию — «/assets/i18n/», что делает этот шаг обязательным при использовании другого baseHref. github.com/ngx-translate/http-loader#использование

Carsten 09.09.2021 14:18

Я столкнулся с той же проблемой, что и вы, В моем случае он отлично работал на моем локальном сервере IIS, но выдает 404 для работающего сервера IIS (i18n/en.json не найден 404).

Я ходил по кругу, думая, что это угловая ошибка пути i18n. В конце концов, это сводится к проблеме с сервером.

по умолчанию сервер IIS разрешает только несколько типов расширений файлов. Вы должны вручную добавить mimeType для файла json (из файла веб-конфигурации).

<staticContent>
  <remove fileExtension = ".json"/>
  <mimeMap fileExtension = ".json" mimeType = "application/json"/>
</staticContent>

Я добавил это в файл веб-конфигурации (если файла нет, вы должны создать его в корневой папке веб-сайта).

пожалуйста...

Мне тоже помогло, использовал лазурное веб-приложение, пробовал все остальные варианты. Только это сработало для меня.

Alex 08.01.2021 18:33

Другие вопросы по теме