├── src
    ├── assets
    │   └── .gitkeep
    ├── main.server.ts
    ├── favicon.ico
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── app
    │   ├── 404
    │   │   ├── 404.component.scss
    │   │   ├── 404.component.html
    │   │   └── 404.component.ts
    │   ├── locales.values.ts
    │   ├── templates
    │   │   ├── templates.component.scss
    │   │   ├── templates.component.ts
    │   │   └── templates.component.html
    │   ├── tutorials
    │   │   ├── tutorials.component.scss
    │   │   ├── tutorials.component.ts
    │   │   └── tutorials.component.html
    │   ├── app.component.scss
    │   ├── app.server.module.ts
    │   ├── app.component.ts
    │   ├── app.component.html
    │   └── app.module.ts
    ├── styles.css
    ├── tsconfig.app.json
    ├── index.html
    ├── main.ts
    ├── tsconfig.server.json
    ├── polyfills.ts
    └── locale
    │   ├── messages.xlf
    │   ├── messages.en.xlf
    │   └── messages.es.xlf
├── Procfile
├── static.paths.ts
├── .gitignore
├── tsconfig.json
├── server.tsconfig.json
├── LICENSE
├── README.md
├── server.ts
├── package.json
├── tslint.json
└── angular.json


/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/Procfile:
--------------------------------------------------------------------------------
1 | web: npm run start:heroku
2 | 


--------------------------------------------------------------------------------
/src/main.server.ts:
--------------------------------------------------------------------------------
1 | export {AppServerModule} from './app/app.server.module';
2 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nirzaf/angular-translate/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/static.paths.ts:
--------------------------------------------------------------------------------
1 | export const ROUTES = [
2 |   '/',
3 |   '/templates',
4 |   '/**'
5 | ];
6 | 


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/app/404/404.component.scss:
--------------------------------------------------------------------------------
1 | .container {
2 |   text-align:center;
3 |   min-height: calc(100vh - 20px);
4 | }
5 | 


--------------------------------------------------------------------------------
/src/app/404/404.component.html:
--------------------------------------------------------------------------------
1 | <div class="container">
2 |   <h1 i18n="@@notFoundTitle">
3 |     Not found 404
4 |   </h1>
5 | </div>
6 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | @import "~@angular/material/prebuilt-themes/indigo-pink.css";
3 | @import "~bootstrap/dist/css/bootstrap.css";
4 | @import "~ionicons/dist/css/ionicons.css";
5 | 


--------------------------------------------------------------------------------
/src/app/404/404.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-404',
 5 |   templateUrl: './404.component.html',
 6 |   styleUrls: ['./404.component.scss']
 7 | })
 8 | export class PageNotFoundComponent {
 9 | 
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/locales.values.ts:
--------------------------------------------------------------------------------
 1 | export interface ILocale {
 2 |   code: string;
 3 |   text: string;
 4 | }
 5 | export const locales: ILocale[] = [
 6 |   {
 7 |     code: 'en',
 8 |     text: 'English',
 9 |   },
10 |   {
11 |     code: 'es',
12 |     text: 'Español',
13 |   }
14 | ];
15 | 


--------------------------------------------------------------------------------
/src/app/templates/templates.component.scss:
--------------------------------------------------------------------------------
 1 | .title { 
 2 |   text-align:center;
 3 |   margin-top: 30px;
 4 | }
 5 | 
 6 | .paragraphs{
 7 |   margin-left: 20px;
 8 |   margin-top: 30px;
 9 |   margin-right: 20px;
10 | }
11 | 
12 | .container{
13 |   min-height: calc(100vh - 20px);
14 | }
15 | 


--------------------------------------------------------------------------------
/src/app/tutorials/tutorials.component.scss:
--------------------------------------------------------------------------------
 1 | .title { 
 2 |   text-align:center;
 3 |   margin-top: 30px;
 4 | }
 5 | 
 6 | .paragraphs{
 7 |   margin-left: 20px;
 8 |   margin-top: 30px;
 9 |   margin-right: 20px;
10 | }
11 | 
12 | .container{
13 |   min-height: calc(100vh - 20px);
14 | }
15 | 


--------------------------------------------------------------------------------
/src/app/tutorials/tutorials.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-home',
 5 |   templateUrl: './tutorials.component.html',
 6 |   styleUrls: ['./tutorials.component.scss']
 7 | })
 8 | export class TutorialsComponent {
 9 | 
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/templates/templates.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-templates',
 5 |   templateUrl: './templates.component.html',
 6 |   styleUrls: ['./templates.component.scss']
 7 | })
 8 | export class TemplatesComponent {
 9 | 
10 | }
11 | 


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "baseUrl": "./",
 6 |     "module": "es2015",
 7 |     "types": [
 8 |       "node"
 9 |     ]
10 |   },
11 |   "exclude": [
12 |     "test.ts",
13 |     "**/*.spec.ts"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>i18n Demo - by AngularTemplates</title>
 6 |   <base href="/">
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 | </head>
11 | <body>
12 |   <app-root></app-root>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 | 
6 | export const environment = {
7 |   production: false
8 | };
9 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import {enableProdMode} from '@angular/core';
 2 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 3 | 
 4 | import {AppModule} from './app/app.module';
 5 | import {environment} from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | document.addEventListener('DOMContentLoaded', () => {
12 |   platformBrowserDynamic().bootstrapModule(AppModule);
13 | });
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .idea
 2 | .DS_Store
 3 | .vscode
 4 | 
 5 | package-lock.json
 6 | 
 7 | # Built #
 8 | /__build__/
 9 | /__server_build__/
10 | /node_modules/
11 | /typings/
12 | /tsd_typings/
13 | /dist/
14 | /dist-server/
15 | /compiled/
16 | 
17 | # Node #
18 | *.log
19 | /npm-debug.log.*
20 | 
21 | # Webpack #
22 | webpack.records.json
23 | 
24 | # Angular #
25 | *.ngfactory.ts
26 | *.css.shim.ts
27 | *.ngsummary.json
28 | *.metadata.json
29 | *.shim.ngstyle.ts
30 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "outDir": "./dist/out-tsc",
 5 |     "sourceMap": true,
 6 |     "declaration": false,
 7 |     "moduleResolution": "node",
 8 |     "emitDecoratorMetadata": true,
 9 |     "experimentalDecorators": true,
10 |     "target": "es5",
11 |     "typeRoots": [
12 |       "node_modules/@types"
13 |     ],
14 |     "lib": [
15 |       "es2017",
16 |       "dom"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/server.tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "outDir": "./dist",
 5 |     "sourceMap": true,
 6 |     "declaration": false,
 7 |     "moduleResolution": "node",
 8 |     "emitDecoratorMetadata": true,
 9 |     "experimentalDecorators": true,
10 |     "target": "es5",
11 |     "typeRoots": [
12 |       "node_modules/@types"
13 |     ],
14 |     "lib": [
15 |       "es2017",
16 |       "dom"
17 |     ]
18 |   },
19 |   "include": ["server.ts"]
20 | }
21 | 


