No provider for TemplateRef! Error: No provider for TemplateRef!

When you follow Angular's convention of using a SharedModule and add CloudinaryModule there:

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {ReactiveFormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {CloudinaryModule} from '@cloudinary/angular-4.x';

@NgModule({
  imports: [
    CommonModule,
    HttpModule,
    ReactiveFormsModule
    CloudinaryModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    HttpModule,
    ReactiveFormsModule
    CloudinaryModule
  ],
  providers: []
})
export class SharedModule {
}

You add Cloudinary in app.module.ts:

import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {Http} from '@angular/http';
import './rxjs-extensions';
import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';
import {SharedModule} from './shared/shared.module';
import {HomeModule} from './home/home.module';
import {Cloudinary} from 'cloudinary-core';
import {CloudinaryModule} from '@cloudinary/angular-4.x';

export const cloudinaryLib = {
  Cloudinary: Cloudinary
};

export const config = {
  cloud_name: 'name',
  upload_preset: 'preset'
};

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    SharedModule,
    NgbModule.forRoot(),
    CloudinaryModule.forRoot(cloudinaryLib, config),
    HomeModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent
  ],
  bootstrap: [
    AppComponent
  ],
  providers: []
})
export class AppModule {
}

If you then add the 'responsive' attribute to the cl-image tag, it will fail with:

No provider for TemplateRef! Error: No provider for TemplateRef!

@bjornharvold

@bjornharvold I can't reproduce the issue.
Can you add details about your setup? E.g. are you using Angular CLI? Using Webpack / other bundler directly? Building Angular AOT? Any other relevant information for us to consider?

Angular CLI v1.0.6
Angular 4.1.x
Lazy loading of modules

I tried around for an hour to replicate the carousel problem at first. Then I thought "I have issues with other modules being included in the SharedModule. I wonder what would happen if I didn't include it in SharedModule but instead only in the modules where I need it." I think the issue is lazy loading.

Trying to reproduce #88

@bjornharvold

@bjornharvold I tried to reproduce according to your instructions here - https://github.com/cloudinary/cloudinary_angular/tree/issue_88

I'm using lazy loading and a shared module.
Everything is still working as expected, both for ng serve and ng serve --aot.
Can you reproduce based on that branch?

@eitanp461

traveliko-spa-frontend.zip

Hi @eitanp461 Attaching a skeleton project of our actual app that has this behavior.

@eitanp461

@eitanp461 Did you get a chance to look at the app I sent here?

Cheers

@bjornharvold

@bjornharvold Sorry for the late reply.
The problem is that the responsive attribute is used as an HTML element attribute by our SDK, but also used as a directive selector by ng2-responsive.

A quick-fix solution could be to Remove Cloudinary or ng2-responsive from the shared module and load in specific modules which require them.

I will work on a long term solution and update in this issue.

Navigation Menu

Repository navigation

No provider for TemplateRef! Error: No provider for TemplateRef! #88

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

No provider for TemplateRef! Error: No provider for TemplateRef! #88

Description

Activity

eitanp461 commented on Jun 3, 2017

bjornharvold commented on Jun 4, 2017

eitanp461 commented on Jun 4, 2017

bjornharvold commented on Jun 5, 2017

bjornharvold commented on Jun 27, 2017

eitanp461 commented on Jun 27, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions