Angular-cli: ng build -prod error with shared module imports

Created on 17 Mar 2017  路  3Comments  路  Source: angular/angular-cli

Bug Report or Feature Request (mark with an x)

  • [X ] bug report -> please search issues before submitting
  • [ ] feature request

Versions.

@angular/cli: 1.0.0-rc.2
node: 6.9.1
os: win32 x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/cli: 1.0.0-rc.2
@angular/compiler-cli: 2.4.10

Repro steps.

I do refactoring of my modules and works in dev but fail when try to build in prod.

This is my sharedModule.

let imports_modules = [
  CommonModule,
  BrowserModule,
  GMapModule,
  FormsModule,
  NgUploaderModule,
  SliderModule,
  ProgressBarModule,
  DialogModule,
  MomentModule,
  CalendarModule,
  DataTableModule,
  SharedModule,
  MultiSelectModule,
  ConfirmDialogModule,
  MultiSelectModule,
  PickListModule,
  InputSwitchModule,
  ListboxModule,
  EditorModule,
];
let declarations_components = [
  DateValidator,
  OrderBlockPipe,
  GmapWithImgComponent,
  FormGmapWithImgComponent,
];
let exports_modules = [].concat(declarations_components,imports_modules);

@NgModule({
  imports: imports_modules,
  declarations: declarations_components,
  exports: exports_modules
})
export class SharedAppModule { }

And I added my Shared Module to my others modules

  imports: [
    SharedAppModule,
...
  ],

It's works when I use ng serve and ng build (in dev) but when try to run ng build -prod fails.

The log given by the failure.

ng build -prod

Hash: 97f92035ae3f751ad6ca
Time: 39783ms
chunk    {0} scripts.e84891cd5f77983b45f0.bundle.js (scripts) 418 kB {4} [initial] [rendered]
chunk    {1} styles.82e9c971f4949292a890.bundle.css (styles) 281 bytes {4} [initial] [rendered]
chunk    {2} main.f477b2c6a956066ac426.bundle.js (main) 1.55 kB {3} [initial] [rendered]
chunk    {3} vendor.f36b0c10789327327954.bundle.js (vendor) 1.1 MB [initial] [rendered]
chunk    {4} inline.b54934055cedd5078327.bundle.js (inline) 0 bytes [entry] [rendered]

