For some reason, I am suddenly getting this error out of the blue, with no code changes. Any ideas what would be causing this?
I was able to solve this with adding NgbModule.forRoot() to my imports,
but now I get this error:
Property 'forRoot' does not exist on type 'typeof NgbModule'.
the application is running fine otherwise.
I've got the same problem with you.
I tried to add .forRoot() to NgbModule.
Try to configure your #NgModule decorator like this:
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(appRoutes),
NgbModule.forRoot()
]
Hope this help.
adding this one on my modules.ts works!
imports: [
NgbModule.forRoot()
]
For Angular 8, Make sure you have added NgbModule in app.module.ts
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(appRoutes),
NgbModule // .forRoot() is deprecated in Angular 8
]
And Downgrading "ng-bootstrap" to 5.x.x worked for me. I found the Angular ng-bootstrap compatibility here.
https://www.npmjs.com/package/#ng-bootstrap/ng-bootstrap
Related
I'm trying to style my FullCalendar according to technique 2 as described in this documentation. It says I should use PostCSS with postcss-custom-properties and postcss-calc.
My project uses Parcel for bundling and not WebPack like FullCalendar do in their examples, but from my understanding, using PostCSS in Parcel should just be plug-and-play by including a postcss.config.js file, so I figured it shouldn't be a huge issue. Here's what that file looks like:
module.exports = {
plugins: [
require('autoprefixer')({
"grid": true
}),
require('postcss-custom-properties')({
preserve: false,
importFrom: [
'src/style/fullcalendar-vars.css'
]
}),
require('postcss-postcss-calc')
]
};
So I have a file src/style/fullcalendar-vars.css. For the purpose of testing, it looks like this:
:root {
--fc-button-bg-color: red;
}
But nothing changes. When I look in the dev tools, there are no CSS variables set. Did I miss something?
I don't know if I can give you more information, I can't share a Stackblitz or anything else afaik, because the proplem lies in the building process. But I can link to the github repository where I am right now so you can look in other files and see what can be wrong https://github.com/WestCoastJitterbugsOrg/Personalized-Calendar/tree/c7633401cb1bb50488e11d0d306cb11333961f2d
Thank you!
I think the issue was that I used scss for everything else. A much simpler solution was to change the file extension of fullcalendar-vars.css to scss and import it in main.scss. No hassle, everything works like a charm! Finally I can have my pretty bright red buttons ;)
I'm working on the SAAS product with the client customization. Basically, we keep one SCSS entry point for generic styling and want to keep an additional entry point per brand. The problem is when I define an array in the angular.json it compiles all into the single css file. I want to have a file with generic css and a css file per client. Is it possible to do with angular-cli?
Basically, I found the answer myself. It's possible to use the following syntax in the angular.json:
"styles": [
"src/styles.css",
{ "input": "src/pre-rename-style.scss", "bundleName": "renamed-style" }
],
Here is the link to documentation: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/global-styles.md
Update 2020: use option "inject: false" if you want to tell the Angular CLI to NOT include the styles right away if you want to include them later. Older versions of Angular use "lazy" instead of inject.
"styles": [
"src/styles.scss",
{
"input": "src/styles/themes/dark.scss",
"bundleName": "dark",
"lazy": false
}
]
I'm writing a SharePoint Framework web-part in VS Code.
Unfortunately my scss styles file cannot be found, even though it's in the same path - please see the image below:
I also checked the styles file Events.module.scss in case an error in their was preventing it being imported, but there are no issues with that file...
I have tried restarting VS Code...tried moving the files around, tried renaming the scss file...
So what is missing here, and how can I resolve it?
I found the solution at How to use CSS Modules with TypeScript and webpack
Either we can bypass the import by using const s = require('./Button.css');
or, install Typings for CSS Modules like so:
npm install --save-dev typings-for-css-modules-loader
then add the new rule to webpack.config:
module: {
rules: [
{
test: /\.css$/,
include: path.join(__dirname, 'src/components'),
use: [
'style-loader',
{
loader: 'typings-for-css-modules-loader',
options: {
modules: true,
namedExport: true
}
}
]
}
]
}
it's a bit of a faff or kerfuffle but it is possible
I have installed ng-bootstrap in my project.
in app.module.ts I imported
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
I also added the declaration
imports:[ NgbModule.forRoot(),BrowserModule, FormsModule, HttpModule, routing]
Might be a stupid question but what do I do now to get the bootstrap benefits?
Thanks
i currently have an AngularJS + angular materialv1 app, and we're migrating it to Angular + angular materialv2.
We're running it in hybrid mode for now. All is working well except for the CSS styles.
Styles from material 1 and 2 are conflicting.
I read that i need to use the "compatibility mode" : https://github.com/angular/material2/pull/2790
But I couldn't find out how to set it. Would anyone know how to turn it on ?
Thanks for your help on this.
I found the solution here: i need to import the NoConflictStyleCompatibilityMode class along with MaterialModule
import { MaterialModule, NoConflictStyleCompatibilityMode } from '#angular/material';
...
#NgModule({
imports: [
MaterialModule,
NoConflictStyleCompatibilityMode
],...
If that can help someone...