详解使用angular-cli发布i18n多国语言Angular应用

在模板html标签中增加i18n

<h1 i18n>Hello world!</h1>

使用ng命令产生xlf格式的message.xlf文件

$ ng xi18n --output-path src/i18n

命令执行后，生成 src/i18n/messages.xlf 文件

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file source-language="en" datatype="plaintext" original="ng2.template">
  <body>
   <trans-unit id="5816217f424111ae4c91dd72ee1db0ae252763b5" datatype="html">
    <source>Hello World!</source>
    <target/>
   </trans-unit>
  </body>
 </file>
</xliff>

复制message.xlf,message.en.xlf(英文版本) message.zh.xlf中文版本

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file source-language="en" datatype="plaintext" original="ng2.template">
  <body>
   <trans-unit id="5816217f424111ae4c91dd72ee1db0ae252763b5" datatype="html">
    <source>Hello World!</source>
    <target>Hello World!</target>
   </trans-unit>
  </body>
 </file>
</xliff>
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
 <file source-language="en" datatype="plaintext" original="ng2.template">
  <body>
   <trans-unit id="5816217f424111ae4c91dd72ee1db0ae252763b5" datatype="html">
    <source>Hello World!</source>
    <target>哈喽，世界！</target>
   </trans-unit>
  </body>
 </file>
</xliff>
$ ng serve --aot \
      --i18n-file=src/i18n/messages.zh.xlf \
      --locale=zh \
      --i18n-format=xlf

现在浏览，显示的是中文版本

$ for lang in en zh; do \
  ng build --output-path=dist/$lang \
       --aot \
       -prod \
       --bh /$lang/ \
       --i18n-file=src/i18n/messages.$lang.xlf \
       --i18n-format=xlf \
       --locale=$lang; \
 done

这个命令执行完毕后，生成了en和zh两种语言版本。http://localhost:4200/en访问英文版本，http://localhost:4200/zh访问中文版本。--bh指定默认版本，http://localhost:4200访问时，跳转到默认版本。

修改package.json文件，加入脚本

{
 [...]
 "scripts": {
  [...]
  "build-i18n": "for lang in en zh; do ng build --output-path=dist/$lang --aot -prod --bh /$lang/ --i18n-file=src/i18n/messages.$lang.xlf --i18n-format=xlf --locale=$lang; done"
 }
 [...]
}

这样就可以执行npm run build-i18n 命令，一次build多个语言版本了。

windows用户命令

> ng build --output-path=dist/zh --aot -prod --bh /zh/ --i18n-file=src/i18n/messages.zh.xlf --i18n-format=xlf --locale=zh
> ng build --output-path=dist/en --aot -prod --bh /en/ --i18n-file=src/i18n/messages.en.xlf --i18n-format=xlf --locale=en

package.json脚本

