首页
学习
活动
专区
工具
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"目录下。

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

相关·内容

Angular v18 现已推出!

开发者预览版中的信号 API在 Angular 版本 17.1 和 17.2 中,我们宣布了新的信号输入、基于信号的查询和新的输出语法。在我们的信号指南中了解如何使用 API。...值得一提的是,Angular 和 Wiz 过去一直服务于两个不同的应用领域——Wiz 主要用于以消费者为中心的应用,高度关注性能,而 Angular 则专注于生产力和开发者体验。...使用 Firebase App Hosting 为您的应用提供强大的托管功能随着 Web 平台的日益复杂,应用程序的托管在性能、可靠性、生产力和规模方面起着至关重要的作用。...App Hosting 简化了动态 Angular 应用程序的开发和部署,提供内置框架支持、GitHub 集成以及与其他 Firebase 产品(如 Authentication、Cloud Firestore...由于 webpack 不在新构建系统的关键路径上,我们将对 webpack 的依赖设置为可选,这使我们能够将 Angular CLI 的依赖项总数减少 50% 以上!

28010

如何在 Windows 上安装 Angular:Angular 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 提供了一个完整的工具链,用于在本地计算机上开发前端应用程序。

61400
  • Angular 16 正式版发布

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

    2.6K10

    看看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指令运行。

    39420

    纯前端控件集 WijmoJS 2018V2发布,在React、Vue和Angular中更易用

    开发人员可以实时更改属性和绑定事件,并将所做更改保存回 Angular应用程序中。 要在VSCode中安装此扩展,请单击VS Marketplace上Designer设置中的“安装”按钮。...新的React / Redux加密货币跟踪应用程序 本次更新为使用React和Redux的 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 等)。确保服务器能够正确地提供静态文件,并配置正确的文件路径和访问权限。

    23900

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

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

    17.4K80

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

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

    22.7K10

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

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

    4.1K1613

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

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

    1.9K80

    【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 项目路径添加指定的访问前缀。

    2K20

    Kubernetes Dashboard的演变

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

    47310

    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.4K40

    ionic3升级适配angular5

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

    2.5K40

    Flutter 1.22 正式发布

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

    7.5K20

    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.2K20

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

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

    74530
    领券