ERROR in Template parse errors:
Can't bind to 'ngIf' since it isn't a known property of 'template'. ("<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <template [ERROR ->][ngIf]="fb_institutions === undefined || fb_institutions?.length < 1">
    <section class="content">"): EventsComponent@2:12
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  [ERROR ->]<template [ngIf]="fb_institutions === undefined || fb_institutions?.length < 1">
    <section class="): EventsComponent@2:2
Can't bind to 'ngIf' since it isn't a known property of 'template'. ("

  </template>
  <template [ERROR ->][ngIf]="fb_institutions?.length > 0">
    <!-- Content Header (Page header) -->
    <section class="): EventsComponent@21:12
Can't bind to 'ngIf' since it isn't a known property of 'div'. (" content -->
    <section class="content">
      <div id="w1" class="alert alert-success fade in" [ERROR ->]*ngIf="deletedElement == true">
        <button type="button" class="close" data-dismiss="alert" ari"): EventsComponent@34:55
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("

    <!-- Main content -->
    <section class="content">
      [ERROR ->]<div id="w1" class="alert alert-success fade in" *ngIf="deletedElement == true">
        <button typ"): EventsComponent@34:6
Can't bind to 'ngIf' since it isn't a known property of 'div'. ("

      </div>
      <div id="w4" class="alert alert-error fade in" [ERROR ->]*ngIf="deletedElement == false">
        <button type="button" class="close" data-dismiss="alert" ar"): EventsComponent@40:53
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("


      </div>
      [ERROR ->]<div id="w4" class="alert alert-error fade in" *ngIf="deletedElement == false">
        <button type"): EventsComponent@40:6
'p-footer' is not a known element:
1. If 'p-footer' is an Angular component, then verify that it is part of this module.
2. If 'p-footer' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
      </div>
      <p-confirmDialog width="425" #cd>
        [ERROR ->]<p-footer>
          <button type="button" class="btn btn-danger" icon="fa-check" (click)="cd.accept"): EventsComponent@45:8
'p-confirmDialog' is not a known element:
1. If 'p-confirmDialog' is an Angular component, then verify that it is part of this module.
2. If 'p-confirmDialog' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (""></i> Error!</h4>No pudo eliminar el elemento, por favor intentelo m谩s tarde.
      </div>
      [ERROR ->]<p-confirmDialog width="425" #cd>
        <p-footer>
          <button type="button" class="btn btn"): EventsComponent@44:6
Can't bind to 'ngModel' since it isn't a known property of 'select'. ("ol-xs-2">Tipo: </span>
          <div class="col-xs-10">
            <select class="form-control" [ERROR ->][(ngModel)]="isOld" (change)="change(select.value)">
              <option *ngFor="let p of events_o"): EventsComponent@55:41
Can't bind to 'ngForOf' since it isn't a known property of 'option'. ("ct class="form-control" [(ngModel)]="isOld" (change)="change(select.value)">
              <option [ERROR ->]*ngFor="let p of events_options" [value]="p.isOld">{{p.text}}</option>
            </select>
      "): EventsComponent@56:22
Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("   <select class="form-control" [(ngModel)]="isOld" (change)="change(select.value)">
              [ERROR ->]<option *ngFor="let p of events_options" [value]="p.isOld">{{p.text}}</option>
            </select>"): EventsComponent@56:14
Can't bind to 'ngForOf' since it isn't a known property of 'option'. ("       <select class="form-control" (change)="change(select.value)" #select>
              <option [ERROR ->]*ngFor="let i of fb_institutions" [value]="i.$key">{{i.name}}</option>
            </select>
      "): EventsComponent@66:22
Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (">
            <select class="form-control" (change)="change(select.value)" #select>
              [ERROR ->]<option *ngFor="let i of fb_institutions" [value]="i.$key">{{i.name}}</option>
            </select>"): EventsComponent@66:14
Can't bind to 'ngIf' since it isn't a known property of 'template'. ("
          </div>
        </div>
        <template [ERROR ->][ngIf]="isOld == 'true'">
          <div class="col-xs-12 col-md-4" *ngFor="let entry of events_olds"): EventsComponent@70:18
The pipe 'amCalendar' could not be found ("ame}}</h3></div>
                <div class="col-xs-5 hidden-md text-right">
                  {{ [ERROR ->](entry.sdate  | amFromUnix) | amCalendar }}
                </div><!-- /.box-tools -->
            "): EventsComponent@76:21
The pipe 'amFromUnix' could not be found ("ame}}</h3></div>
                <div class="col-xs-5 hidden-md text-right">
                  {{ [ERROR ->](entry.sdate  | amFromUnix) | amCalendar }}
                </div><!-- /.box-tools -->
            "): EventsComponent@76:21
Can't bind to 'ngIf' since it isn't a known property of 'span'. ("         <div class="ellipsis" title="{{entry.price}}"><strong>Precio</strong> {{entry.price}}<span [ERROR ->]*ngIf="!entry.price">Gratuito</span></div>
                <div class="ellipsis" title="{{entry.phon"): EventsComponent@82:107
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
               <div class="ellipsis" title="{{entry.price}}"><strong>Precio</strong> {{entry.price}}[ERROR ->]<span *ngIf="!entry.price">Gratuito</span></div>
                <div class="ellipsis" title="{{entr"): EventsComponent@82:101
The pipe 'amDateFormat' could not be found ("- /.box-body -->
              <div class="box-footer">
                <div class="ellipsis" titl[ERROR ->]e="{{ (entry.sdate  | amFromUnix) | amDateFormat:'LLLL'}}"><strong>Fecha Inicio</strong> {{ (entry.sd"): EventsComponent@87:42
The pipe 'amFromUnix' could not be found ("- /.box-body -->
              <div class="box-footer">
                <div class="ellipsis" titl[ERROR ->]e="{{ (entry.sdate  | amFromUnix) | amDateFormat:'LLLL'}}"><strong>Fecha Inicio</strong> {{ (entry.sd"): EventsComponent@87:42
The pipe 'amDateFormat' could not be found ("s" title="{{ (entry.sdate  | amFromUnix) | amDateFormat:'LLLL'}}"><strong>Fecha Inicio</strong> {{ ([ERROR ->]entry.sdate  | amFromUnix) | amDateFormat:'LLLL'}} </div>
                <div class="ellipsis" titl"): EventsComponent@87:135
The pipe 'amFromUnix' could not be found ("s" title="{{ (entry.sdate  | amFromUnix) | amDateFormat:'LLLL'}}"><strong>Fecha Inicio</strong> {{ ([ERROR ->]entry.sdate  | amFromUnix) | amDateFormat:'LLLL'}} </div>
                <div class="ellipsis" titl"): EventsComponent@87:135
The pipe 'amDateFormat' could not be found ("entry.sdate  | amFromUnix) | amDateFormat:'LLLL'}} </div>
                <div class="ellipsis" tit[ERROR ->]le="{{(entry.fdate  | amFromUnix) | amDateFormat:'LLLL'}}"><strong>Fecha T茅rmino</strong> {{(entry.fd"): EventsComponent@88:41
The pipe 'amFromUnix' could not be found ("entry.sdate  | amFromUnix) | amDateFormat:'LLLL'}} </div>
                <div class="ellipsis" tit[ERROR ->]le="{{(entry.fdate  | amFromUnix) | amDateFormat:'LLLL'}}"><strong>Fecha T茅rmino</strong> {{(entry.fd"): EventsComponent@88:41
The pipe 'amDateFormat' could not be found ("is" title="{{(entry.fdate  | amFromUnix) | amDateFormat:'LLLL'}}"><strong>Fecha T茅rmino</strong> {{([ERROR ->]entry.fdate  | amFromUnix) | amDateFormat:'LLLL'}} </div>
              </div>
              <div c"): EventsComponent@88:134
The pipe 'amFromUnix' could not be found ("is" title="{{(entry.fdate  | amFromUnix) | amDateFormat:'LLLL'}}"><strong>Fecha T茅rmino</strong> {{([ERROR ->]entry.fdate  | amFromUnix) | amDateFormat:'LLLL'}} </div>
              </div>
              <div c"): EventsComponent@88:134
Can't bind to 'ngForOf' since it isn't a known property of 'div'. ("     </div>
        <template [ngIf]="isOld == 'true'">
          <div class="col-xs-12 col-md-4" [ERROR ->]*ngFor="let entry of events_olds_filtered">
            <div class="box box-solid box-default">
   "): EventsComponent@71:42
Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
        </div>
        <template [ngIf]="isOld == 'true'">
          [ERROR ->]<div class="col-xs-12 col-md-4" *ngFor="let entry of events_olds_filtered">
            <div class=""): EventsComponent@71:10
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("

          </div>
        </div>
        [ERROR ->]<template [ngIf]="isOld == 'true'">
          <div class="col-xs-12 col-md-4" *ngFor="let entry of e"): EventsComponent@70:8
Can't bind to 'ngIf' since it isn't a known property of 'template'. ("
          </div>
        </template>
        <template [ERROR ->][ngIf]="isOld == 'false'" >
          <div class="col-xs-12 col-md-4" *ngFor="let entry of events_ne"): EventsComponent@97:18
The pipe 'amCalendar' could not be found ("ame}}</h3></div>
                <div class="col-xs-5 hidden-md text-right">
                  {{ [ERROR ->](entry.sdate  | amFromUnix) | amCalendar }}
                </div><!-- /.box-tools -->
            "): EventsComponent@103:21
The pipe 'amFromUnix' could not be found ("ame}}</h3></div>
                <div class="col-xs-5 hidden-md text-right">
                  {{ [ERROR ->](entry.sdate  | amFromUnix) | amCalendar }}
                </div><!-- /.box-tools -->
            "): EventsComponent@103:21
Can't bind to 'ngIf' since it isn't a known property of 'span'. ("         <div class="ellipsis" title="{{entry.price}}"><strong>Precio</strong> {{entry.price}}<span [ERROR ->]*ngIf="!entry.price">Gratuito</span></div>
                <div class="ellipsis" title="{{entry.phon"): EventsComponent@109:107
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
               <div class="ellipsis" title="{{entry.price}}"><strong>Precio</strong> {{entry.price}}[ERROR ->]<span *ngIf="!entry.price">Gratuito</span></div>
                <div class="ellipsis" title="{{entr"): EventsComponent@109:101
The pipe 'amDateFormat' could not be found ("- /.box-body -->
              <div class="box-footer">
                <div class="ellipsis" titl[ERROR ->]e="{{ (entry.sdate  | amFromUnix) | amDateFormat:'LLLL'}}"><strong>Fecha Inicio</strong> {{ (entry.sd"): EventsComponent@115:42
The pipe 'amFromUnix' could not be found ("- /.box-body -->
              <div class="box-footer">
                <div class="ellipsis" titl[ERROR ->]e="{{ (entry.sdate  | amFromUnix) | amDateFormat:'LLLL'}}"><strong>Fecha Inicio</strong> {{ (entry.sd"): EventsComponent@115:42
The pipe 'amDateFormat' could not be found ("s" title="{{ (entry.sdate  | amFromUnix) | amDateFormat:'LLLL'}}"><strong>Fecha Inicio</strong> {{ ([ERROR ->]entry.sdate  | amFromUnix) | amDateFormat:'LLLL'}} </div>
                <div class="ellipsis" titl"): EventsComponent@115:135
The pipe 'amFromUnix' could not be found ("s" title="{{ (entry.sdate  | amFromUnix) | amDateFormat:'LLLL'}}"><strong>Fecha Inicio</strong> {{ ([ERROR ->]entry.sdate  | amFromUnix) | amDateFormat:'LLLL'}} </div>
                <div class="ellipsis" titl"): EventsComponent@115:135
The pipe 'amDateFormat' could not be found ("entry.sdate  | amFromUnix) | amDateFormat:'LLLL'}} </div>
                <div class="ellipsis" tit[ERROR ->]le="{{(entry.fdate  | amFromUnix) | amDateFormat:'LLLL'}}"><strong>Fecha T茅rmino</strong> {{(entry.fd"): EventsComponent@116:41
The pipe 'amFromUnix' could not be found ("entry.sdate  | amFromUnix) | amDateFormat:'LLLL'}} </div>
                <div class="ellipsis" tit[ERROR ->]le="{{(entry.fdate  | amFromUnix) | amDateFormat:'LLLL'}}"><strong>Fecha T茅rmino</strong> {{(entry.fd"): EventsComponent@116:41
The pipe 'amDateFormat' could not be found ("is" title="{{(entry.fdate  | amFromUnix) | amDateFormat:'LLLL'}}"><strong>Fecha T茅rmino</strong> {{([ERROR ->]entry.fdate  | amFromUnix) | amDateFormat:'LLLL'}} </div>
              </div><!-- box-footer -->
 "): EventsComponent@116:134
The pipe 'amFromUnix' could not be found ("is" title="{{(entry.fdate  | amFromUnix) | amDateFormat:'LLLL'}}"><strong>Fecha T茅rmino</strong> {{([ERROR ->]entry.fdate  | amFromUnix) | amDateFormat:'LLLL'}} </div>
              </div><!-- box-footer -->
 "): EventsComponent@116:134
Can't bind to 'ngForOf' since it isn't a known property of 'div'. ("template>
        <template [ngIf]="isOld == 'false'" >
          <div class="col-xs-12 col-md-4" [ERROR ->]*ngFor="let entry of events_news_filtered">
            <div class="box box-solid box-danger">
    "): EventsComponent@98:42
Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
        </template>
        <template [ngIf]="isOld == 'false'" >
          [ERROR ->]<div class="col-xs-12 col-md-4" *ngFor="let entry of events_news_filtered">
            <div class=""): EventsComponent@98:10
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("

          </div>
        </template>
        [ERROR ->]<template [ngIf]="isOld == 'false'" >
          <div class="col-xs-12 col-md-4" *ngFor="let entry of"): EventsComponent@97:8
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("


  </template>
  [ERROR ->]<template [ngIf]="fb_institutions?.length > 0">
    <!-- Content Header (Page header) -->
    <sect"): EventsComponent@21:2

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'D:\lazarillo\plataforma-lz\src'
 @ ./src/main.ts 5:0-74
 @ multi ./src/main.ts

ng build

Hash: 0251edf6e1354ca74247
Time: 32566ms
chunk    {0} main.bundle.js, main.bundle.js.map (main) 605 kB {3} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.js.map (styles) 172 kB {4} [initial] [rendered]
chunk    {2} scripts.bundle.js, scripts.bundle.js.map (scripts) 418 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 5.61 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

Desired functionality.

I have different modules and I created a shared modules to make refactoring of imports. I had duplicated many imports and they were moved to shared modules, to avoid the duplication.

Mention any other details that might be useful.

If I duplicate the imports of my shared module into others modules, works with prod.

Thanks in advance

picture jampueroc

Most helpful comment

AOT requires code that can be analyzed at build time. Try using the spread operator for the ng module exports instead of the array concatenation.

picture clydin on 17 Mar 2017
👍4 ❤1 🎉1

All 3 comments

AOT requires code that can be analyzed at build time. Try using the spread operator for the ng module exports instead of the array concatenation.

clydin picture clydin on 17 Mar 2017
👍4 ❤1 🎉1

I made the change that @clydin told and works. I didn't know the spread operator

let exports_modules = [...declarations_components,...imports_modules];

thanks

jampueroc picture jampueroc on 17 Mar 2017
👍1

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 7 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

daBishMan picture daBishMan  路  3Comments
5amfung picture 5amfung  路  3Comments
JanStureNielsen picture JanStureNielsen  路  3Comments
rwillmer picture rwillmer  路  3Comments
naveedahmed1 picture naveedahmed1  路  3Comments