Angular2's internationalization feature (i18n) is not compatible with templateUrls that are located outside of the main project directory

Currently, I'm delving into the realm of internationalization in my Angular2 app by following the official guide provided here.

The structure of my app is as follows:

my-angular2-app
  |
  +-- app
  |  |
  |  +-- myComponent
  |  |  |
  |  |  +-- myComponent.ts
  |  |  +-- myComponent.html

Here's what myComponent.ts looks like:

import {Component} from '@angular/core';

@Component({
templateUrl: 'app/myComponent/myComponent.html',
selector: 'my-component'
})

export class MyComponent {}

And this is how myComponent.html appears:

<h3 i18n="User welcome|An introduction header for this sample">Hello i18n!</h3>

However, I've hit a stumbling block while attempting to generate the translation source file using

npm run i18n

During the i18n process which scans for tags, an issue arises where it mistakenly updates a filePath variable. When encountering a component with an i18n tag, it appends the templateUrl specified in the component to the end of the filePath.

In my scenario, the current filePath becomes:

C:/my-angular2-app/app/myComponent

Subsequently, upon finding an i18n tag in myComponent.html, it appends the templateUrl in myComponent.ts resulting in the erroneous filePath:

C:/my-angular2-app/app/myComponent/app/myComponent/myComponent.html

This leads to an error due to the non-existent path:

Error: Compilation failed. Resource file not found: C:/my-angular2-app/app/myComponent/app/myComponent/myComponent.html

I'm unsure if I'm overlooking something or if there might be a bug within Angular2's internationalization feature. Any assistance on this matter would be greatly appreciated!

Much thanks!

Answer №1

Dealing with a similar issue, I managed to fix it by utilizing relative paths within the templateUrl property. Here is how you can implement it based on your scenario:

@Component({
templateUrl: './myComponent.html',
selector: 'my-component'
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Could someone teach me how to implement icon rotation in Vue.js using Vuetify?

I am currently working on adding a feature where the icon rotates when the button is clicked, moving from down to up and vice versa in a spinning motion. Here is the code I have so far: <template> <v-btn v-on:click="isShow = !isShow" ...

What methods can be used to search within one array in order to filter another array contained in a list?

Looking for suggestions on creating a filter in one list based on another list How can I handle filtering an array within a list by searching in another array? For example... myArray = [ { "name": "Item-A", "tags": ["Facebook" ...

Enhance React components in Deck.GL by including default properties for each child component

I am currently working on a customizable collection of map layers using Deck.GL & React. I have developed a BaseMap component through which I will be passing data layers as react children. This is the current implementation: BaseMap: export const BaseMap ...

Getting the value of a CSS Variable from Radix UI Colors with Javascript/Typescript: A step-by-step guide

Currently, I am attempting to dynamically retrieve the Radix Colors values in JavaScript. The reason for this requirement is that I generate these colors based on user input, resulting in values that are variable. As a result, I cannot hardcode the values. ...

Is there a way to change routerLink to href?

I am struggling with converting routerLink to href. <a [routerLink]="['/choose',{id:sizzle.parameter,type:dish}]" I attempted it, but I keep getting an error <a [href]="'/choose'+id:sizzle.parameter+type:dish" ...

Leveraging ngOnChanges to determine the display of an overlay based on input alterations

Working with TS/Angular on a web application, I made the decision to refactor some code that handles displaying different overlays. Instead of having separate code for each overlay, I consolidated them into one "master overlay" and created a function withi ...

Dealing with a sequence of deletions in Angular 4

When working with a ReplaySubject of size 3 and a delete chain that must be in order, I encountered an issue. After the deletion process is completed, I need to redirect the user. However, when subscribing to this ReplaySubject method, it sends "here fin ...

Is it possible to design a Typescript type that only contains one property from a defined set and is indexable by that set as well?

I have the different types listed below: type OrBranch = { or: Branch[] } type AndBranch = { and: Branch[] } I need a type called Branch that can either be an OrBranch or an AndBranch. I initially attempted this: type Branch = AndBrand | OrBranch ...

Utilizing chrome.scripting to inject scripts in TypeScript

I am currently facing an issue wherein I am attempting to integrate chrome extension JavaScript code with TypeScript: const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); let result; try { [{ result }] = await c ...

Determining the data type of an object property using a variable

I just joined a pre-existing project, where there are some global variables set by the backend. These globals are defined in an interface: interface IGlobals { feature_foo: boolean feature_bar: boolean someOtherProp: string } const globals: IG ...

Acquiring information from the service in Ionic 2

THE ISSUE: Apologies if this is a basic question. Within my Ionic 2 application, I have implemented a POST request for the login functionality and it is functioning correctly. The process involves a form with email and password fields, sending this data ...

Understanding the return parameter "typeof SomeClass" in TypeScript

typeof in JavaScript returns a string. The TypeScript typings for Sequelize include return types of typeof Model. What does this mean and what is its purpose? I have looked through the documentation but could not find an explanation. Link to Sequelize Typ ...

Explore visuals in the component repository

I am currently working on an Angular 7 component library and am facing some challenges in adding images for buttons and other elements. My project structure is organized as follows: projects components src lib myComponent assets ...

Overriding TypeScript types generated from the GraphQL schema

Currently, I am utilizing the graphql-code-generator to automatically generate TypeScript types from my GraphQL schema. Within GraphQL, it is possible to define custom scalar types that result in specific type mappings, as seen below in the following code ...

Unable to break down the property 'desks' of '(0 , _react.useContext)(...)' due to its undefined nature

Trying to mock DeskContext to include desks and checkIfUserPresent when calling useContext is causing an error to occur: Cannot destructure property 'desks' of '(0 , _react.useContext)(...)' as it is undefined TypeError: Cannot destruct ...

Sending an array of strings to the function is not allowed

I'm encountering an issue with the following function: function proc(unames: Array<string>){} When I attempt to pass the function the following input: import _ = require('lodash'); const usernames = _.flattenDeep([unames]).filt ...

Navigating in express

Here is the structure I am working with: server.ts routes/ index.ts homeRoute.ts In server.ts: let app = Express(); app.use(router); In routes/index.ts: const routes = Router(); export default function router() { routes.use('/home' ...

Leveraging Vue.js as a development dependency in a TypeScript project

I am currently working on a .net core project where all client-side scripts are written in TypeScript. I have a desire to incorporate Vue.js into the TypeScript codebase. Below are snippets of the necessary configurations: tsconfig.json { "compilerOpti ...

Exploring the process of linking a C# REST API to an Ionic 2 mobile application

I am completely lost on how to connect an asp.net web api with my ionic 2 mobile app. Any help or advice on resolving this problem would be greatly valued! ...

Having trouble with submitting a reactive form in Angular 6

I have been diving into Angular and have hit a roadblock while attempting to submit a form. Here is my addPost component: import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormBuilder, Validators } from '@ ...