Template parse errors: The pipe 'L' could not be found ("

[francisrod01]

This actually used to work just fine in my AppComponent. The app title (app.name) works just fine.

It's just the same error that #5 in this point, I don't know.

The point is I'm calling my own directive in app.component.html and in this component I'm trying to use this translation as well. I'll show you that:

The app.component.html

<ActionBar title="{{ 'app.name' | L }}" class="action-bar">
  <ActionItem
    android.position="popup"
    text="{{ 'menutop_items.exit' | L }}"
  ></ActionItem>
</ActionBar>

<sale-new></sale-new>

The sale-new.component.ts:

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

@Component({
  selector: 'sale-new',
  moduleId: module.id,
  templateUrl: './sale-new.component.html',
  styleUrls: ['./sale-new.component.css']
})

...

The sale-new.component.html:

  <GridLayout rows="auto, auto" columns="60%, 40%, *, *">
    <Label class="text-muted" text="{{ 'people_label' | L }}" row="0" col="0"></Label>

    <TextField class="input" [text]="2" keyboardType="number" row="0" col="1"></TextField>
  </GridLayout>

  <StackLayout orientation="horizontal">
    <Label class="text-muted" text="{{ 'waiter_label' | L }}"></Label>
...

Envs

  "nativescript": {
    "id": "org.nativescript.myProject",
    "tns-android": {
      "version": "4.0.1"
    }
  },
  "dependencies": {
    "@angular/animations": "~5.2.0",
    "@angular/common": "~5.2.0",
    "@angular/compiler": "~5.2.0",
    "@angular/core": "~5.2.0",
    "@angular/forms": "~5.2.0",
    "@angular/http": "~5.2.0",
    "@angular/platform-browser": "~5.2.0",
    "@angular/platform-browser-dynamic": "~5.2.0",
    "@angular/router": "~5.2.0",
    "nativescript-angular": "~5.2.0",
    "nativescript-localize": "^3.0.3",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.5.2",
    "tns-core-modules": "^4.0.1",
    "zone.js": "~0.8.18"
  },
  "devDependencies": {
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "gts": "^0.5.4",
    "lazy": "1.0.11",
    "nativescript": "^4.0.1",
    "nativescript-dev-typescript": "~0.6.0",
    "tslint": "^5.9.1",
    "typescript": "~2.6.2"
  }

The console error output following below:

JS: ns-renderer: ERROR BOOTSTRAPPING ANGULAR
JS: ns-renderer: Template parse errors:
JS: The pipe 'L' could not be found ("
JS: 
JS:   <GridLayout rows="auto, auto" columns="60%, 40%, *, *">
JS:     <Label class="text-muted" tex[ERROR ->]t="{{ 'people_label' | L }}" row="0" col="0"></Label>
JS: 
JS:     <TextField
JS: "): ng:///data/data/org.nativescript.myProject/files/app/components/sale/sale-new/sale-new.component.html@7:33
JS: The pipe 'L' could not be found ("
JS: 
JS:   <StackLayout orientation="horizontal">
JS:     <Label class="text-muted" tex[ERROR ->]t="{{ 'waiter_label' | L }}"></Label>
JS: 
JS:     <DropDown #ddWaiters
JS: "): ng:///data/data/org.nativescript.myProject/files/app/components/sale/sale-new/sale-new.component.html@22:33
JS: 
JS: Error: Template parse errors:
JS: The pipe 'L' could not be found ("
JS: 
JS:   <GridLayout rows="auto, auto" columns="60%, 40%, *, *">
JS:     <Label class="text-muted" tex[ERROR ->]t="{{ 'people_label' | L }}" row="0" col="0"></Label>
JS: 
JS:     <TextField
JS: "): ng:///data/data/org.nativescript.myProject/files/app/components/sale/sale-new/sale-new.component.html@7:33
JS: The pipe 'L' could not be found ("
JS: 
JS:   <StackLayout orientation="horizontal">
JS:     <Label class="text-muted" tex[ERROR ->]t="{{ 'waiter_label' | L }}"></Label>
JS: 
JS:     <DropDown #ddWaiters
JS: "): ng:///data/data/org.nativescript.myProject/files/app/components/sale/sale-new/sale-new.component.html@22:33
JS:     at syntaxError (file:///data/data/org.nativescript.myProject/files/app/tns_modules/@angular/compiler/bundles/compiler.umd.js:529:34) [<root>]
JS:     at TemplateParser.parse (file:///data/data/org.nativescript.myProject/files/app/tns_modules/@angular/compiler/bundles/compiler.umd.js:24717:19) [<root>]
JS:     at JitCompiler._parseTemplate (file:///data/data/org.nativescript.myProject/files/app/tns_modules/@angular/compiler/bundles/compiler.umd.js:34672:37) [<root>]
JS:     at JitCompiler._compileTemplate (file:///data/data/org.nativescript.myProject/files/app/tns_modules/@angular/compiler/bundles/compiler.umd.js:34647:23) [<root>]
JS:     at file:///data/data/org.nativescript.myProject/files/app/tns_modules/@angular/compiler/bundles/compiler.umd.js:34548:62 [<root>]
JS:     at Set.forEach (native) [<root>]
JS:     at JitCompiler._compileComponents (file:///data/data/org.nativescript.myProject/files/app/tns_modules/@angular/compiler/bundles/compiler.umd.js:34548:19) [<root>]
JS:     at file:///data/data/org.nativescript.myProject/files/app/tns_modules/@angular/compiler/bundles/compiler.umd.js:34418:19 [<root>]
JS:     at Function.drainMicroTaskQueue (file:///data/data/org.nativescript.myProject/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:593:35) [<root>]

In my app.module.ts I'm trying to define in exports property as well, but don't work too.

import {NgModule, NO_ERRORS_SCHEMA} from '@angular/core';
import {NativeScriptLocalizeModule} from 'nativescript-localize/angular';
import {NativeScriptModule} from 'nativescript-angular/nativescript.module';

import {DropDownModule} from 'nativescript-drop-down/angular';

import {ComponentsModule} from './components/components.module';
import {AppComponent} from './app.component';

@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  imports: [
    NativeScriptModule,
    DropDownModule,
    ComponentsModule,
    NativeScriptLocalizeModule
  ],
  exports: [
    NativeScriptLocalizeModule
  ],
  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}

References

Role of imports / exports in Angular 2+ ngModule: https://stackoverflow.com/a/41927063/3332734

[francisrod01]

After the lunch, I investigated better the @NgModule exports:

An export what you put is the exports property of the @NgModule decorator. It enables an Angular module to expose some of its components/directives/pipes to the other modules in the applications. Without it, the components/directives/pipes defined in a module could only be used in that module.

After reading better, I was able to solve the problem.

• Removed this import from app.module.ts
• Imported in components.module.ts
• Exported it inside @NgModule from ComponentsModule module.

import {NgModule} from '@angular/core';
import {NativeScriptLocalizeModule} from 'nativescript-localize/angular';
import {NativeScriptModule} from 'nativescript-angular/nativescript.module';

// ... The imports from my own components class

const COMPONENTS: any = [
  // .. my own components class
];

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptLocalizeModule
  ],
  declarations: [
    COMPONENTS
  ],
  exports: [
    COMPONENTS,
    NativeScriptModule,
    NativeScriptLocalizeModule
  ]
})

export class ComponentsModule { }

Regards!