--------------------------------------------------------------------------------
/src/tsconfig.server.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "baseUrl": "./",
 6 |     // Set the module format to "commonjs":
 7 |     "module": "commonjs",
 8 |     "types": [
 9 |       "node"
10 |     ]
11 |   },
12 |   "exclude": [
13 |     "test.ts",
14 |     "**/*.spec.ts"
15 |   ],
16 |   // Add "angularCompilerOptions" with the AppServerModule you wrote
17 |   // set as the "entryModule".
18 |   "angularCompilerOptions": {
19 |     "entryModule": "app/app.server.module#AppServerModule"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
 1 | .sidenav {
 2 |   background-color: #ddd;
 3 | 
 4 |   .sidenav-list {
 5 |     margin-top: 60px;
 6 |     color: #FFF;
 7 | 
 8 |     .sidenav-list-item {
 9 |       color: #FFF;
10 |     }
11 |   }
12 | }
13 | 
14 | .toolbar {
15 | 
16 |   background-color: #DD0031;
17 | 
18 |   .menu-icon{
19 |     margin-right: 20px;
20 |     color: #FFF;
21 |   }
22 | 
23 |   .title {
24 |     color: #FFF;
25 |   }
26 | 
27 |   .spacer {
28 |     flex: 1 1 auto;
29 |   }
30 | 
31 |   .lang-title {
32 |     color: #FFF;
33 |     font-size: 16px;
34 |   }
35 | 
36 |   .lang-option {
37 |     color: #FFF;
38 |     margin-right: 15px;
39 |     font-size: 16px;
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/app/app.server.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {ServerModule, ServerTransferStateModule} from '@angular/platform-server';
 3 | import {ModuleMapLoaderModule} from '@nguniversal/module-map-ngfactory-loader';
 4 | 
 5 | import {AppModule} from './app.module';
 6 | import {AppComponent} from './app.component';
 7 | 
 8 | @NgModule({
 9 |   imports: [
10 |     // The AppServerModule should import your AppModule followed
11 |     // by the ServerModule from @angular/platform-server.
12 |     AppModule,
13 |     ServerModule,
14 |     ModuleMapLoaderModule,
15 |     ServerTransferStateModule,
16 |   ],
17 |   // Since the bootstrapped component is not inherited from your
18 |   // imported AppModule, it needs to be repeated here.
19 |   bootstrap: [AppComponent],
20 | })
21 | export class AppServerModule {}
22 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, Inject, LOCALE_ID } from '@angular/core';
 2 | import { Router, NavigationEnd } from '@angular/router';
 3 | import { locales } from './locales.values';
 4 | import { filter } from 'rxjs/operators';
 5 | 
 6 | @Component({
 7 |   selector: 'app-root',
 8 |   templateUrl: './app.component.html',
 9 |   styleUrls: ['./app.component.scss']
10 | })
11 | export class AppComponent {
12 |   locales = [];
13 |   currentUrl = "";
14 | 
15 |   constructor(
16 |     @Inject(LOCALE_ID) public locale: string,
17 |     private router: Router
18 |   ) { }
19 | 
20 |   ngOnInit() {
21 | 
22 |     this.locales = locales;
23 | 
24 |     this.router.events
25 |     .pipe(filter(event => event instanceof NavigationEnd))
26 |      .subscribe((event:NavigationEnd) => {
27 |        this.currentUrl = this.router.url;
28 |      });
29 | 
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <mat-drawer-container autosize>
 2 | 
 3 |   <!-- top bar -->
 4 |   <mat-toolbar class="toolbar">
 5 |     <i (click)="drawer.toggle()" class="icon ion-md-menu menu-icon"></i>
 6 |     <span i18n="@@toolbar-title" class="title">My Application</span>
 7 |     <span class="spacer"></span>
 8 | 
 9 |     <mat-list-item *ngFor="let locale of locales">
10 |       <a class="lang-option" [href]="'/' + locale.code + currentUrl">{{ locale.text }}</a>
11 |     </mat-list-item>
12 |   </mat-toolbar>
13 | 
14 |   <!-- sidemenu -->
15 |   <mat-drawer #drawer class="sidenav" mode="side">
16 |     <mat-list class="sidenav-list">
17 |       <mat-list-item class="sidenav-list-item">
18 |         <a i18n="@@tutorial-button" [routerLink]="['/']">Tutorials</a>
19 |       </mat-list-item>
20 |       <mat-list-item>
21 |         <a i18n="@@template-button" [routerLink]="['/templates']">Templates</a>
22 |       </mat-list-item>
23 |     </mat-list>
24 |   </mat-drawer>
25 | 
26 |   <router-outlet></router-outlet>
27 | </mat-drawer-container>
28 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 AngularTemplates
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/app/templates/templates.component.html:
--------------------------------------------------------------------------------
 1 | <div class="container">
 2 |   <div class="title">
 3 |     <h1 i18n="@@templatesTitle">
 4 |       Templates
 5 |     </h1>
 6 |   </div>
 7 |   <div class="paragraphs">
 8 |     <p i18n="@@FirstParagraphTemplates">
 9 |       <b><a href="https://angular-templates.io/product/angular-site-template" target="_blank">Angular 6 Site Template</a></b>: Reuse the beautiful, responsive and flexible
10 |       custom components we built for this Angular 6 Template. With Bootstrap 4,
11 |       Angular Universal (Server Side Rendering), SEO, Lazy Loading and a detailed
12 |       documentation on how to get started building Angular apps. Tons of use cases
13 |       implemented the Angular way such as authentication flows, product listing,
14 |       filtering, forms, routing guards and more.
15 |     </p>
16 |     <p i18n="@@SecondParagraphTemplates">
17 |       <b><a href="https://angular-templates.io/product/angular-admin-template" target="_blank">Angular Admin Template</a></b>: Created with performance and ease of
18 |       development in mind, this Angular 5 web template is something you will love.
19 |       It includes all the components that you might need inside a project and a
20 |       detailed documentation on how to get started.
21 |     </p>
22 |   </div>
23 | </div>
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Angular i18n Example App
 2 | This project was built using the [Universal Starter](https://github.com/angular/universal-starter/) repo as a base. However, we deleted some code we didn't use for this example.
 3 | 
 4 | ### About this repo
 5 | This repo is part of a tutorial where we explain how internationalize an Angular 6 application, also know as i18n.
 6 | Internationalizing our app means that it will be available in different languages, we will have a multi language angular website. The good news is that the new Angular CLI can help us with this task.
 7 | 
 8 | ### Step by step tutorial
 9 | https://angular-templates.io/tutorials/about/angular-internationalization-i18n-multi-language-app
10 | 
11 | ### Installation
12 | * `npm install`
13 | 
14 | ### Development (Client-side only rendering)
15 | * run `npm run start` which will start `ng serve`
16 | 
17 | ### Demo
18 | https://i18n-demo-angular-templates.herokuapp.com/
19 | 
20 | ### Build your app for a specific language
21 | **`ng serve --configuration=es`**
22 | or
23 | **`ng serve --configuration=en`**
24 | 
25 | ### Build your app for Production with i18n multi language
26 | **`npm run build:i18n-ssr && npm run serve:ssr`** - Compiles your application and spins up a Node Express to serve your Universal application on `http://localhost:4000`.
27 | 
28 | # License
29 | [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](/LICENSE)
30 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | import { RouterModule } from '@angular/router';
 4 | import { TransferHttpCacheModule } from '@nguniversal/common';
 5 | 
 6 | import { AppComponent } from './app.component';
 7 | import { PageNotFoundComponent } from './404/404.component';
 8 | import { TemplatesComponent } from './templates/templates.component';
 9 | import { TutorialsComponent } from './tutorials/tutorials.component';
10 | 
11 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
12 | import { MatToolbarModule } from '@angular/material/toolbar';
13 | import { MatSidenavModule } from '@angular/material/sidenav';
14 | import { MatListModule } from '@angular/material/list';
15 | 
16 | @NgModule({
17 |   declarations: [
18 |     AppComponent,
19 |     TutorialsComponent,
20 |     TemplatesComponent,
21 |     PageNotFoundComponent
22 |   ],
23 |   imports: [
24 |     BrowserModule.withServerTransition({appId: 'my-app'}),
25 |     RouterModule.forRoot([
26 |       { path: '', component: TutorialsComponent},
27 |       { path: 'templates', component: TemplatesComponent},
28 |       { path: '**', component: PageNotFoundComponent }
29 |     ]),
30 |     TransferHttpCacheModule,
31 |     BrowserAnimationsModule,
32 |     MatToolbarModule,
33 |     MatSidenavModule,
34 |     MatListModule
35 |   ],
36 |   providers: [],
37 |   bootstrap: [AppComponent]
38 | })
39 | export class AppModule { }
40 | 


--------------------------------------------------------------------------------
/server.ts:
--------------------------------------------------------------------------------
 1 | import 'zone.js/dist/zone-node';
 2 | import 'reflect-metadata';
 3 | import {enableProdMode} from '@angular/core';
 4 | // Express Engine
 5 | import {ngExpressEngine} from '@nguniversal/express-engine';
 6 | // Import module map for lazy loading
 7 | import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
 8 | 
 9 | import * as express from 'express';
10 | import {join} from 'path';
11 | 
12 | // Faster server renders w/ Prod mode (dev mode never needed)
13 | enableProdMode();
14 | 
15 | // Express server
16 | const app = express();
17 | 
18 | const PORT = process.env.PORT || 4000;
19 | const DIST_FOLDER = join(process.cwd(), 'dist');
20 | 
21 | // * NOTE :: leave this as require() since this file is built Dynamically from webpack
22 | const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./server/main');
23 | 
24 | // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
25 | app.engine('html', ngExpressEngine({
26 |   bootstrap: AppServerModuleNgFactory,
27 |   providers: [
28 |     provideModuleMap(LAZY_MODULE_MAP)
29 |   ]
30 | }));
31 | 
32 | app.set('view engine', 'html');
33 | app.set('views', join(DIST_FOLDER, 'browser'));
34 | 
35 | 
36 | // Server static files from /browser
37 | app.get('*.*', express.static(join(DIST_FOLDER, 'browser'), {
38 |   maxAge: '1y'
39 | }));
40 | 
41 | // All regular routes use the Universal engine
42 | app.get('*', (req, res) => {
43 | //this is for i18n
44 |   const supportedLocales = ['en', 'es'];
45 |   const defaultLocale = 'en';
46 |   const matches = req.url.match(/^\/([a-z]{2}(?:-[A-Z]{2})?)\//);
47 | 
48 |   //check if the requested url has a correct format '/locale' and matches any of the supportedLocales
49 |   const locale = (matches && supportedLocales.indexOf(matches[1]) !== -1) ? matches[1] : defaultLocale;
50 | 
51 |   res.render(`${locale}/index`, { req });
52 | });
53 | 
54 | // Start up the Node server
55 | app.listen(PORT, () => {
56 |   console.log(`Node Express server listening on http://localhost:${PORT}`);
57 | });
58 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "i18n-demo",
 3 |   "version": "0.0.1",
 4 |   "license": "MIT",
 5 |   "scripts": {
 6 |     "start:heroku": "node dist/server",
 7 |     "heroku-prebuild": "npm install",
 8 |     "heroku-postbuild": "npm run build:i18n-ssr",
 9 |     "ng": "ng",
10 |     "start": "ng serve",
11 |     "build": "ng build",
12 |     "lint": "ng lint i18n-demo",
13 |     "build:client-and-server-bundles-i18n": "ng run i18n-demo:build:production-es && ng run i18n-demo:build:production-en && ng run i18n-demo:server:production",
14 |     "build:client-and-server-bundles": "ng build --prod && ng run i18n-demo:server:production",
15 |     "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
16 |     "build:i18n-ssr": "npm run build:client-and-server-bundles-i18n && npm run compile:server",
17 |     "compile:server": "tsc -p server.tsconfig.json",
18 |     "serve:ssr": "node dist/server"
19 |   },
20 |   "private": true,
21 |   "dependencies": {
22 |     "@angular/animations": "^6.1.2",
23 |     "@angular/cdk": "^6.4.5",
24 |     "@angular/common": "^6.0.0",
25 |     "@angular/compiler": "^6.0.0",
26 |     "@angular/core": "^6.0.0",
27 |     "@angular/forms": "^6.0.0",
28 |     "@angular/http": "^6.0.0",
29 |     "@angular/material": "^6.4.5",
30 |     "@angular/platform-browser": "^6.0.0",
31 |     "@angular/platform-browser-dynamic": "^6.0.0",
32 |     "@angular/platform-server": "^6.0.0",
33 |     "@angular/router": "^6.0.0",
34 |     "@nguniversal/common": "^6.0.0",
35 |     "@nguniversal/express-engine": "^6.0.0",
36 |     "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
37 |     "bootstrap": "^4.1.3",
38 |     "core-js": "^2.4.1",
39 |     "ionicons": "^4.3.0",
40 |     "rxjs": "^6.2.2",
41 |     "zone.js": "^0.8.26"
42 |   },
43 |   "devDependencies": {
44 |     "@angular-devkit/build-angular": "0.6.0",
45 |     "@angular/cli": "6.0.0",
46 |     "@angular/compiler-cli": "^7.2.12",
47 |     "@angular/language-service": "^6.0.0",
48 |     "@types/node": "^8.0.30",
49 |     "codelyzer": "^4.0.2",
50 |     "cpy-cli": "^1.0.1",
51 |     "express": "^4.15.2",
52 |     "http-server": "^0.10.0",
53 |     "pre-commit": "^1.2.2",
54 |     "reflect-metadata": "^0.1.10",
55 |     "ts-loader": "^4.2.0",
56 |     "tslint": "^5.7.0",
57 |     "typescript": "3.1.6"
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 | 
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
39 | 
40 | /** Evergreen browsers require these. **/
41 | import 'core-js/es6/reflect';
42 | import 'core-js/es7/reflect';
43 | 
44 | 
45 | /**
46 |  * Required to support Web Animations `@angular/animation`.
47 |  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
48 |  **/
49 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
50 | 
51 | 
52 | 
53 | /***************************************************************************************************
54 |  * Zone JS is required by Angular itself.
55 |  */
56 | import 'zone.js/dist/zone';  // Included with Angular CLI.
57 | 
58 | 
59 | 
60 | /***************************************************************************************************
61 |  * APPLICATION IMPORTS
62 |  */
63 | 
64 | /**
65 |  * Date, currency, decimal and percent pipes.
66 |  * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
67 |  */
68 | // import 'intl';  // Run `npm install --save intl`.
69 | /**
70 |  * Need to import at least one locale-data with intl.
71 |  */
72 | // import 'intl/locale-data/jsonp/en';
73 | 


--------------------------------------------------------------------------------
/src/app/tutorials/tutorials.component.html:
--------------------------------------------------------------------------------
 1 | <div class="container">
 2 |   <div class="title">
 3 |     <h1 i18n="@@homeTitle">
 4 |       Tutorials
 5 |     </h1>
 6 |   </div>
 7 |   <div class="paragraphs">
 8 |     <p i18n="@@FirstParagraphTutorials">
 9 |       <b><a href="https://angular-templates.io/tutorials/about/firebase-authentication-with-angular" target="_blank">Firebase Authentication with Angular</a></b>: When developing web applications, any
10 |       type of authentication feature is necessary. If you think of the many social
11 |       platforms and email sign in options available, authentication looks like a
12 |       very complex task. In this Angular 5 tutorial we will explore how to setup
13 |       an email/password as well as social login authentication workflows for
14 |       Angular 5 apps using AngularFire2 library.
15 |     </p>
16 |     <p i18n="@@SecondParagraphTutorials">
17 |       <b><a href="https://angular-templates.io/tutorials/about/learn-angular-from-scratch-step-by-step" target="_blank">Learn Angular from scratch step by step</a></b>: Angular step by step tutorial
18 |       covering from basic concepts of Angular Framework to building a complete
19 |       Angular 5 app using Angular Material components. We will go through the main
20 |       building blocks of an Angular application as well as the best practices for
21 |       building a complete app with Angular. Also, this tutorial shows how to setup
22 |       your development environment and workflow so you can start developing Angular
23 |       apps right away.
24 |     </p>
25 |     <p i18n="@@ThirdParagraphTutorials">
26 |       <b><a href="https://angular-templates.io/tutorials/about/angular-forms-and-validations" target="_blank">Angular 5 Forms and Validations</a></b>: We created this angular forms
27 |       tutorial to help you learn everything about Angular forms validations in
28 |       angular 5 apps. These angular forms examples are updated using the best
29 |       (coding) practices to build Angular 5 apps with Material Design.
30 |     </p>
31 |     <p i18n="@@FourthParagraphTutorials">
32 |       <b><a href="https://angular-templates.io/tutorials/about/learn-how-to-build-a-mean-stack-application" target="_blank">Learn how to build a MEAN stack application in this Angular tutorial</a></b>:
33 |       The goal of this Angular tutorial is to guide you through the coding of a
34 |       full-stack JavaScript example application project and connecting a backend
35 |       API to an Angular 5 front-end application employing the MEAN stack. By the
36 |       end of this Angular advanced tutorial, you will learn about the MEAN stack
37 |       from scratch, including how to build a RESTful API with Loopback and using
38 |       it to perform CRUD operations on a MongoDB database through an Angular
39 |       frontend.
40 |     </p>
41 |   </div>
42 | </div>
43 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "node_modules/codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "arrow-return-shorthand": true,
  7 |     "callable-types": true,
  8 |     "class-name": true,
  9 |     "comment-format": [
 10 |       true,
 11 |       "check-space"
 12 |     ],
 13 |     "curly": true,
 14 |     "deprecation": {
 15 |       "severity": "warn"
 16 |     },
 17 |     "eofline": true,
 18 |     "forin": true,
 19 |     "import-blacklist": [
 20 |       true,
 21 |       "rxjs/Rx",
 22 |       "rxjs/operators"
 23 |     ],
 24 |     "import-spacing": true,
 25 |     "indent": [
 26 |       true,
 27 |       "spaces"
 28 |     ],
 29 |     "interface-over-type-literal": true,
 30 |     "label-position": true,
 31 |     "max-line-length": [
 32 |       true,
 33 |       140
 34 |     ],
 35 |     "member-access": false,
 36 |     "member-ordering": [
 37 |       true,
 38 |       {
 39 |         "order": [
 40 |           "static-field",
 41 |           "instance-field",
 42 |           "static-method",
 43 |           "instance-method"
 44 |         ]
 45 |       }
 46 |     ],
 47 |     "no-arg": true,
 48 |     "no-bitwise": true,
 49 |     "no-console": [
 50 |       true,
 51 |       "debug",
 52 |       "info",
 53 |       "time",
 54 |       "timeEnd",
 55 |       "trace"
 56 |     ],
 57 |     "no-construct": true,
 58 |     "no-debugger": true,
 59 |     "no-duplicate-super": true,
 60 |     "no-empty": false,
 61 |     "no-empty-interface": true,
 62 |     "no-eval": true,
 63 |     "no-inferrable-types": [
 64 |       true,
 65 |       "ignore-params"
 66 |     ],
 67 |     "no-misused-new": true,
 68 |     "no-non-null-assertion": true,
 69 |     "no-shadowed-variable": true,
 70 |     "no-string-literal": false,
 71 |     "no-string-throw": true,
 72 |     "no-switch-case-fall-through": true,
 73 |     "no-trailing-whitespace": true,
 74 |     "no-unnecessary-initializer": true,
 75 |     "no-unused-expression": true,
 76 |     "no-use-before-declare": true,
 77 |     "no-var-keyword": true,
 78 |     "object-literal-sort-keys": false,
 79 |     "one-line": [
 80 |       true,
 81 |       "check-open-brace",
 82 |       "check-catch",
 83 |       "check-else",
 84 |       "check-whitespace"
 85 |     ],
 86 |     "prefer-const": true,
 87 |     "quotemark": [
 88 |       true,
 89 |       "single"
 90 |     ],
 91 |     "radix": true,
 92 |     "semicolon": [
 93 |       true,
 94 |       "always"
 95 |     ],
 96 |     "triple-equals": [
 97 |       true,
 98 |       "allow-null-check"
 99 |     ],
100 |     "typedef-whitespace": [
101 |       true,
102 |       {
103 |         "call-signature": "nospace",
104 |         "index-signature": "nospace",
105 |         "parameter": "nospace",
106 |         "property-declaration": "nospace",
107 |         "variable-declaration": "nospace"
108 |       }
109 |     ],
110 |     "typeof-compare": true,
111 |     "unified-signatures": true,
112 |     "variable-name": false,
113 |     "whitespace": [
114 |       true,
115 |       "check-branch",
116 |       "check-decl",
117 |       "check-operator",
118 |       "check-separator",
119 |       "check-type"
120 |     ],
121 |     "directive-selector": [
122 |       true,
123 |       "attribute",
124 |       "app",
125 |       "camelCase"
126 |     ],
127 |     "component-selector": [
128 |       true,
129 |       "element",
130 |       "app",
131 |       "kebab-case"
132 |     ],
133 |     "no-output-on-prefix": true,
134 |     "use-input-property-decorator": true,
135 |     "use-output-property-decorator": true,
136 |     "use-host-property-decorator": true,
137 |     "no-input-rename": true,
138 |     "no-output-rename": true,
139 |     "use-life-cycle-interface": true,
140 |     "use-pipe-transform-interface": true,
141 |     "component-class-suffix": true,
142 |     "directive-class-suffix": true
143 |   }
144 | }


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "i18n-demo": {
  7 |       "root": "",
  8 |       "projectType": "application",
  9 |       "architect": {
 10 |         "build": {
 11 |           "builder": "@angular-devkit/build-angular:browser",
 12 |           "options": {
 13 |             "outputPath": "dist/browser",
 14 |             "index": "src/index.html",
 15 |             "main": "src/main.ts",
 16 |             "tsConfig": "src/tsconfig.app.json",
 17 |             "polyfills": "src/polyfills.ts",
 18 |             "assets": [
 19 |               {
 20 |                 "glob": "**/*",
 21 |                 "input": "src/assets",
 22 |                 "output": "/assets"
 23 |               },
 24 |               {
 25 |                 "glob": "favicon.ico",
 26 |                 "input": "src",
 27 |                 "output": "/"
 28 |               }
 29 |             ],
 30 |             "styles": [
 31 |               "src/styles.css"
 32 |             ],
 33 |             "scripts": []
 34 |           },
 35 |           "configurations": {
 36 |             "production": {
 37 |               "optimization": true,
 38 |               "outputHashing": "all",
 39 |               "sourceMap": false,
 40 |               "extractCss": true,
 41 |               "namedChunks": false,
 42 |               "aot": true,
 43 |               "extractLicenses": true,
 44 |               "vendorChunk": false,
 45 |               "buildOptimizer": true,
 46 |               "fileReplacements": [
 47 |                 {
 48 |                   "replace": "src/environments/environment.ts",
 49 |                   "with": "src/environments/environment.prod.ts"
 50 |                 }
 51 |               ]
 52 |             },
 53 |             "production-es": {
 54 |               "optimization": true,
 55 |               "outputHashing": "all",
 56 |               "outputPath": "dist/browser/es/",
 57 |               "sourceMap": false,
 58 |               "extractCss": true,
 59 |               "namedChunks": false,
 60 |               "aot": true,
 61 |               "extractLicenses": true,
 62 |               "vendorChunk": false,
 63 |               "buildOptimizer": true,
 64 |               "fileReplacements": [
 65 |                 {
 66 |                   "replace": "src/environments/environment.ts",
 67 |                   "with": "src/environments/environment.prod.ts"
 68 |                 }
 69 |               ],
 70 |               "baseHref": "/es/",
 71 |               "i18nFile": "src/locale/messages.es.xlf",
 72 |               "i18nFormat": "xlf",
 73 |               "i18nLocale": "es",
 74 |               "i18nMissingTranslation": "error"
 75 |             },
 76 |             "production-en": {
 77 |               "optimization": true,
 78 |               "outputHashing": "all",
 79 |               "outputPath": "dist/browser/en/",
 80 |               "sourceMap": false,
 81 |               "extractCss": true,
 82 |               "namedChunks": false,
 83 |               "aot": true,
 84 |               "extractLicenses": true,
 85 |               "vendorChunk": false,
 86 |               "buildOptimizer": true,
 87 |               "fileReplacements": [
 88 |                 {
 89 |                   "replace": "src/environments/environment.ts",
 90 |                   "with": "src/environments/environment.prod.ts"
 91 |                 }
 92 |               ],
 93 |               "baseHref": "/en/",
 94 |               "i18nFile": "src/locale/messages.en.xlf",
 95 |               "i18nFormat": "xlf",
 96 |               "i18nLocale": "en",
 97 |               "i18nMissingTranslation": "error"
 98 |              }
 99 |           }
100 |         },
101 |         "serve": {
102 |           "builder": "@angular-devkit/build-angular:dev-server",
103 |           "options": {
104 |             "browserTarget": "i18n-demo:build"
105 |           },
106 |           "configurations": {
107 |             "production": {
108 |               "browserTarget": "i18n-demo:build:production"
109 |             },
110 |             "es": {
111 |               "browserTarget": "i18n-demo:build:production-es"
112 |             },
113 |             "en": {
114 |               "browserTarget": "i18n-demo:build:production-en"
115 |             }
116 |           }
117 |         },
118 |         "extract-i18n": {
119 |           "builder": "@angular-devkit/build-angular:extract-i18n",
120 |           "options": {
121 |             "browserTarget": "i18n-demo:build"
122 |           }
123 |         },
124 |         "lint": {
125 |           "builder": "@angular-devkit/build-angular:tslint",
126 |           "options": {
127 |             "tsConfig": [
128 |               "src/tsconfig.app.json"
129 |             ],
130 |             "exclude": [
131 |               "**/node_modules/**"
132 |             ]
133 |           }
134 |         },
135 |         "server": {
136 |           "builder": "@angular-devkit/build-angular:server",
137 |           "options": {
138 |             "outputPath": "dist/server",
139 |             "main": "src/main.server.ts",
140 |             "tsConfig": "src/tsconfig.server.json"
141 |           },
142 |           "configurations": {
143 |             "production": {
144 |               "fileReplacements": [
145 |                 {
146 |                   "replace": "src/environments/environment.ts",
147 |                   "with": "src/environments/environment.prod.ts"
148 |                 }
149 |               ]
150 |             }
151 |           }
152 |         }
153 |       }
154 |     }
155 |   },
156 |   "cli": {},
157 |   "schematics": {
158 |     "@schematics/angular:class": {
159 |       "spec": false
160 |     },
161 |     "@schematics/angular:component": {
162 |       "spec": false,
163 |       "inlineStyle": true,
164 |       "inlineTemplate": true,
165 |       "prefix": "app",
166 |       "styleext": "css"
167 |     },
168 |     "@schematics/angular:directive": {
169 |       "spec": false,
170 |       "prefix": "app"
171 |     },
172 |     "@schematics/angular:guard": {
173 |       "spec": false
174 |     },
175 |     "@schematics/angular:module": {
176 |       "spec": false
177 |     },
178 |     "@schematics/angular:pipe": {
179 |       "spec": false
180 |     },
181 |     "@schematics/angular:service": {
182 |       "spec": false
183 |     }
184 |   }
185 | }
186 | 


--------------------------------------------------------------------------------
/src/locale/messages.xlf:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" ?>
  2 | <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  3 |   <file source-language="en" datatype="plaintext" original="ng2.template">
  4 |     <body>
  5 |       <trans-unit id="toolbar-title" datatype="html">
  6 |         <source>My Application</source>
  7 |         <context-group purpose="location">
  8 |           <context context-type="sourcefile">app/app.component.html</context>
  9 |           <context context-type="linenumber">6</context>
 10 |         </context-group>
 11 |       </trans-unit>
 12 |       <trans-unit id="tutorial-button" datatype="html">
 13 |         <source>Tutorials</source>
 14 |         <context-group purpose="location">
 15 |           <context context-type="sourcefile">app/app.component.html</context>
 16 |           <context context-type="linenumber">18</context>
 17 |         </context-group>
 18 |       </trans-unit>
 19 |       <trans-unit id="template-button" datatype="html">
 20 |         <source>Templates</source>
 21 |         <context-group purpose="location">
 22 |           <context context-type="sourcefile">app/app.component.html</context>
 23 |           <context context-type="linenumber">21</context>
 24 |         </context-group>
 25 |       </trans-unit>
 26 |       <trans-unit id="homeTitle" datatype="html">
 27 |         <source>
 28 |           Tutorials
 29 |         </source>
 30 |         <context-group purpose="location">
 31 |           <context context-type="sourcefile">app/tutorials/tutorials.component.html</context>
 32 |           <context context-type="linenumber">3</context>
 33 |         </context-group>
 34 |       </trans-unit>
 35 |       <trans-unit id="FirstParagraphTutorials" datatype="html">
 36 |         <source>
 37 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Firebase Authentication with Angular<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: When developing web applications, any
 38 |       type of authentication feature is necessary. If you think of the many social
 39 |       platforms and email sign in options available, authentication looks like a
 40 |       very complex task. In this Angular 5 tutorial we will explore how to setup
 41 |       an email/password as well as social login authentication workflows for
 42 |       Angular 5 apps using AngularFire2 library.
 43 |     </source>
 44 |         <context-group purpose="location">
 45 |           <context context-type="sourcefile">app/tutorials/tutorials.component.html</context>
 46 |           <context context-type="linenumber">8</context>
 47 |         </context-group>
 48 |       </trans-unit>
 49 |       <trans-unit id="SecondParagraphTutorials" datatype="html">
 50 |         <source>
 51 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Learn Angular from scratch step by step<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: Angular step by step tutorial
 52 |       covering from basic concepts of Angular Framework to building a complete
 53 |       Angular 5 app using Angular Material components. We will go through the main
 54 |       building blocks of an Angular application as well as the best practices for
 55 |       building a complete app with Angular. Also, this tutorial shows how to setup
 56 |       your development environment and workflow so you can start developing Angular
 57 |       apps right away.
 58 |     </source>
 59 |         <context-group purpose="location">
 60 |           <context context-type="sourcefile">app/tutorials/tutorials.component.html</context>
 61 |           <context context-type="linenumber">16</context>
 62 |         </context-group>
 63 |       </trans-unit>
 64 |       <trans-unit id="ThirdParagraphTutorials" datatype="html">
 65 |         <source>
 66 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Angular 5 Forms and Validations<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: We created this angular forms
 67 |       tutorial to help you learn everything about Angular forms validations in
 68 |       angular 5 apps. These angular forms examples are updated using the best
 69 |       (coding) practices to build Angular 5 apps with Material Design.
 70 |     </source>
 71 |         <context-group purpose="location">
 72 |           <context context-type="sourcefile">app/tutorials/tutorials.component.html</context>
 73 |           <context context-type="linenumber">25</context>
 74 |         </context-group>
 75 |       </trans-unit>
 76 |       <trans-unit id="FourthParagraphTutorials" datatype="html">
 77 |         <source>
 78 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Learn how to build a MEAN stack application in this Angular tutorial<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>:
 79 |       The goal of this Angular tutorial is to guide you through the coding of a
 80 |       full-stack JavaScript example application project and connecting a backend
 81 |       API to an Angular 5 front-end application employing the MEAN stack. By the
 82 |       end of this Angular advanced tutorial, you will learn about the MEAN stack
 83 |       from scratch, including how to build a RESTful API with Loopback and using
 84 |       it to perform CRUD operations on a MongoDB database through an Angular
 85 |       frontend.
 86 |     </source>
 87 |         <context-group purpose="location">
 88 |           <context context-type="sourcefile">app/tutorials/tutorials.component.html</context>
 89 |           <context context-type="linenumber">31</context>
 90 |         </context-group>
 91 |       </trans-unit>
 92 |       <trans-unit id="templatesTitle" datatype="html">
 93 |         <source>
 94 |       Templates
 95 |     </source>
 96 |         <context-group purpose="location">
 97 |           <context context-type="sourcefile">app/templates/templates.component.html</context>
 98 |           <context context-type="linenumber">3</context>
 99 |         </context-group>
100 |       </trans-unit>
101 |       <trans-unit id="FirstParagraphTemplates" datatype="html">
102 |         <source>
103 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Angular 6 Site Template<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: Reuse the beautiful, responsive and flexible
104 |       custom components we built for this Angular 6 Template. With Bootstrap 4,
105 |       Angular Universal (Server Side Rendering), SEO, Lazy Loading and a detailed
106 |       documentation on how to get started building Angular apps. Tons of use cases
107 |       implemented the Angular way such as authentication flows, product listing,
108 |       filtering, forms, routing guards and more.
109 |     </source>
110 |         <context-group purpose="location">
111 |           <context context-type="sourcefile">app/templates/templates.component.html</context>
112 |           <context context-type="linenumber">8</context>
113 |         </context-group>
114 |       </trans-unit>
115 |       <trans-unit id="SecondParagraphTemplates" datatype="html">
116 |         <source>
117 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Angular Admin Template<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: Created with performance and ease of
118 |       development in mind, this Angular 5 web template is something you will love.
119 |       It includes all the components that you might need inside a project and a
120 |       detailed documentation on how to get started.
121 |     </source>
122 |         <context-group purpose="location">
123 |           <context context-type="sourcefile">app/templates/templates.component.html</context>
124 |           <context context-type="linenumber">16</context>
125 |         </context-group>
126 |       </trans-unit>
127 |       <trans-unit id="notFoundTitle" datatype="html">
128 |         <source>
129 |     Not found 404
130 |   </source>
131 |         <context-group purpose="location">
132 |           <context context-type="sourcefile">app/404/404.component.html</context>
133 |           <context context-type="linenumber">2</context>
134 |         </context-group>
135 |       </trans-unit>
136 |     </body>
137 |   </file>
138 | </xliff>
139 | 


--------------------------------------------------------------------------------
/src/locale/messages.en.xlf:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" ?>
  2 | <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  3 |   <file source-language="en" datatype="plaintext" original="ng2.template">
  4 |     <body>
  5 |       <trans-unit id="toolbar-title" datatype="html">
  6 |         <source>My Application</source>
  7 |         <target>My Application</target>
  8 |         <context-group purpose="location">
  9 |           <context context-type="sourcefile">app/app.component.html</context>
 10 |           <context context-type="linenumber">6</context>
 11 |         </context-group>
 12 |       </trans-unit>
 13 |       <trans-unit id="tutorial-button" datatype="html">
 14 |         <source>Tutorials</source>
 15 |         <target>Tutorials</target>
 16 |         <context-group purpose="location">
 17 |           <context context-type="sourcefile">app/app.component.html</context>
 18 |           <context context-type="linenumber">18</context>
 19 |         </context-group>
 20 |       </trans-unit>
 21 |       <trans-unit id="template-button" datatype="html">
 22 |         <source>Templates</source>
 23 |         <target>Templates</target>
 24 |         <context-group purpose="location">
 25 |           <context context-type="sourcefile">app/app.component.html</context>
 26 |           <context context-type="linenumber">21</context>
 27 |         </context-group>
 28 |       </trans-unit>
 29 |       <trans-unit id="homeTitle" datatype="html">
 30 |         <source>Tutorials</source>
 31 |         <target>Tutorials</target>
 32 |         <context-group purpose="location">
 33 |           <context context-type="sourcefile">app/tutorials/tutorials.component.html</context>
 34 |           <context context-type="linenumber">3</context>
 35 |         </context-group>
 36 |       </trans-unit>
 37 |       <trans-unit id="FirstParagraphTutorials" datatype="html">
 38 |         <source>
 39 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Firebase Authentication with Angular<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: When developing web applications, any
 40 |       type of authentication feature is necessary. If you think of the many social
 41 |       platforms and email sign in options available, authentication looks like a
 42 |       very complex task. In this Angular 5 tutorial we will explore how to setup
 43 |       an email/password as well as social login authentication workflows for
 44 |       Angular 5 apps using AngularFire2 library.
 45 |     </source>
 46 |         <target>
 47 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Firebase Authentication with Angular<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: When developing web applications, any
 48 |       type of authentication feature is necessary. If you think of the many social
 49 |       platforms and email sign in options available, authentication looks like a
 50 |       very complex task. In this Angular 5 tutorial we will explore how to setup
 51 |       an email/password as well as social login authentication workflows for
 52 |       Angular 5 apps using AngularFire2 library.
 53 |     </target>
 54 |         <context-group purpose="location">
 55 |           <context context-type="sourcefile">app/tutorials/tutorials.component.html</context>
 56 |           <context context-type="linenumber">8</context>
 57 |         </context-group>
 58 |       </trans-unit>
 59 |       <trans-unit id="SecondParagraphTutorials" datatype="html">
 60 |         <source>
 61 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Learn Angular from scratch step by step<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: Angular step by step tutorial
 62 |       covering from basic concepts of Angular Framework to building a complete
 63 |       Angular 5 app using Angular Material components. We will go through the main
 64 |       building blocks of an Angular application as well as the best practices for
 65 |       building a complete app with Angular. Also, this tutorial shows how to setup
 66 |       your development environment and workflow so you can start developing Angular
 67 |       apps right away.
 68 |     </source>
 69 |         <target>
 70 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Learn Angular from scratch step by step<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: Angular step by step tutorial
 71 |       covering from basic concepts of Angular Framework to building a complete
 72 |       Angular 5 app using Angular Material components. We will go through the main
 73 |       building blocks of an Angular application as well as the best practices for
 74 |       building a complete app with Angular. Also, this tutorial shows how to setup
 75 |       your development environment and workflow so you can start developing Angular
 76 |       apps right away.
 77 |     </target>
 78 |         <context-group purpose="location">
 79 |           <context context-type="sourcefile">app/tutorials/tutorials.component.html</context>
 80 |           <context context-type="linenumber">16</context>
 81 |         </context-group>
 82 |       </trans-unit>
 83 |       <trans-unit id="ThirdParagraphTutorials" datatype="html">
 84 |         <source>
 85 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Angular 5 Forms and Validations<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: We created this angular forms
 86 |       tutorial to help you learn everything about Angular forms validations in
 87 |       angular 5 apps. These angular forms examples are updated using the best
 88 |       (coding) practices to build Angular 5 apps with Material Design.
 89 |     </source>
 90 |         <target>
 91 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Angular 5 Forms and Validations<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: We created this angular forms
 92 |       tutorial to help you learn everything about Angular forms validations in
 93 |       angular 5 apps. These angular forms examples are updated using the best
 94 |       (coding) practices to build Angular 5 apps with Material Design.
 95 |     </target>
 96 |         <context-group purpose="location">
 97 |           <context context-type="sourcefile">app/tutorials/tutorials.component.html</context>
 98 |           <context context-type="linenumber">25</context>
 99 |         </context-group>
100 |       </trans-unit>
101 |       <trans-unit id="FourthParagraphTutorials" datatype="html">
102 |         <source>
103 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Learn how to build a MEAN stack application in this Angular tutorial<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>:
104 |       The goal of this Angular tutorial is to guide you through the coding of a
105 |       full-stack JavaScript example application project and connecting a backend
106 |       API to an Angular 5 front-end application employing the MEAN stack. By the
107 |       end of this Angular advanced tutorial, you will learn about the MEAN stack
108 |       from scratch, including how to build a RESTful API with Loopback and using
109 |       it to perform CRUD operations on a MongoDB database through an Angular
110 |       frontend.
111 |     </source>
112 |         <target>
113 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Learn how to build a MEAN stack application in this Angular tutorial<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>:
114 |       The goal of this Angular tutorial is to guide you through the coding of a
115 |       full-stack JavaScript example application project and connecting a backend
116 |       API to an Angular 5 front-end application employing the MEAN stack. By the
117 |       end of this Angular advanced tutorial, you will learn about the MEAN stack
118 |       from scratch, including how to build a RESTful API with Loopback and using
119 |       it to perform CRUD operations on a MongoDB database through an Angular
120 |       frontend.
121 |     </target>
122 |         <context-group purpose="location">
123 |           <context context-type="sourcefile">app/tutorials/tutorials.component.html</context>
124 |           <context context-type="linenumber">31</context>
125 |         </context-group>
126 |       </trans-unit>
127 |       <trans-unit id="templatesTitle" datatype="html">
128 |         <source>
129 |       Templates
130 |     </source>
131 |         <target>
132 |       Templates
133 |     </target>
134 |         <context-group purpose="location">
135 |           <context context-type="sourcefile">app/templates/templates.component.html</context>
136 |           <context context-type="linenumber">3</context>
137 |         </context-group>
138 |       </trans-unit>
139 |       <trans-unit id="FirstParagraphTemplates" datatype="html">
140 |         <source>
141 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Angular 6 Site Template<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: Reuse the beautiful, responsive and flexible
142 |       custom components we built for this Angular 6 Template. With Bootstrap 4,
143 |       Angular Universal (Server Side Rendering), SEO, Lazy Loading and a detailed
144 |       documentation on how to get started building Angular apps. Tons of use cases
145 |       implemented the Angular way such as authentication flows, product listing,
146 |       filtering, forms, routing guards and more.
147 |     </source>
148 |         <target>
149 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Angular 6 Site Template<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: Reuse the beautiful, responsive and flexible
150 |       custom components we built for this Angular 6 Template. With Bootstrap 4,
151 |       Angular Universal (Server Side Rendering), SEO, Lazy Loading and a detailed
152 |       documentation on how to get started building Angular apps. Tons of use cases
153 |       implemented the Angular way such as authentication flows, product listing,
154 |       filtering, forms, routing guards and more.
155 |     </target>
156 |         <context-group purpose="location">
157 |           <context context-type="sourcefile">app/templates/templates.component.html</context>
158 |           <context context-type="linenumber">8</context>
159 |         </context-group>
160 |       </trans-unit>
161 |       <trans-unit id="SecondParagraphTemplates" datatype="html">
162 |         <source>
163 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Angular Admin Template<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: Created with performance and ease of
164 |       development in mind, this Angular 5 web template is something you will love.
165 |       It includes all the components that you might need inside a project and a
166 |       detailed documentation on how to get started.
167 |     </source>
168 |         <target>
169 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Angular Admin Template<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: Created with performance and ease of
170 |       development in mind, this Angular 5 web template is something you will love.
171 |       It includes all the components that you might need inside a project and a
172 |       detailed documentation on how to get started.
173 |     </target>
174 |         <context-group purpose="location">
175 |           <context context-type="sourcefile">app/templates/templates.component.html</context>
176 |           <context context-type="linenumber">16</context>
177 |         </context-group>
178 |       </trans-unit>
179 |       <trans-unit id="notFoundTitle" datatype="html">
180 |         <source>
181 |     Not found 404
182 |   </source>
183 |     <target>Not found 404</target>
184 |         <context-group purpose="location">
185 |           <context context-type="sourcefile">app/404/404.component.html</context>
186 |           <context context-type="linenumber">2</context>
187 |         </context-group>
188 |       </trans-unit>
189 |     </body>
190 |   </file>
191 | </xliff>
192 | 


--------------------------------------------------------------------------------
/src/locale/messages.es.xlf:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" ?>
  2 | <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  3 |   <file source-language="en" datatype="plaintext" original="ng2.template">
  4 |     <body>
  5 |       <trans-unit id="toolbar-title" datatype="html">
  6 |         <source>My Application</source>
  7 |         <target>Mi Aplicación</target>
  8 |         <context-group purpose="location">
  9 |           <context context-type="sourcefile">app/app.component.html</context>
 10 |           <context context-type="linenumber">6</context>
 11 |         </context-group>
 12 |       </trans-unit>
 13 |       <trans-unit id="tutorial-button" datatype="html">
 14 |         <source>Tutorials</source>
 15 |         <target>Tutoriales</target>
 16 |         <context-group purpose="location">
 17 |           <context context-type="sourcefile">app/app.component.html</context>
 18 |           <context context-type="linenumber">18</context>
 19 |         </context-group>
 20 |       </trans-unit>
 21 |       <trans-unit id="template-button" datatype="html">
 22 |         <source>Templates</source>
 23 |         <target>Plantillas</target>
 24 |         <context-group purpose="location">
 25 |           <context context-type="sourcefile">app/app.component.html</context>
 26 |           <context context-type="linenumber">21</context>
 27 |         </context-group>
 28 |       </trans-unit>
 29 |       <trans-unit id="homeTitle" datatype="html">
 30 |         <source>Tutorials</source>
 31 |         <target>Tutoriales</target>
 32 |         <context-group purpose="location">
 33 |           <context context-type="sourcefile">app/tutorials/tutorials.component.html</context>
 34 |           <context context-type="linenumber">3</context>
 35 |         </context-group>
 36 |       </trans-unit>
 37 |       <trans-unit id="FirstParagraphTutorials" datatype="html">
 38 |         <source>
 39 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Firebase Authentication with Angular<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: When developing web applications, any
 40 |       type of authentication feature is necessary. If you think of the many social
 41 |       platforms and email sign in options available, authentication looks like a
 42 |       very complex task. In this Angular 5 tutorial we will explore how to setup
 43 |       an email/password as well as social login authentication workflows for
 44 |       Angular 5 apps using AngularFire2 library.
 45 |     </source>
 46 |         <target>
 47 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Firebase Authentication with Angular<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: Cuando desarrollamos aplicaciones web, es necesario algun tipo de autenticacion.
 48 |         Si piensas en las todas plataformas sociales y opciones de inicio de sesión con correo electrónico disponibles, la autenticación parece una
 49 |         tarea muy compleja. En este tutorial de Angular 5 vamos a explorar cómo configurar
 50 |         un correo electrónico / contraseña, así como los métodos de autenticación de inicio de sesión social para
 51 |         Aplicaciones de Angular 5 usando la biblioteca AngularFire2.
 52 |     </target>
 53 |         <context-group purpose="location">
 54 |           <context context-type="sourcefile">app/tutorials/tutorials.component.html</context>
 55 |           <context context-type="linenumber">8</context>
 56 |         </context-group>
 57 |       </trans-unit>
 58 |       <trans-unit id="SecondParagraphTutorials" datatype="html">
 59 |         <source>
 60 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Learn Angular from scratch step by step<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: Angular step by step tutorial
 61 |       covering from basic concepts of Angular Framework to building a complete
 62 |       Angular 5 app using Angular Material components. We will go through the main
 63 |       building blocks of an Angular application as well as the best practices for
 64 |       building a complete app with Angular. Also, this tutorial shows how to setup
 65 |       your development environment and workflow so you can start developing Angular
 66 |       apps right away.
 67 |     </source>
 68 |         <target>
 69 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Learn Angular from scratch step by step<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: Tutorial paso a paso de Angular 5
 70 |       cubriendo desde conceptos básicos de Angular Framework hasta la construcción de una completa
 71 |       Aplicación Angular 5 con componentes de Angular Material. Pasaremos por el principal
 72 |       constructor de bloques de una aplicación angular, así como las mejores prácticas para
 73 |       construir una aplicación completa con Angular. Además, este tutorial muestra cómo configurar
 74 |       su entorno de desarrollo y flujo de trabajo para que pueda comenzar a desarrollar
 75 |       aplicaciones Angular de inmediato.
 76 |     </target>
 77 |         <context-group purpose="location">
 78 |           <context context-type="sourcefile">app/tutorials/tutorials.component.html</context>
 79 |           <context context-type="linenumber">16</context>
 80 |         </context-group>
 81 |       </trans-unit>
 82 |       <trans-unit id="ThirdParagraphTutorials" datatype="html">
 83 |         <source>
 84 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Angular 5 Forms and Validations<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: We created this angular forms
 85 |       tutorial to help you learn everything about Angular forms validations in
 86 |       angular 5 apps. These angular forms examples are updated using the best
 87 |       (coding) practices to build Angular 5 apps with Material Design.
 88 |     </source>
 89 |         <target>
 90 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Angular 5 Forms and Validations<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: Creamos este tutorial sobre formularios para ayudarlo a aprender todo sobre las validaciones de formularios en
 91 |       una aplicacion de Angular 5. Estos ejemplos de formularios de Angular estan actualizados usando los mejores
 92 |       (coding) prácticas para construir aplicaciones Angular 5 con Angular Material.
 93 |     </target>
 94 |         <context-group purpose="location">
 95 |           <context context-type="sourcefile">app/tutorials/tutorials.component.html</context>
 96 |           <context context-type="linenumber">25</context>
 97 |         </context-group>
 98 |       </trans-unit>
 99 |       <trans-unit id="FourthParagraphTutorials" datatype="html">
100 |         <source>
101 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Learn how to build a MEAN stack application in this Angular tutorial<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>:
102 |       The goal of this Angular tutorial is to guide you through the coding of a
103 |       full-stack JavaScript example application project and connecting a backend
104 |       API to an Angular 5 front-end application employing the MEAN stack. By the
105 |       end of this Angular advanced tutorial, you will learn about the MEAN stack
106 |       from scratch, including how to build a RESTful API with Loopback and using
107 |       it to perform CRUD operations on a MongoDB database through an Angular
108 |       frontend.
109 |     </source>
110 |         <target>
111 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Learn how to build a MEAN stack application in this Angular tutorial<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>:
112 |       El objetivo de este tutorial de Angular es guiarte a través de la codificación de un proyecto full-stack de ejemplo de JavaScript y conectar una backend
113 |           API a una aplicación de front-end con Angular 5 empleando MEAN.
114 |           Al final de este tutorial avanzado de Angular, aprenderá sobre MEAN
115 |           desde cero, incluyendo cómo construir una API RESTful con Loopback y como usarlo
116 |           para realizar operaciones CRUD en una base de datos MongoDB a través de una Interfaz de Angular.
117 |     </target>
118 |         <context-group purpose="location">
119 |           <context context-type="sourcefile">app/tutorials/tutorials.component.html</context>
120 |           <context context-type="linenumber">31</context>
121 |         </context-group>
122 |       </trans-unit>
123 |       <trans-unit id="templatesTitle" datatype="html">
124 |         <source>
125 |       Templates
126 |     </source>
127 |         <target>
128 |       Plantillas
129 |     </target>
130 |         <context-group purpose="location">
131 |           <context context-type="sourcefile">app/templates/templates.component.html</context>
132 |           <context context-type="linenumber">3</context>
133 |         </context-group>
134 |       </trans-unit>
135 |       <trans-unit id="FirstParagraphTemplates" datatype="html">
136 |         <source>
137 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Angular 6 Site Template<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: Reuse the beautiful, responsive and flexible
138 |       custom components we built for this Angular 6 Template. With Bootstrap 4,
139 |       Angular Universal (Server Side Rendering), SEO, Lazy Loading and a detailed
140 |       documentation on how to get started building Angular apps. Tons of use cases
141 |       implemented the Angular way such as authentication flows, product listing,
142 |       filtering, forms, routing guards and more.
143 |     </source>
144 |         <target>
145 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Angular 6 Site Template<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: Reutilice los bellos, receptivos y flexibles
146 |         componentes personalizados que creamos para esta plantilla de Angular 6. Con Bootstrap 4,
147 |         Angular Universal (representación del lado del servidor), SEO, Lazy Loading y una detallada
148 |         documentación sobre cómo comenzar a construir aplicaciones de Angular. Toneladas de casos de uso
149 |         implementados como flujos de autenticación, listado de productos,
150 |         filtrado, formularios, routing guards y más.
151 |     </target>
152 |         <context-group purpose="location">
153 |           <context context-type="sourcefile">app/templates/templates.component.html</context>
154 |           <context context-type="linenumber">8</context>
155 |         </context-group>
156 |       </trans-unit>
157 |       <trans-unit id="SecondParagraphTemplates" datatype="html">
158 |         <source>
159 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Angular Admin Template<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: Created with performance and ease of
160 |       development in mind, this Angular 5 web template is something you will love.
161 |       It includes all the components that you might need inside a project and a
162 |       detailed documentation on how to get started.
163 |     </source>
164 |         <target>
165 |       <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="&lt;b&gt;"/><x id="START_LINK" ctype="x-a" equiv-text="&lt;a&gt;"/>Angular Admin Template<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/><x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="&lt;/b&gt;"/>: Creado con rendimiento y facilidad de
166 |             desarrollo en mente, esta plantilla web de Angular 5 es algo que te encantará.
167 |             Incluye todos los componentes que pueda necesitar dentro de un proyecto y
168 |             documentación detallada sobre cómo comenzar.
169 |     </target>
170 |         <context-group purpose="location">
171 |           <context context-type="sourcefile">app/templates/templates.component.html</context>
172 |           <context context-type="linenumber">16</context>
173 |         </context-group>
174 |       </trans-unit>
175 |       <trans-unit id="notFoundTitle" datatype="html">
176 |         <source>
177 |     Not found 404
178 |   </source>
179 |     <target>No encontrado 404</target>
180 |         <context-group purpose="location">
181 |           <context context-type="sourcefile">app/404/404.component.html</context>
182 |           <context context-type="linenumber">2</context>
183 |         </context-group>
184 |       </trans-unit>
185 |     </body>
186 |   </file>
187 | </xliff>
188 | 


--------------------------------------------------------------------------------