I am attempting to refactor my code to use Angular/Material for the front end, however I cannot seem to get it to work...
I have followed what has been said on the angular material website and from Youtube video tutorials, but it just doesn't seem to want to work.
I have run the normal npm commands:
npm install --save #angular/material#latest #angular/cdk#latest #angular/animations#latest
I have imported a material button into my app.module.ts, along with the animations:
// Other imports are above
import { MatButtonModule } from '#angular/material/button';
#NgModule({
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
Routing,
GreyhoundComponentModule,
BrowserAnimationsModule,
MatCheckboxModule,
MatButtonModule,
],
declarations: [
AppComponent
],
providers:[
DecoratorUtils,
Configuration,
{
provide: HTTP_INTERCEPTORS,
useClass: AppHttpInterceptor,
multi: true
}
],
bootstrap: [ AppComponent]
})
export class AppModule { }
I have imported a theme into the CSS file: style.css
#import '~#angular/material/prebuilt-themes/indigo-pink.css';
And in the HTML file I have used the element tags as given by the angular/material website:
<button mat-button color="primary">Primary</button>
Change to
import { MatButtonModule } from '#angular/material';
To as you need to import button module from angular material and add
#import '~bootstrap-sass/assets/stylesheets/bootstrap';
Related
I am new to angular and construction my first angular front end to use an OAS generated angular-typescript package. The OAS is also generated from code and then used to generate the angular-typescript package (angular version 8.2.14). Then I just created a new angular project with "ng new ..." and installed the before generated package with "npm install local/dir --save". Then I imported the module in the app.module.ts with "import { ApiModule } from "package name". So far it works (but also nothing happens).
When I import he ApiModule in the #NgModule angular just stops working, no error, no debug. I tried using demo apis from HowTos, these to import without problems. So I guess that there is a problem with the generated package, everything I tried and change in the last weeks didn't help.
Maybe you have some ideas where I can start debugging. Thank you.
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from "../environments/environment";
import { HttpClientModule } from "#angular/common/http";
import { ApiModule, BASE_PATH} from "#angular-schule/book-monkey-api"; // Works
// import { ApiModule, BASE_PATH} from "#jakoberpf/congstats-typescript-angular-api"; // Does not work
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ApiModule,
],
providers: [{ provide: BASE_PATH, useValue: environment.CONGSTATS_BASE_PATH }],
bootstrap: [AppComponent]
})
export class AppModule { }
Found the issue. When importing an using an open api or swagger generated package you have to not only import the HttpClientModule ( see angular issue 20575 ) but also provide it in the providers of the app module.
ISSUE FIXED
Inside of my SharedModule I want to split up related pieces of code into multiple child modules. When I do that however, I lose the common imports from the shared module. For example, I import the FormsModule before my SharedChildModule, but when I try to use ngModel inside my SharedChildModule it tells me that ngModel isn't available. Is it possible to have child modules inside the shared module and also to have those modules inherit the modules from the SharedModule?
When I include the components and directives from ChildSharedModule directly in the SharedModule I have no issues. It is only when I attempt to move those into a child module and then import the whole module into SharedModule that I get the errors.
#NgModule({
declarations: [],
exports: [
CommonModule,
FormsModule,
ChildSharedModule
],
imports: [
CommonModule,
FormsModule,
ChildSharedModule
]
})
export class SharedModule { }
#NgModule({
declarations: [
ChildValidatorDirective,
ChildControlComponent
],
exports: [
ChildValidatorDirective,
ChildControlComponent
]
})
export class SharedChildModule {}
You can not push down dependencies of modules, but you can export modules upwards.
#NgModule({
declarations: [],
exports: [
ChildSharedModule
],
imports: [
ChildSharedModule
]
})
export class SharedModule { }
#NgModule({
imports: [
CommonModule,
FormsModule
],
declarations: [
ChildValidatorDirective,
ChildControlComponent
],
exports: [
ChildValidatorDirective,
ChildControlComponent,
CommonModule,
FormsModule
]
})
export class SharedChildModule {}
Now SharedModule will import SharedChildModule and will receive everything that is exported by that child module. Since SharedModule is also exporting SharedChildModule then parents who import it will also receive CommonModule and FormsModule.
You are basically breaking tree shaking here, and making unit testing very difficult.
Angular will no longer be able to drop unused modules, because you are coupling everything together. It will also become difficult to remove FormsModule from SharedChildModule because you won't know how many parents depend upon it.
You should try to keep your modules as singular and flat as possible, and have each module import only what it specifically needs.
You can export another module when the consumer doesn't know that other module is a requirement.
I have AppModule and LazyLoadedModule. What I want from each module components is:
Requests from AppModule components use LoggerInterceptor and UrlInterceptor;
Requests from LazyLoadedModule components use LoggerInterceptor, UrlInterceptor and also FilterInterceptor.
app.module.ts
#NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
CoreModule,
HttpClientModule,
],
providers: [
{provide: HTTP_INTERCEPTORS,useClass: LoggerInterceptor,multi: true},
{ provide: HTTP_INTERCEPTORS, useClass: UrlInterceptor, multi: true }
],
})
export class AppModule {}
lazy-loaded.module.ts
#NgModule({
declarations: [
LazyLoadedComponent,
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: FilterInterceptor, multi: true }
],
})
export class LazyLoadedModule {}
The problem is that when LazyLoadedModule is lazy loaded, FilterInterceptor is not included to the interceptors thread, like it was never injected.
Any thoughts?
I struggled with the same problem, my use case is slightly different but it might work for you.
My scenario:
- I have a feature module for integration with third party, this third party API has bearer token authentication, so I set in on my interceptor.
if you only provide the interceptor from your feature module, it won't get called, similarly if you provide it from your AppModule it would work.
The fix for me was reimporting the HttpClientModule in the feature module and it worked.
You should however carefully test that when reimporting HttpClientModule, the interceptors provided in AppModule still work
I am a newbie in Angular4
I want to integrate CKeditor in Angular4
As i follow this url but it's for Angular 2 not working in Angular 4.
As i have check there
System.config({
"map": {
"ng2-ckeditor": "npm:ng2-ckeditor",
},
"packages": {
"ng2-ckeditor": {
"main": "lib/index.js",
"defaultExtension": "js",
},
}
});
but there is no any option for System.config in Angular 4
Then i have integrated froala but it gives licence error and also not allow to configure and i tried but it's not effecting
How can i integrate CKeditor in Angular4?
I assume you use angular-cli to create your angular 4 project , you dont need system.config in angular-clli, that only used in system.js, and the code you have there is telling system.js where to find the ckeditor module.
in case you not clear, just check whether your project have an 'angular-cli.json' file, if there is, then you can follow the below steps:
use npm install ng2-ckeditor to install the ng2-ckeditor
in your app.module.ts, you should have something like this
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { CKEditorModule } from 'ng2-ckeditor';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CKEditorModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
and then
in your index.html add
<script src="https://cdn.ckeditor.com/4.5.11/full/ckeditor.js"></script>
inside head section. alternatively, you can save the js file inside your project, then insde .angular-cli.json file, add the file of that file into scripts array
then you are good to use ckeditor in your angular 4 project
I am working on ng2-translate in my ionic2 app and following its Github's docs instructions.
However when I import "TranslateModule"
import {TranslateModule} from 'ng2-translate/ng2-translate';it gives me this error "Module my_node-module_path/ng2-translate/ng2-translate has no exported member TranslateModule."
And I have npm installed it.
Can anyone help me out here? Thanks.
**#NgModule Code **
#NgModule({
declarations: [
MyApp,
FillForm,
MainPage,
TabsPage
],
imports: [
IonicModule.forRoot(MyApp),
BrowserModule,
HttpModule,
TranslateModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
FillForm,
MainPage,
TabsPage
],
providers: []
})
File Structure