"scripts": {
  "build-i18n:es": "ng build --output-path=dist/zh --aot -prod --bh /zh/ --i18n-file=src/i18n/messages.zh.xlf --i18n-format=xlf --locale=zh",
  "build-i18n:en": "ng build --output-path=dist/en --aot -prod --bh /en/ --i18n-file=src/i18n/messages.en.xlf --i18n-format=xlf --locale=en",
  "build-i18n": "npm run build-i18n:en ; npm run build-i18n:zh"
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅析如何利用angular结合translate为项目实现国际化

    浅析如何利用angular结合translate为项目实现国际化

    前言 利用H5项目第一版本已经上线,话说有了第一期就有了第二期,这不要为第二期做准备了,老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能,好吧我表示没怎么接触过,这一个礼拜自己也对Angular基本的用法已经有了初步的了解以及熟悉,于是乎就有了这篇文章的产生.其实没我什么事,我也是主动请缨说交给我,因为年底了嘛,也没什么事,不急不忙的,一天也乐得清闲,还不给自己找点事做,而且还能在做的过程中能学到东西,何乐而不为呢!Angular已盛行一时,但请恕

  • AngularJs 国际化（I18n/L10n）详解

    一.I18n and L10n in AngularJS 1. 什么是I18n和L10n? 国际化(Internationalization),简称I18n,是让产品开发在一个他们可以简单地对产品进行语言.文化的本地化的方法的规范.本地化(Localization),简称L10n,一个使得应用.文本有适应特殊的文化或者语言市场的能力的规范.对于应用开发者,使一个程序国际化,意味着需要从程序中抽取所有字符串和其他区域较为特别的地方(例如日期和货币格式).使一个程序本地化,意味着需要提供根据I18n

  • Angular2中如何使用ngx-translate进行国际化

    Angular2中如何使用ngx-translate进行国际化

    相较于AngularJS中的ng-translate, angular2也有适合自己的国际化模块,就是ngx-translate. 项目地址:https://github.com/ngx-translate/core 使用angular-cli初始化项目: ng new my-project 使用npm安装ngx-translate模块 npm install --save @ngx-translate/core npm install --save @ngx-translate/http-lo

  • Angular4项目中添加i18n国际化插件ngx-translate的步骤详解

    Angular4项目中添加i18n国际化插件ngx-translate的步骤详解

    前言 本文将介绍在 Angular4 项目中配置 ngx-translate i18n 国际化组件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: npm 安装 ngx-translate 模块 npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save 在 Angular 项目配置 app.module.ts 添加 import { TranslateLoader, Tr

  • 详解使用angular-cli发布i18n多国语言Angular应用

    在模板html标签中增加i18n <h1 i18n>Hello world!</h1> 使用ng命令产生xlf格式的message.xlf文件 $ ng xi18n --output-path src/i18n 命令执行后,生成 src/i18n/messages.xlf 文件 <?xml version="1.0" encoding="UTF-8" ?> <xliff version="1.2" xml

  • Angular CLI发布路径的配置项浅析

    前言 项目发布总需要根据具体情况配置打包,Angular CLI 提供了方便的打包工具 "ng build".其中关于发布路径的配置有几样,这里总结汇总它们. base-href 它指定的是项目构建的目录结构,例如设置为 "deploy-test",最后的打包结果就在 dist/deploy-test 目录下. 项目新建时,在 index.html 下默认是 <base href="/" rel="external nofollo

  • 详解基于Vue cli开发修改外部组件Vant默认样式

    详解基于Vue cli开发修改外部组件Vant默认样式

    前言 在引入外部组件的时候,想要修改默认样式,可以通过class修改,但一般会有权重不够等各种原因,官网其实列出了一套主题定制的方案,通过覆盖配置文件来修改样式,官网地址:主题定制 提示:以下是本篇文章正文内容,下面案例可供参考 一.Less 因为Vant 使用了 Less 对样式进行预处理,并内置了一些样式变量,可以通过替换样式变量即可定制你自己需要的主题. 给你的项目配置less: npm install less --save-dev npm install less-loader --s

  • 详解如何在code block创建一个C语言的项目

    详解如何在code block创建一个C语言的项目

    有两种方法创建一个项目 1.在开始 界面 2.在菜单栏创建 接下来就是新建项目的步骤啦 1.在点了create 之后弹出来的窗口中 2.接下来就是c还是c++的问题 其实c和c++语法基本互通的(毕竟C++要兼容C),只是生成的后缀名不一样.anyway,如果是看的C语言语法书的话,还是选择C吧(其实C++中可以用到C语法,只是头文件要自己加,C就C吧) 3.填 写项目的基本资料 4. 5. 6.字好小怎么办?? 按照ctrl+鼠标向上滑轮(或者+号)(是小数字键盘上的+哦) 7. 那么这两个绿

  • 详解spring Boot Cli的配置和使用

    详解spring Boot Cli的配置和使用

    SpringBootCLI是一个命令行工具,可用于快速搭建基于spring的原型.它支持运行Groovy脚本,这也就意味着你可以使用类似Java的语法,但不用写很多的模板代码. Spring Boot不一定非要配合CLI使用,但它绝对是Spring应用取得进展的最快方式( 你咋不飞上天呢?) . 首先要下载分发包,下载地址如下 https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#getting-started

  • 详解基于vue-cli3快速发布一个fullpage组件

    详解基于vue-cli3快速发布一个fullpage组件

    前言 想必大家都看过fullpage.js--这是一款非常好用的翻页插件. 现在vue非常流行,大家想不想发布一个组件给别人使用呢? 这里我们基于vue-cli3快速搭建一个简单的fullpage组件给别人使用,当然你也可以做你感兴趣的组件发布给别人用~ GITHUB 链接 开始 准备 $ npm i -g @vue/cli #全局vue-cli3 通过查看vue-cli3官网了解,创建一个新的普通项目. 思考 一开始要想别人如何调用我们写的组件,通过挂载vue实例方法(this.$alert)

  • 详解如何创建并发布一个 vue 组件

    详解如何创建并发布一个 vue 组件

    步骤 创建 vue 的脚手架 npm install -g @vue/cli vue init webpack 绑定 git 项目 cd existing_folder git init git remote add origin http://gitlab.alipay-inc.com/ampg/my-projec.git git add . git commit git push -u origin master 写组件 创建组件 src/components/xxx.vue 例如: <te

  • 详解Asp.Net Core 发布和部署（ MacOS + Linux + Nginx ）

    详解Asp.Net Core 发布和部署（ MacOS + Linux + Nginx ）

    前言 在上篇文章中,主要介绍了 Dotnet Core Run 命令,这篇文章主要是讲解如何在Linux中,对 Asp.Net Core 的程序进行发布和部署. 目录 新建一个 WebApp 项目 发布到 Linux,Mac OS 使用 Nginx 进行反向代理 新建一个 WebApp 项目 在 Asp.Net Core 项目中,我们使用 dotnet new -t WebApp 命令和创建一个新的空的 Web 应用程序. 以下是我在 Mac 中的截图: 主要是用以下几个命令: mkdir He

  • 详解使用DotNet CLI创建自定义的WPF项目模板

    本文主要介绍了使用DotNet CLI创建自定义的WPF项目模板,分享给大家,具体如下: 描述 当我们安装完 DotNetCore 3.0 版本的 SDK 后,我们就可以创建基于 DotNetCore 的 WPF 项目模板,通过如下 CLI 可以方便快捷的创建并运行我们的项目: dotnet new wpf -n WpfApp cd WpfApp dotnet restore dotnet run 做过 WPF 开发的朋友都知道,这个项目模板肯定不符合我们的预期,我们希望我们的项目模板能够加入

  • 详解如何制作并发布一个vue的组件的npm包

    前提:1.会vue基础,以及vue的组件(官网:https://cn.vuejs.org/v2/guide/components.html)相关的基础. 因为本文主要是讲如何把一个vue组件做成npm包并发布. 分为2大步骤: 一.按照相应格式写我们的vue代码(就如同写一个jquery插件时.有其固定的格式一样). 二.发布到npm上的流程 一.书写一个vue组件 不用脚手架,我们自己从头开始做起,因为脚手架会附带很多没用的东西. 就做一个最简单的vue组件:就是传入用户名字,页面打印出'he

随机推荐