Installed via
ng add #ng-bootstrap/ng-bootstrap
NgbModule imported
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
imports: [NgbModule ]
added a component
<ngb-rating [max]="5" [(rate)]="starRating" [readonly]="false"></ngb-rating>
Error returned
'ngb-rating' is not a known element:
Change to only import the component
import { NgbRating} from '#ng-bootstrap/ng-bootstrap';
imports: [NgbRating ]
Error returned
Type NgbRating does not have 'ɵmod' property.
it seems changing
import { NgbRating} from '#ng-bootstrap/ng-bootstrap';
imports: [NgbRating ]
to
import { NgbRatingModule} from '#ng-bootstrap/ng-bootstrap';
imports: [NgbRatingModule ]
Fixed the problem
Related
This question already has answers here:
Angular4 Exception: Can't bind to 'ngClass' since it isn't a known property of 'input'
(13 answers)
Closed 8 months ago.
I have an img tag inside a div and I wanted to use ngClass to mirror the image. When I use the ngClass in the img tag I got an error : Can't bind to 'ngClass' since it isn't a known property of 'img'
My component.ts file:
imgFlipStyleY = 'img-defaultY';
flipY(){
if(this.imgFlipStyleY == 'img-changeY') {
this.imgFlipStyleY = 'img-defaultY';
} else {
this.imgFlipStyleY = 'img-changeY';
}
}
The app.component.html file:
<div class="container">
<img [src]="previewUrl" [ngClass]="[imgStyle]" [style.filter]="'grayscale('+grayScale+')'"/>
<button (click)="flipY()">Flip</button>
</div>
My component.css file:
.img-defaultY {
transform: rotateY(0);
}
.img-changeY {
transform: rotateY(-0.5turn);
}
My app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import {MatSliderModule} from '#angular/material/slider';
import {MatButtonModule} from '#angular/material/button';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { HttpClientModule } from '#angular/common/http';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { CommonModule } from '#angular/common';
#NgModule({
imports: [ BrowserModule, CommonModule, FormsModule, BrowserAnimationsModule, MatButtonModule, MatSliderModule, HttpClientModule, NgbModule ],
declarations: [ AppComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
I imported the CommonModule in my app.module so I don't know what's the problem... Can anyone help me?
How does your module looks like? Maybe you forgot to import CommonModule in your module i.e.:
#NgModule({
imports: [
CommonModule, // <- this here
// other imports
]
})
export class MyModule {}
I've got a strange one and unfortunately I don't have code to share because I'm not sure it would add value to this post.
I have two components (User and Project). They both import Shared which is doing all of my material design imports and re-exporting them. On one of my modules when I apply the class mat-raised-button to an element, it works perfectly, on the other, it's only pulling in some of the CSS and injecting it into a <style> tag on the page but it's missing a bunch of other styles that are being injected to the working component on the working module. This has nothing to do with my style scopes because I can spin up a brand new component in both modules and it works great on one, not at all on the other (w/o doing anything other than adding the button with that class).
What's weird is that it IS pulling in some of the mat-raised-button styles, just not all of them. Is there some sort of mechanism that can prevent certain styles from being injected? I'm happy to post whatever code might help and I apologize that this is such a broad question, but unfortunately I don't have much to go on here...
UPDATE: I did some more digging and see that it's the mat-button class that's not working. I tried importing MatButtonModule directly into my failing module and seeing the same behavior...still not working correctly.
UPDATE 2: the buttons aren't working in my root app.component either. They're only working on one of my modules. This is really weird. Here's the code for the working module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { SharedModule } from '../../Shared/Module/shared.module';
import { UserRegistrationComponent } from '../Components/user-registration.component';
import { CreateAccountDialogComponent } from '../Components/create-account-dialog.component';
import { FormsModule } from '#angular/forms';
import { ValidationErrorsComponent } from '../../user/Components/sharedcomponents/validation-errors.component';
import { UserLoginComponent } from '../Components/user-login.component';
#NgModule({
declarations: [
UserRegistrationComponent,
CreateAccountDialogComponent,
ValidationErrorsComponent,
UserLoginComponent
],
imports: [
CommonModule,
SharedModule,
FormsModule
],
entryComponents: [
CreateAccountDialogComponent
]
})
export class UserModule { }
and here's the code for the module that's not working:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { SharedModule } from '../../Shared/Module/shared.module';
import { ProjectFileUploadComponent } from '../Components/project-file-upload.component';
import { ProjectComponent } from '../Components/project.component';
import { FormsModule } from '#angular/forms';
import { MatButtonModule } from '#angular/material';
#NgModule({
declarations: [
ProjectFileUploadComponent,
ProjectComponent
],
imports: [
CommonModule,
SharedModule,
FormsModule,
MatButtonModule
]
})
export class ProjectModule { }
From what you're describing, I would think that you had local styles cancelling out global styles. The way to determine that is to comment out the styles in your local component, and see if your material design styles turn back up.
If that is the case, all you need to do is add and ViewEncapsulation.None statement to your #Component statement, to stop it cancelling out external styles:
#Component({
selector: 'speed-dial-fab',
templateUrl: './speed-dial-fab.component.html',
styleUrls: ['./speed-dial-fab.component.css'],
animations: speedDialFabAnimations,
encapsulation: ViewEncapsulation.None
})
So not a bugged module. Not voodoo either!
I have developed a library in an angular application (which is generated using angular cli) and the library contains a component with its own template file and stylesheet. However, when I load the module in the app.module.ts and run the app (using ng serve for simplicity), the styles within the stylesheet are not rendered.
The library is generated using ng generate library
The library is contained within the projects directory of the app
The component is present within <name of the component>/src/lib directory
The app.module.ts file contains the following code:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { GuitarChordGeneratorModule } from 'projects/guitar-chord-generator/src/public-api';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
GuitarChordGeneratorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Below is a snippet from the guitar-chord-generator.component.ts file:
import { Component, OnInit, Input } from '#angular/core';
import { Chord } from './chord';
import { GCSGConfig } from './gcsgconfig';
#Component({
selector: 'lib-guitar-chord-generator',
templateUrl: './guitar-chord-generator.component.html',
styles: ['./guitar-chord-generator.component.css']
})
The image below is the directory structure of the app.
As you can see that guitar-chord-generator.component.css is the CSS file for the component.
Your component has
styles: ['./guitar-chord-generator.component.css']
The styles property takes an array of strings that contain CSS code.
You should be using styleUrls
styleUrls: ['./guitar-chord-generator.component.css']
I can't import #angular/animations in app.module.shared file:
When i import #angular/animations in app.module.browser file animations don't work.
What i need to do for use material animations in angular asp.net core 2 template?
I initially added the animations import into the app.module.shared file and I got the same error. To fix it I moved the import into the app.module.browser file.
This is how I left my module.browser:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { AppModuleShared } from './app.module.shared';
import { AppComponent } from './components/app/app.component';
#NgModule({
bootstrap: [ AppComponent ],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppModuleShared
],
providers: [
{ provide: 'BASE_URL', useFactory: getBaseUrl }
]
})
export class AppModule {
}
export function getBaseUrl() {
return document.getElementsByTagName('base')[0].href;
}
Example of using BrowserAnimationsModule:
https://github.com/aspnet/JavaScriptServices/commit/c0c47e3def208873c470a524a826f8d235a5f9de
The error you posted is caused because#angular/animations uses DOM references, like document and window.
By default, ASP.NET Core MVC SPA apps created using the initial template will pre-render your Javascript code on serverside, as defined in your Index view.
<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>
So you can't add DOM references on server and shared modules.
You have to add #angular/animation to app.module.browser.ts and then use it on your submodules and/or components.
I am getting this runtime error with my routing when upgrading to RC6 (this includes child routes):
ListingComponent is not part of any NgModule or the module has not
been imported into your module
This error indicates that I have not added ListingComponent to ngModule but it is there as a declaration.
In app.module I have all my components as declarations. I also import my routing component. The routing component has a sub routing component called listing.routes.
Here is my app.module.ts:
import {NgModule, CUSTOM_ELEMENTS_SCHEMA, ReflectiveInjector } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import {FormsModule, FormBuilder} from '#angular/forms';
import { NgClass, NgStyle} from '#angular/common';
import { AppComponent } from './app.component';
import {routing} from './app.routes';
import {ListingModule} from './components/listing/listingmodule';
import {ListingComponent} from './components/listing/listing.Component';
#NgModule({
imports: [BrowserModule, routing],
providers: [],
declarations: [AppComponent, ListingComponent, ListingModule],
bootstrap: [AppComponent]
})
export class AppModule {
}
Here is my app.routes.ts (which I import as routes):
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import {ListingRoutes} from './components/listing/listing.routes';
import {SplashComponent} from './components/splash/splash.component';
export const appRoutingProviders: Routes = ([
{ path: '', component: SplashComponent },
{ path: 'login', component: SplashComponent },
...ListingRoutes
]);
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutingProviders);
And here is my listing.routes.ts:
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import {ListingModule} from './repairreturnmodule';
import {ListingComponent} from '../listing/listing.component';
export const ListingRoutes: Routes = [
{
path: '',
component: ListingModule,
children: [
{ path: 'listing', component: ListingComponent},
]
}
];
export const ListingRouting: ModuleWithProviders = RouterModule.forChild(ListingRoutes);
Have I missed anything?
EDIT: you are importing your ListingComponent from
import {ListingComponent} from './components/listing/listing.Component';
if you using the same convention from the AppComponent (which you should) you should import from
import {ListingComponent} from './components/listing/listing.component';
See what is the name of the file. The rest of the code looks right.
I'm not sure if this is the source of the problem, but you are declaring a module there in the AppModule, when you should be importing it...
Try moving the ListingModule from declarations array to the imports array.