EliasBF / angular-typing-animation

Angular 4 Typing Animation Directive
MIT License
11 stars 10 forks source link

Hi I have some problem about ng build --prod #4

Open SimJH opened 6 years ago

SimJH commented 6 years ago

Hi. I found a err message.

I tried ng build --prod but It can't

message is

Type TypingAnimationDirective in MyFolder/node_modules/angular-typing-animation/typing-animation.directive.d.ts is part of the declarations of 2 modules: AppModule in MyFolder/src/app/app.module.ts and TypingAnimationModule in MyFolder/node_modules/angular-typing-animation/typing-animation.module.d.ts! Please consider moving TypingAnimationDirective in MyFolder/node_modules/angular-typing-animation/typing-animation.directive.d.ts to a higher module that imports AppModule in MyFolder/src/app/app.module.ts and TypingAnimationModule in MyFolder/node_modules/angular-typing-animation/typing-animation.module.d.ts. You can also create a new NgModule that exports and includes TypingAnimationDirective in MyFolder/node_modules/angular-typing-animation/typing-animation.directive.d.ts then import that NgModule in AppModule in MyFolder/src/app/app.module.ts and TypingAnimationModule in MyFolder/node_modules/angular-typing-animation/typing-animation.module.d.ts.

Could you help me ??

EliasBF commented 6 years ago

Hi.

That apparently happens because you are including the TypingAnimationDirective directive in the declarations of a module. Try better to add the TypingAnimationModule module in the imports and use the directive globally in your components.

This is an example of the declaration of a module that uses this directive and the command ng build --prod does not give problems

import { BrowserModule } from '@angular/platform-browser'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
import { HttpModule } from '@angular/http'

import { TypingAnimationModule } from 'angular-typing-animation'
import { ObfuscatingAnimationModule } from 'angular-obfuscating-animation'

import { KeyboardService } from './services/keyboard.service'
import { ArticlesService } from './services/articles.service'
import { MediaQueryService } from './services/media-query.service'

import { AppComponent } from './app.component'
import { HomeComponent } from './home/home.component'
import { BlogComponent } from './blog/blog.component'
import { ContactComponent } from './contact/contact.component'
import { AboutComponent } from './about/about.component'
import { ArticleComponent } from './article/article.component'

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    BlogComponent,
    ContactComponent,
    AboutComponent,
    ArticleComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: 'blog', component: BlogComponent },
      { path: 'blog/:slug', component: ArticleComponent },
      { path: 'about', component: AboutComponent },
      { path: 'contact', component: ContactComponent },
      { path: '', component: HomeComponent },
      { path: '**', redirectTo: '', pathMatch: 'full' }
    ]),
    HttpModule,
    BrowserAnimationsModule,
    TypingAnimationModule,
    ObfuscatingAnimationModule
  ],
  providers: [KeyboardService, ArticlesService, MediaQueryService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Thanks for this contribution, I will update the readme instructions, so that this directive is used as a module.

Samin005 commented 5 years ago

import TypingAnimationModule instead of TypingAnimationDirective in app.module.ts and add TypingAnimationModule to imports array.

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { TypingAnimationModule } from 'angular-typing-animation';

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, TypingAnimationModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }