首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Angular中为开发版和生产版应用程序设置不同的i18n资源路径

在Angular中为开发版和生产版应用程序设置不同的i18n资源路径,可以通过以下步骤实现:

  1. 首先,在Angular项目的根目录下创建两个不同的i18n文件夹,例如"src/i18n-dev"和"src/i18n-prod",分别用于存放开发版和生产版的i18n资源文件。
  2. 在开发版的i18n资源文件夹("src/i18n-dev")中,创建一个名为"en.json"的JSON文件,用于存放英文的翻译文本。在生产版的i18n资源文件夹("src/i18n-prod")中,也创建一个名为"en.json"的JSON文件,用于存放相同的英文翻译文本。
  3. 在Angular项目的根目录下的"angular.json"文件中,找到"projects" -> "architect" -> "build" -> "options" -> "assets"节点,将其修改为以下内容:
代码语言:txt
复制
"assets": [
  {
    "glob": "**/*",
    "input": "src/assets",
    "output": "/assets"
  },
  {
    "glob": "**/*.json",
    "input": "src/i18n-dev",
    "output": "/i18n"
  }
]

这样配置后,开发版的i18n资源文件夹("src/i18n-dev")中的所有JSON文件将被复制到构建后的应用程序的"/i18n"目录下。

  1. 在Angular项目的根目录下的"src/app"文件夹中,创建一个名为"i18n.service.ts"的服务文件,用于加载正确的i18n资源文件。在该文件中,编写以下代码:
代码语言:txt
复制
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class I18nService {
  private i18nPath: string;

  constructor(private http: HttpClient) {
    this.i18nPath = '/i18n'; // 默认为开发版的i18n资源路径
  }

  setProductionMode() {
    this.i18nPath = '/assets/i18n-prod'; // 切换为生产版的i18n资源路径
  }

  getTranslation(lang: string) {
    const url = `${this.i18nPath}/${lang}.json`;
    return this.http.get(url);
  }
}

该服务文件中定义了一个名为I18nService的服务类,其中包含了一个setProductionMode方法用于切换到生产版的i18n资源路径,以及一个getTranslation方法用于获取指定语言的翻译文本。

  1. 在需要使用i18n的组件中,通过依赖注入的方式使用I18nService,并调用getTranslation方法获取翻译文本。例如:
代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { I18nService } from './i18n.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  translation: any;

  constructor(private i18nService: I18nService) { }

  ngOnInit() {
    this.i18nService.getTranslation('en').subscribe((data: any) => {
      this.translation = data;
    });
  }
}

在上述示例中,通过调用getTranslation方法获取英文的翻译文本,并将其赋值给translation属性。

通过以上步骤,就可以在Angular中为开发版和生产版应用程序设置不同的i18n资源路径。在开发版中,i18n资源文件将被复制到构建后的应用程序的"/i18n"目录下,而在生产版中,i18n资源文件将被复制到"/assets/i18n-prod"目录下。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

何在 Windows 上安装 AngularAngular CLI、Node.js 构建工具指南

Angular CLI, Node.js, and Build Tools,作者Ahmed Bouchefra 在本教程,我们将学习如何在 Windows 安装 Angular CLI 并使用它来创建...一旦构建了用于生产应用程序,您将不需要 Node.js,因为最终捆绑包只是静态 HTML、CSS JavaScript,可以由任何服务器或 CDN 提供服务。...build (b): 将 Angular 应用程序编译到给定输出路径上名为 dist/ 输出目录。必须从工作空间目录执行。 config: 检索或设置 Angular 配置值。...大部分工作将在这里完成 /app/:包含模块组件 /assets/:包含图像、图标样式等静态资源 /environments/:包含环境(生产开发)特定配置文件 browserslist:autoprefixer...:TypeScript 配置文件 tslint.json:TSlint(静态分析工具)配置文件 项目服务 Angular CLI 提供了一个完整工具链,用于在本地计算机上开发前端应用程序

3400

Angular 16 正式发布

