I am trying to create a sample applicaiton with Angular 8 and using ngx-datatable.
I am constantly getting error 'ngx-datatable-column' is not a known element. I have already tried solutions like importing NgxDatatableModule into child component instead of appModule or restarting system after installation. It's still there. I am using all latest versions:
"#angular/core": "8.2.6",
"#swimlane/ngx-datatable": "^16.0.3",
NVM Node: 12.16.1
app.module.ts :
import { NgxDatatableModule } from '#swimlane/ngx-datatable';
#NgModule({
declarations: [
AppComponent,
LandingComponent
],
imports: [
BrowserAnimationsModule,
BrowserModule,
[NgxDatatableModule],
RouterModule.forRoot(routes, {useHash: true}),
SiLandingPageModule,
SharedModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
})
],
exports: [RouterModule],
bootstrap: [AppComponent]
})
Component file is exactly like given here : https://github.com/swimlane/ngx-datatable/blob/master/src/app/basic/inline.component.ts
In your imports section in app.module.ts change the below:
From:
[NgxDatatableModule]
To:
NgxDatatableModule
Not sure why but downgrading Node to 12.15.0 did the trick. The error went off!
Related
I'm working on a project which has a React component library, and a Next JS app which imports said library. I've read a lot of questions on SO and attempted most of the solutions to no avail.
We have the component library working, fonts and all, and in storybook looks great
There's two fonts we import in our package.json (in devDependencies)
"#fontsource/inter": "4.5.12",
"#fontsource/material-icons": "4.5.4",
The material-icons font is imported in our <Icon /> component
import "#fontsource/material-icons";
And referenced in the tailwind config
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx,mdx}"],
theme: {
fontFamily: {
sans: ["Inter", "ui-sans-serif", "sans-serif"],
heading: ["Inter", "ui-sans-serif", "sans-serif"],
},
This works in storybook with no problems
But when imported into the Next JS app and the same component used
The files seem to be available in the node_modules folder of the Next JS app
Here is the roll up config:
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";
import json from "#rollup/plugin-json";
import pkg from "./package.json";
export default [
{
input: "src/index.ts",
output: [
{
file: pkg.main,
format: "cjs",
sourcemap: true,
},
{
file: pkg.module,
format: "esm",
sourcemap: true,
},
],
plugins: [
resolve(),
commonjs(),
typescript({ tsconfig: "./tsconfig.json" }),
postcss(),
json(),
],
external: [
"react",
"react-dom",
"#fontsource/inter/400.css",
"#fontsource/inter/600.css",
"#fontsource/inter/700.css",
"#fontsource/material-icons",
"react-loading-skeleton/dist/skeleton.css",
],
},
{
input: "dist/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [dts()],
external: [
"react",
"react-dom",
"#fontsource/inter/400.css",
"#fontsource/inter/600.css",
"#fontsource/inter/700.css",
"#fontsource/material-icons",
"react-loading-skeleton/dist/skeleton.css",
],
},
];
QUESTION: what I'd ideally like to do is export all the referenced css from the component library, such that in the next app's _app.tsx I can use
import "#us/component-library/styles.css";
How do I configure rollup to bundle the referenced css and expose it in the build folder?
Also: if there is an alternative or better way of doing this, we aren't precious over the plugins used and would be open to being shown a better (or correct) way of doing this.
Appreciate any help!
If anyone is still in the same boat - here's how I solved it in the end...
New rollup.config.js
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";
import json from "#rollup/plugin-json";
import pkg from "./package.json";
import copy from "rollup-plugin-copy";
export default [
{
input: "src/index.ts",
output: [
{
file: pkg.main,
format: "cjs",
sourcemap: true,
},
{
file: pkg.module,
format: "esm",
sourcemap: true,
},
],
plugins: [
postcss(),
resolve(),
commonjs(),
typescript({ tsconfig: "./tsconfig.json" }),
json(),
copy({
targets: [
{
src: "node_modules/#fontsource/inter/files/*",
dest: "./dist/files",
},
{
src: "node_modules/#fontsource/material-icons/files/*",
dest: "./dist/files",
},
],
}),
],
external: ["react", "react-dom"],
},
{
input: "dist/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [dts()],
external: ["react", "react-dom"],
},
];
Then in src/theme/input.css
#import url("../../node_modules/#fontsource/inter/400.css");
#import url("../../node_modules/#fontsource/inter/600.css");
#import url("../../node_modules/#fontsource/inter/700.css");
#import url("../../node_modules/#fontsource/material-icons/index.css");
#import url("../../node_modules/react-loading-skeleton/dist/skeleton.css");
#tailwind base;
#tailwind components;
#tailwind utilities;
...
foo {
bar...
Then in our consuming Next app, I no longer have to have the #fontsource/font import in the package.json.
In my head, this works because the rollup build, using rollup-plugin-postcss, leverages the css imports and bundles everything together as part of the css, rather than trying to re-package imports or manage external dependencies from the consuming app.
Pretty sure my rollup config can still be trimmed down, in particular where I'm using rollup-plugin-copy to copy the #fontsource/font files. But for now this is working and means our consuming apps don't need to care about importing fonts.
However, this has is drawbacks as I'm not sure how this would work if we wanted to override the font.
Perhaps re-defining the inter font in the calling app? And then assigning something else to it?
Or maybe overriding the fontFamily in our tailwind config? Not sure yet. Will update when I have a better answer.
Hope this helps someone else - when I get more time to spend on trimming the rollup config I'll post the latest.
Kia Ora!
I have a React & Typescript / tailwind / postcss / Rollup setup to build a component library, at this repo.
Everything is working as intended apart from one issue; a corresponding import for ../styles/index.css is being included in the outputted dist/index.d.ts file. I wish to have declarations for my components, but not this CSS import.
The problem is that this index.css file is outside the dist directory, and is not included in the final library. Instead, the minified and purged tailwind css file is being generated and used instead.
Current solution
I am currently relying on a post-build command to remove the import from the file using sed:
scripts: {
...
"build": "rollup -c && cp dist.package.json dist/package.json",
"fix": "sed '1d' ./dist/index.d.ts > ./tmp.d.ts; mv ./tmp.d.ts ./dist/index.d.ts",
}
I do not feel this is an optimal approach. If I can prevent the import in the build process instead, this would be preferred.
Similar issues
I found this issue but the pseudo code provided does not work / is not complete. Furthermore, this feels like a workaround rather than an actual fix.
rollup.config.js
For what it is worth, my current rollup config is as follows:
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "#rollup/plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import del from "rollup-plugin-delete";
import simplevars from "postcss-simple-vars";
import nested from "postcss-nested";
import cssnext from "postcss-cssnext";
import cssnano from "cssnano";
/**
* #type {import('rollup').RollupOptions}
*/
export default {
input: "lib/index.tsx",
output: [
{
file: "dist/index.tsx",
format: "es",
sourcemap: false,
},
],
plugins: [
del({ targets: "dist/*" }),
peerDepsExternal(),
postcss({
config: {
path: "./postcss.config.js",
},
plugins: [
simplevars(),
nested(),
cssnext({ warnForDuplicates: false }),
cssnano(),
],
extensions: [".css"],
minimize: true,
modules: false,
extract: "index.css",
}),
resolve(),
typescript({
useTsconfigDeclarationDir: true,
}),
],
};
I'm simply trying to import the https://shoelace.style/ library for use within an Angular app.
I've tried both their recommended method of adding style and link elements into the index file, and I've also tried adding their NPM package and then adding the following to my angular.json
"styles": [
"src/styles.scss",
"node_modules/#shoelace-style/shoelace/dist/themes/base.css"
],
"scripts": [
"node_modules/#shoelace-style/shoelace/dist/shoelace.js"
],
However no matter what I do, whenever I try to use a particular Shoelace component such as <sl-button> I get 'sl-button' is not a known element
What do I need to do to get this working?
Try adding this to your app module
schemas: [CUSTOM_ELEMENTS_SCHEMA]
Just make sure to apply the custom elements schema as shown below.
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { AppComponent } from './app.component';
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
You can find more about CUSTOM_ELEMENTS_SCHEMA here
I am trying to bundle my js and scss files in rollup ready for production.
Rollup takes all of my files and outputs them to a build dir, the result looks like this:
build
css
bundle.css
js
bundle.js
bundle.js.gz
As you can see, I am using the gzipPlugin for my js files.
I also want to use gzipPlugin to handle my css, but I cannot figure out how to do this.
My current setup looks like this:
import babel from "rollup-plugin-babel";
import { terser } from "rollup-plugin-terser";
import multi from "#rollup/plugin-multi-entry";
import gzipPlugin from "rollup-plugin-gzip"
import scss from "rollup-plugin-scss"
import del from "rollup-plugin-delete"
export default [{
input: "src/**/*.logic.js",
output: {
file: "build/assets/js/main.min.js",
format: "umd",
name: "Logic"
},
plugins: [
del({ targets: "build" }),
gzipPlugin(),
terser({
output: {
wrap_iife: false
}
}),
multi({
exports: true
}),
babel({
exclude: "node_modules/**"
})
]
}, {
input: "src/all.scss",
plugins: [
scss({
output: "build/assets/css/styles.min.css",
outputStyle: "compressed"
}),
]
}
];
My question is:
How can I get my outputted css file to be gzipped?.
I think I am missing something fairly simply, I just can't see how to get gzipPlugin working on the css file.... thanks in advance for any tips.
I think that you just need to add the gzipPlugin in the plugins session of your CSS generation.
Like this:
input: "src/all.scss",
plugins: [
scss({
output: "build/assets/css/styles.min.css",
outputStyle: "compressed"
}),
gzipPlugin()
]
I was able to accomplish this by specifying the additionalFiles option:
// rollup.config.js
...
import gzipPlugin from "rollup-plugin-gzip";
import css from "rollup-plugin-css-only";
export default {
input: "src/main.js",
output: {
...
file: "public/build/bundle.js",
},
plugins: [
gzipPlugin({
additionalFiles: ["./public/build/bundle.css"],
}),
css({ output: "bundle.css" }),
...
]
}
One little quirk I ran into was that the build has to be run twice. The first time without gzip to generate the bundle.css and the second time to gzip the bundle.css from the previous run.
So I am creating ASP.NET MVC application with angular. For my app I need service worker, so I found that angular has it's own (https://www.npmjs.com/package/#angular/service-worker). So I installed and found that I need to register it in order to work. I took example from github (https://github.com/webmaxru/pwatter/tree/ngsw/src/app). As I try to register and run everything I always getting this error :
I've read that I need to use HTTPS and/or production mode instead of development, so I tried various combinations and nothing worked... Could someone please explain me what I am doing wrong?
This is my app.module.ts (without imports):
#NgModule({
// directives, components, and pipes
declarations: [
AppComponent
],
// modules
imports: [
BrowserModule,
HttpModule,
FormsModule,
RouterModule,
AppRouting,
ImageUploadModule.forRoot(),
NgbModule.forRoot(),
InfiniteScrollModule,
NouisliderModule,
ChartsModule,
NgxPaginationModule,
ServiceWorkerModule.register("\ngsw-worker.js")
],
// providers
providers: [
PushService,
],
bootstrap: [
AppComponent
]
})
export class AppModule { }