Error when using a tl-button component #161

WilliamAguera · 2018-06-22T14:31:25Z

Describe the bug
I just want to use a tl-button but an error appears, that doesn't make any sense to me.

ERROR
Error: StaticInjectorError(AppModule)[ModalService -> ContainerModalService]: 
StaticInjectorError(Platform: core)[ModalService -> ContainerModalService]: 
NullInjectorError: No provider for ContainerModalService!
Unable to display error. Open your browser's console to view.
Error: StaticInjectorError(AppModule)[ModalService -> ContainerModalService]: 
StaticInjectorError(Platform: core)[ModalService -> ContainerModalService]: 
NullInjectorError: No provider for ContainerModalService!

Module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import { AppComponent } from './app.component';
import { ButtonModule, FormModule, CoreModule } from 'truly-ui';

@NgModule({
  imports: [
    CommonModule, 
    BrowserModule,
    ButtonModule,
    FormModule,
    CoreModule.forRoot({
      theme: 'default'
    }),
    ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Html

<tl-button [text]="'Show Alert'" (click)="clickButton()"></tl-button>

Versions
Angular CLI: 6.0.3
Node: 8.9.4
OS: win32 x64
Angular: 6.0.3
Truly-UI: 2.29.2

Screenshots

lucasmhv · 2019-03-26T14:23:36Z

I'm getting this same error.

"dependencies": {
    "@angular/animations": "^6.1.10",
    "@angular/cdk": "^7.3.5",
    "@angular/common": "^6.1.10",
    "@angular/compiler": "^6.1.10",
    "@angular/core": "^6.1.10",
    "@angular/forms": "^6.1.10",
    "@angular/http": "^6.1.10",
    "@angular/platform-browser": "^6.1.10",
    "@angular/platform-browser-dynamic": "^6.1.10",
    "@angular/pwa": "^0.8.9",
    "@angular/router": "^6.1.10",
    "@angular/service-worker": "^6.1.0",
    "ajv": "^6.10.0",
    "core-js": "^2.5.4",
    "ngx-permissions": "^6.0.5",
    "object-path": "^0.11.4",
    "reflect-metadata": "^0.1.13",
    "rxjs": "~6.2.0",
    "string-format": "^2.0.0",
    "truly-ui": "^3.14.0",
    "ts-md5": "^1.2.4",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.6",
    "@angular/cli": "~6.2.5",
    "@angular/compiler-cli": "^7.2.10",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "@types/object-path": "^0.11.0",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.0.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "^3.2.4"
  }

WilliamAguera · 2019-03-26T15:02:24Z

Can you provide an Stackblitz example showing this error ? because it already been fixed.

lucasmhv · 2019-03-26T16:03:24Z

core.js:15723 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[ModalService -> ContainerModalService]: 
  StaticInjectorError(Platform: core)[ModalService -> ContainerModalService]: 
    NullInjectorError: No provider for ContainerModalService!
Error: StaticInjectorError(AppModule)[ModalService -> ContainerModalService]: 
  StaticInjectorError(Platform: core)[ModalService -> ContainerModalService]: 
    NullInjectorError: No provider for ContainerModalService!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8895)
    at resolveToken (core.js:9140)
    at tryResolveToken (core.js:9084)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981)
    at resolveToken (core.js:9140)
    at tryResolveToken (core.js:9084)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981)
    at resolveNgModuleDep (core.js:21217)
    at _createClass (core.js:21262)
    at _createProviderInstance (core.js:21234)
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8895)
    at resolveToken (core.js:9140)
    at tryResolveToken (core.js:9084)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981)
    at resolveToken (core.js:9140)
    at tryResolveToken (core.js:9084)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981)
    at resolveNgModuleDep (core.js:21217)
    at _createClass (core.js:21262)
    at _createProviderInstance (core.js:21234)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17289)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
defaultErrorLogger @ core.js:15723
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15771
next @ core.js:17770
schedulerFn @ core.js:13514
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:194
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:132
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:13498
(anonymous) @ core.js:17320
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:17257
onHandleError @ core.js:17320
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:395
push../node_modules/zone.js/dist/zone.js.Zone.runGuarded @ zone.js:164
_loop_1 @ zone.js:694
api.microtaskDrainDone @ zone.js:703
drainMicroTaskQueue @ zone.js:608
Promise.then (async)
scheduleMicroTask @ zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
scheduleResolveOrReject @ zone.js:879
ZoneAwarePromise.then @ zone.js:1012
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:17802
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1

abalad · 2019-03-26T17:08:23Z

@lucasmhv You could use our example available in stackblitz to reproduce the error. For apparently as @WilliamAguera already mentioned this error was corrected in previous versions.

tayambamwanza · 2019-07-11T18:40:54Z

I think the problem is that

Describe the bug
I just want to use a tl-button but an error appears, that doesn't make any sense to me.

ERROR
Error: StaticInjectorError(AppModule)[ModalService -> ContainerModalService]: 
StaticInjectorError(Platform: core)[ModalService -> ContainerModalService]: 
NullInjectorError: No provider for ContainerModalService!
Unable to display error. Open your browser's console to view.
Error: StaticInjectorError(AppModule)[ModalService -> ContainerModalService]: 
StaticInjectorError(Platform: core)[ModalService -> ContainerModalService]: 
NullInjectorError: No provider for ContainerModalService!

Module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import { AppComponent } from './app.component';
import { ButtonModule, FormModule, CoreModule } from 'truly-ui';

@NgModule({
  imports: [
    CommonModule, 
    BrowserModule,
    ButtonModule,
    FormModule,
    CoreModule.forRoot({
      theme: 'default'
    }),
    ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Html

<tl-button [text]="'Show Alert'" (click)="clickButton()"></tl-button>

Versions
Angular CLI: 6.0.3
Node: 8.9.4
OS: win32 x64
Angular: 6.0.3
Truly-UI: 2.29.2

Screenshots

@WilliamAguera , I think this will solve your issues

#255

WilliamAguera added the bug label Jun 22, 2018

WilliamAguera added a commit that referenced this issue Jun 26, 2018

fix(*): fix structure error of button modals and form. closes(#161)

328f285

WilliamAguera closed this as completed Jun 26, 2018

dashko mentioned this issue Nov 17, 2020

No provider for ContainerModalService! #398

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error when using a tl-button component #161

Error when using a tl-button component #161

WilliamAguera commented Jun 22, 2018

lucasmhv commented Mar 26, 2019

WilliamAguera commented Mar 26, 2019

lucasmhv commented Mar 26, 2019

abalad commented Mar 26, 2019

tayambamwanza commented Jul 11, 2019

Error when using a tl-button component #161

Error when using a tl-button component #161

Comments

WilliamAguera commented Jun 22, 2018

lucasmhv commented Mar 26, 2019

WilliamAguera commented Mar 26, 2019

lucasmhv commented Mar 26, 2019

abalad commented Mar 26, 2019

tayambamwanza commented Jul 11, 2019