在之前Angularv15Angular团队通过将独立API从开发者预览升级至稳定,在Angular简易性开发者体验方面达到了一个重要里程碑。...Reactivity带来了更简单mental模型,使其清楚地了解视图依赖性通过应用程序数据流。 启用细粒度Reactivity,在未来版本,它将允许我们只检查受影响组件变化。...今天,我们很高兴与大家分享,在 v16 ,我们基于 esbuild 构建系统进入了开发预览! 早期测试显示,冷生产环境构建改善了 72% 以上。...在 ng serve ,我们现在使用 Vite 作为开发服务器,esbuild 提供在开发生产环境构建。 我们想强调是,Angular CLI 完全依赖 Vite 作为开发服务器。...接下来,在我们将这一特性从开发者预览提升到正式之前,我们将解决对 i18n 支持问题。

2.5K10

看看Angular有啥新玩法!手把手教你在Angular15集成Excel报表插件

Angular15新特性 Angular框架(以下简称“Angular”)作为一款由谷歌开发Web应用程序框架,其强大依赖注入系统、可重复使用模块化开发理念响应式编程模式等特点让Angular一问世便取得了巨大关注流量...小编为大家简单介绍几个Angular15新特性(以下特性源于Angular官网): 独立API脱离开发者预览Angular14更新中使用了独立API,使得开发者能够在不使用 NgModules...在Angular15将这些API已经更新成为了稳定,并且以后将通过语义版本去控制独立 APIs 发展。...下面将介绍如何在Angular15集成Excel报表插件并实现简单文件上传下载。 在本教程,我们将使用node.js,请确保已安装最新版本。...(初始化一个Angular工程) 将下面的表格资源粘贴到package.json文件dependencies标签,并使用npm install指令下载ng serve指令运行。

26510

纯前端控件集 WijmoJS 2018V2发布,在React、VueAngular更易用

开发人员可以实时更改属性绑定事件,并将所做更改保存回 Angular应用程序。 要在VSCode安装此扩展,请单击VS Marketplace上Designer设置“安装”按钮。...新React / Redux加密货币跟踪应用程序 本次更新使用ReactRedux WijmoJS 控件集增加了加密货币跟踪应用程序,该应用程序是一个财务仪表板,可用于跟踪加密货币值,这些值是在用户开发生产应用程序之后建模...Web组件最大好处是,可以在不同框架中使用相同组件,并从框架附加功能(如属性,属性事件绑定)受益。...随着新版本上线,WijmoJS 添加了Web Components In Angular示例,演示了如何在Angular应用程序中使用 WijmoJS Web组件。...同时,还提供SASS源文件,以便开发者使用自定义。 开发人员可以选择要包含在应用程序SASS模块。

7K20

【ASP.NET Core 基础知识】--前端开发--集成前端框架

跨平台开发Angular支持跨平台开发,可以构建适用于Web、移动桌面平台应用程序。通过Angular框架,可以使用相同代码库构建不同平台应用。...丰富生态系统: Angular拥有庞大生态系统,包括丰富第三方库组件,开发者提供了众多可选项,能够快速集成各种功能特性。...延迟加载资源 将不是立即需要资源设置延迟加载,比如图片懒加载、按需加载 JavaScript 等。 压缩和缓存 使用 Gzip 或 Brotli 等压缩算法来压缩静态资源。...可能需要进一步处理这些输出文件,将它们上传到 CDN、将它们复制到 ASP.NET Core 项目的静态文件目录中等。 部署到生产环境 将打包后前端资源部署到生产环境。...设置 Web 服务器: 在Web 服务器上配置好 Web 服务器软件( Nginx、Apache 等)。确保服务器能够正确地提供静态文件,并配置正确文件路径访问权限。

2800

Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

不论是初学Angular新手,还是有一定Angular开发经验开发者,了解本文中12个经典面试问题,都将会是一个深入了解学习Angular 2知识概念绝佳途径。...它是如何在Angular 2工作Angular 2不具有双向digest cycle,这是与Angular 1不同。...如何在Angular 2应用程序中使用codelyzer? 所有企业应用程序都会遵循一组编码惯例准则,以更好方式维护代码。...要在Visual Studio代码设置codelyzer,我们可以在文件 - >选项 - >用户设置添加tslint规则路径。...如何在Angular 2启用延迟加载? 大多数企业应用程序包含用各式各样用于特定业务案例模块。捆绑整个应用程序代码并完成加载,会在初始调用时,产生巨大性能开销。

17.3K80

【译】.NET Core 3.0 Preview 3关于ASP.NET Core更新内容

另外,Razor类库还不支持静态资源。如果要在库创建可与BlazorRazor组件应用程序共享组件,仍然需要使用Blazor类库。这写问题会在未来更新解决。...在本节,我们将展示如何创建一个新Angular或React模板,该模板允许我们对用户进行身份验证并访问受保护API资源。...ASP.NET Core应用程序托管客户端Angular应用程序。...ASP.NET Core应用程序包括已配置Identity Server实例,可是让Angular应用程序很方面的对用户进行身份验证,并针对ASP.NET Core应用程序受保护资源发送HTTP请求...Angular模块所构建身份验证授权支持,可以导入到您应用程序,并提供一套组件和服务来增强主应用程序模块功能。

22.6K10

从零玩转后端接口数据交互国际化

而SpringBoot提供了强大国际化(i18n)支持,允许开发不同地区语言提供定制文本资源。...那么就让我们一起 “撕开接口数据国际化面纱”,深入探讨如何在 SpringBoot 应用程序实现国际化,以满足全球用户多语言需求。...它涉及将应用程序界面元素,文本、标签、按钮等,根据用户语言和地区进行翻译适配。前端国际化通常使用资源文件、语言包或翻译服务来存储管理不同语言文本。...前端开发人员可以通过使用国际化框架或库,React Intl、Vue I18nAngular i18n等,来实现前端国际化功能。...后端国际化目标是确保应用程序能够适应不同语言和地区,并提供正确本地化数据。后端国际化可以通过使用国际化库或框架,SpringBoot I18n,来实现后端国际化功能。

2K1613

Angular JS】网站使用社会化评论插件,以及过程碰到

并且i18n对中文支持不好,网站上提供了中文选项(它是依赖网友们贡献提供多语言版本),但是我试了发现不能起作用。   因此考虑到以上缺点,我放弃了它。 B....但缺点是使用过程我感觉它Bug还是不少,同时在其网站讨论,可以看到,提出问题网友很多也很活跃。比如我发现了一个严重问题,也有一些网友提出,就是有时候必须手动再刷新一次页面,才能显示评论框。...如何在Angular JS中正确使用评论插件? 这里我还有一个需求,就是每篇文章都能讲评论区分开,也就是每篇文章显示自己评论,评论不能串,或都显示一样。...针对这个功能,其实每种插件都会提供线程Thread概念,这个功能是指针对不同Thread ID页面加载不同评论。   以多说例。   ...像disqus,多说支持就较好。   3. Angular JS插件组合使用时可能也有坑。在解决问题过程,也可以加深对Angular JS理解。   希望对你有帮助。谢谢。

1.8K80

Angular JS】网站使用社会化评论插件,以及过程碰到

并且i18n对中文支持不好,网站上提供了中文选项(它是依赖网友们贡献提供多语言版本),但是我试了发现不能起作用。     因此考虑到以上缺点,我放弃了它。 B....但缺点是使用过程我感觉它Bug还是不少,同时在其网站讨论,可以看到,提出问题网友很多也很活跃。比如我发现了一个严重问题,也有一些网友提出,就是有时候必须手动再刷新一次页面,才能显示评论框。...如何在Angular JS中正确使用评论插件? 这里我还有一个需求,就是每篇文章都能讲评论区分开,也就是每篇文章显示自己评论,评论不能串,或都显示一样。...针对这个功能,其实每种插件都会提供线程Thread概念,这个功能是指针对不同Thread ID页面加载不同评论。   以多说例。   ...像disqus,多说支持就较好。   3. Angular JS插件组合使用时可能也有坑。在解决问题过程,也可以加深对Angular JS理解。   希望对你有帮助。谢谢。

1.6K00

2020 前端开发趋势指南,先干敬!

来自:csdn https://levelup.gitconnected.com/a-recap-of-frontend-development-in-2019-1e7d07966d6c 前端在生产开发占据着越来越重要地位...紧随其后Angular Vue,一大批饱含热情开发人员二者奠定了强大用户基础。去年,Svelte 收到了很多关注,但还在为获得更多采用而努力。 2....React核心团队重点关注开发人员经验工具,提高生产力 在React v16.8 添加了大量钩子之后,其后大多数更改都相对较小,2019年发布最新版本16.14。...由于 Angular 是一个“霸道总裁”式框架,因此它要求开发人员以 Angular 方式行事,同时也开发人员提供了所有必要工具。...—— MDN 国际化(Internationalization,简称i18n)是对应用程序、规范文档设计开发,以确保这些应用规范等可以更好更容易地适应不同文化、地区、语言用户。

1.6K10

Angular 项目多国语言设置

---- theme: fancy 前言 有时候,我们开发了一个项目,需要走国际化。那么我们需要设置多国语言。下面,我们以 Angular 项目例,说说怎么针对 Angular 项目来设置多国语言。...React Vue 项目同理~ 这里我们仅考虑简体中文和美国英文两种语言,使用框架版本 @angular/core: "~12.1.0" 在日常开发,我们难免会引入第三方 UI 框架,那么这就涉及了第三方...'zh' : 'en'; 设置 UI 框架多国语言 这里 UI 框架我们以 NG-ZORRO 例,使用版本号为 ^12.1.1。...NG-ZORRO Empty 组件提示成功更改为英文: 设置自定义多国语言 那么,对于我们自定义页面内容,怎么翻译呢?...这里路径也方便我们在部署过程 url 调整,比如添加个前缀 /jimmy/ 。详见 Angular 项目路径添加指定访问前缀。

1.9K20

Kubernetes Dashboard演变

成长-大迁移 在 2018 年初,当 AngularJS 接近它生命终点时,Angular 新版本却经常发布。我们使用许多库模块都是遵循这一趋势。...幸运是,来自社区一些贡献帮助我们提供了资源支持、新 Kubernetes 版本支持、i18n 等等。...由于资源有限,不幸是,我们不能为许多不同 Kubernetes 版本提供广泛支持。...波斯语俄语本地化目前正在进行。此外,我们正在努力支持第三方主题应用程序总体设计。如你所见,很多事情正在发生。...这些是我们未来优先事项: 继续 Kubernetes 版本提供支持 不断完善对现有资源支持 继续改进认证系统 重写 API,使用 gRPC 共享 informer:这将允许我们提高应用程序性能

44310

PyCharm 2016.3 公开预览发布

此外,该IDE提供了一些高级功能,以用于支持Django框架下专业Web开发。 PyCharm 2016.3 公开预览发布表明PyCharm 2016.3已进入Beta阶段。...四、增强变量资源管理器 默认情况下启用全新简化变量视图选项,并将所有dunder变量,函数,classobj模块实例隐藏在变量资源管理器名为“特殊变量”单独组。...对于具有长值变量(numpy数组或pandas数据框),可以注意到变量浏览器特殊新“查看...”超链接。 单击它可在单独弹出式视图中查看值: ? 五、Docker Compose集成 ?...注意:使用多个Compose文件可以为不同环境或不同工作流自定义Compose应用程序。 2.一些Compose文件可以包含在docker-compose执行时用相应环境变量替换变量。...九、版本控制改进 撤消提交删除/恢复跟踪分支操作 签署提交和文件范围突出显示 Git&Mercurial日志增强 自动解决版本控制冲突 远程管理Git …… 十、平台UI更改 改进了在路径对话框查找

5.3K40

Easy Vue 国际化 - Vue I18n 插件教程

在当今全球化世界,对于web开发人员来说,创建可为来自不同地区和文化用户轻松实现本地化应用程序至关重要。...什么是 Vue I18n? Vue I18n 是 Vue.js 本地化库,可帮助开发人员轻松处理应用程序翻译。...它提供了一个简单而灵活 API,可将翻译集成到 Vue 组件,这使得创建多语言应用程序几乎不费吹灰之力。有了 Vue I18n,您可以定义不同语言翻译信息,并根据用户地域轻松地在它们之间切换。...您可以为消息单数复数形式定义不同翻译,并让 Vue I18n 插件根据数量自动选择合适翻译。...我们学习了如何设置整个流程、翻译模板文本、处理动态翻译复数化,以及使用插件提供高级功能。有了 Vue I18n开发人员可以轻松创建多语言应用程序,满足全球受众需求。

41330

ionic3升级适配angular5

昨天angular5ionic3同时发布更新了,为了用上angular5新特性,还是有必要踩下坑,当然踩坑白老鼠建议选用一个最近不用维护项目。...首次支持angular5ionic3本 然后再看下angular5版本,同样发布了两个版本,一个是普通稳定,一个是beta,其中前者如图所示修复了几个bug,那若升级,当然选择普通稳定比较好...angular5最新beta 在ionic3官网建议是更新依赖到angular5.0.0本,而根据上述说明,优先选择做了做了bug修复angular5.0.1。...更新说明: ---- 更改内容: I18n更改; 内置管道Date、Currency、Percent更改; 弃用内容: compiler: ngGetContentSelectors()在v4本被移除...在本项目中,因为没有用到那几个内置管道,也没有用到路由,所以主要是调整Http模块: 在4.xHttpClient模块被封装在@angular/common,新HttpClient被封装在@angular

2.5K40

Flutter 1.22 正式发布

支持iOS 14Android 11,新i18nl10n支持,可用于生产Google MapsWebView插件,新App Size工具等等!...Flutter 1.22在以前版本基础上构建,使开发人员能够从一个代码库多个平台构建快速,美观用户体验。我们季度稳定版本包含最新功能,性能改进错误修复,适合广泛生产使用。...新国际化本地化支持 自Flutter创立以来,Flutter已提供您应用程序国际化(i18n本地化(l10n)所需核心功能。...该软件包有助于解决诸如如何正确地将字符串(“ A in text in English”)缩写前15个字符问题。使用String类,该缩写“ A??...我们希望此版本可以帮助您iOSAndroid开发出色应用程序,我们迫不及待想看到您商店中有什么!感谢您支持-我们您打造Flutter。

7.4K20

8分钟你详解React、Angular、Vue三大框架

当前世界,技术发展非常迅速并且变化迅速,开发者需要更多开发工具来解决不同问题。...变量App是Greeter组件一个实例,其中问候语属性被设置 "Hello World!"。...它是专门构建用户界面而设计,因此并不包括许多一些开发者认为构建应用程序所需工具。 这使得开发者可以选择任何一个库来完成诸如执行网络访问或本地数据存储等任务。...支持Angular Universal,可以在服务器上运行Angular应用程序。 版本9 Angular 9已于2020年2月6日发布。第9在默认情况下使用Ivy编译器。...上面的代码: 在websitename.com/user/设置一个前端路径。 这将在(const User...)定义User组件呈现。

22.1K20

打磨 IT 技能、实践全栈开发:Demo 项目之母 RealWorld | 开源日报 No.117

React、Angular、Node Django 等技术驱动。...可自定义选择:您可以任意组合喜欢或熟悉前端 (React,Angular 等) 与后台 (Node,Django 等),并观察它们如何共同打造出名为 Conduit 精美设计全栈应用程序。...支持多种语言 适用于生产环境 支持不同类型资源:write-article, read-log) 可以根据角色或组进行 RBAC 访问控制 用户可以在不同领域/租户拥有不同角色集合 pynecone-io...响应式设计:通过使用关键字参数进行样式设置,以及嵌套不同组件来创建复杂布局,在 Reflex 实现响应式设计非常简单直观。...Marvin 非常适合以下方面: 可伸缩 API、数据管道代理 借助强大快速分类器进行开发 从非结构化文本中提取结构化且类型安全数据 应用程序生成合成数据 在应用程序解决规模上复杂推断任务 同时还可以定制

15110
领券