All imports are unused.
L1: import { BrowserModule } from '#angular/platform-browser';
L2: import { NgModule, ErrorHandler } from '#angular/core';
please somebody help me i'm tired, i read that removing "declaration.d.ts" file will solve this but i dont know how to remove this file and where it is
What you have to do is just change tslint.json 's
"no-unused-variable": [
true
]
to
"no-unused-variable": [
false
]
This will solve your problem
Related
I'm working on a POC with remix + react material (as that's what we use in our main app). I've gotten most things working but I can't get icons to work. Any page that has an icon just hangs and remix yells at me.
Lambda :\Users\chanp\git\my-remix-app\server timed out after 5 seconds
Here's my entry.client. I stole this from the semi-official remix + mui app. I updated the hydrate to work with react 18 (hydrateRoot instead of just hydrate)
import { CacheProvider } from "#emotion/react";
import CssBaseline from "#mui/material/CssBaseline";
import { ThemeProvider } from "#mui/material/styles";
import * as React from "react";
import { useState } from "react";
import { hydrate } from "react-dom";
import { RemixBrowser } from "#remix-run/react";
import createEmotionCache from "./createEmotionCache";
import ClientStyleContext from "./styles/ClientStyleContext";
import muiTheme from "./styles/muiTheme";
import { ThemeProvider as EmotionThemeProvider } from "#emotion/react";
import Layout from "./src/components/Layout";
import { hydrateRoot } from "react-dom/client";
const container = document.getElementById("app");
// const root = hydrateRoot(container, <App tab="home" />);
interface ClientCacheProviderProps {
children: React.ReactNode;
}
function ClientCacheProvider({ children }: ClientCacheProviderProps) {
const [cache, setCache] = useState(createEmotionCache());
function reset() {
setCache(createEmotionCache());
}
return (
<ClientStyleContext.Provider value={{ reset }}>
<CacheProvider value={cache}>{children}</CacheProvider>
</ClientStyleContext.Provider>
);
}
hydrateRoot(
document,
<ClientCacheProvider>
<EmotionThemeProvider theme={muiTheme}>
<ThemeProvider theme={muiTheme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<RemixBrowser />
</ThemeProvider>
</EmotionThemeProvider>
</ClientCacheProvider>,
);
Versions
React v18.2
Remix v1.6
Other verions from package.json
"#emotion/react": "^11.10.0",
"#emotion/styled": "^11.10.0",
"#mui/icons-material": "^5.8.4",
"#mui/lab": "^5.0.0-alpha.93",
"#mui/material": "^5.9.3",
"#mui/styled-engine-sc": "^5.9.3",
"#mui/styles": "^5.9.3",
"#mui/x-date-pickers": "^5.0.0-beta.4",
I'm not sure what else would be pertinent to this question. Just let me know if I need to provide more details.
Doesn't work
import { Sensors } from '#mui/icons-material'
Works
import Sensors from "#mui/icons-material/Sensors";
I also had to add
"#mui/icons-material"
to
serverDependenciesToBundle
in the Remix.config.js
Guessing ESBuild is to blame here. Still learnig the quirks so an edit of this answer as to why would be good. Or maybe a link to a resource to a more generic explanation as to why.
I wanted to know how I can hide a header in Ionic 4 by scrolling down the page, and re-show it when scrolling up.
I found many solutions on how to do that, but they all turned out to not working or being out-of-date.
So I collected all piece of information I could find to provide this answer.
Thanks to this video I got it to work.
First of all call ionic g directive directives/hide-header. You can of course replace directive/hide-header with your own path and name.
hide-header.directive.ts
import { Directive, HostListener, Input, OnInit, Renderer2 } from '#angular/core';
import { DomController } from '#ionic/angular';
#Directive({
selector: '[appHideHeader]'
})
export class HideHeaderDirective implements OnInit {
#Input('header') header: any;
private lastY = 0;
constructor(
private renderer: Renderer2,
private domCtrl: DomController
) { }
ngOnInit(): void {
this.header = this.header.el;
this.domCtrl.write(() => {
this.renderer.setStyle(this.header, 'transition', 'margin-top 700ms');
});
}
#HostListener('ionScroll', ['$event']) onContentScroll($event: any) {
if ($event.detail.scrollTop > this.lastY) {
this.domCtrl.write(() => {
this.renderer.setStyle(this.header, 'margin-top', `-${ this.header.clientHeight }px`);
});
} else {
this.domCtrl.write(() => {
this.renderer.setStyle(this.header, 'margin-top', '0');
});
}
this.lastY = $event.detail.scrollTop;
}
}
After that, in your template:
<ion-header #header>
<ion-toolbar><ion-title>Test</ion-title></ion-toolbar>
</ion-header>
<ion-content scrollEvents="true" appHideHeader [header]="header">
</ion-content>
Take care of the scrollEvents, appHideHeader and the [header] attributes! The last one takes the header element as argument, in this case #header.
Most of the code is the same as shown in the video. I changed the host-property from the #Directive and used the more up-to-date HostListener.
If you want to use the directive in more than one directive, you need to create a SharedModule.
To do so, create the module with ng g module shared. After that, add the HideHeaderDirective to the declarations and the exports array.
shared.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { HideHeaderDirective } from './directives/hide-header.directive';
#NgModule({
declarations: [HideHeaderDirective],
exports: [HideHeaderDirective],
imports: [
CommonModule
]
})
export class SharedModule {}
Now add the shared module to all the modules you want to use the directive in.
Note: You cannot import the directive in app.module.ts and use it in a submodule! You have to import the shared module in every direct module you want to use the directive in.
My current versions of node, npm and ionic:
For this you can just place the ion-header before the ion-content. this is the simple answer for that.
As written in the docs here, to import FileOpener you should place
import { FileOpener } from "#ionic-native/file-opener";
in you app.module.ts, but always get "Invalid provider in ngModule..."
Apparently the right path to import FileOpener is
import { FileOpener } from "#ionic-native/file-opener/ngx";
That's looking in the plugin source file
I'm trying to use a custom component called UserCardComponent in two different pages in my ionic v3 app.
I followed this answer (the one with 26 votes) which says to declare custom components in "a specific page's module.ts file". Custom component in ionic v3
So I firstly declared the component in my HomePageModule and was able to use it fine within the home.html.
home.module.ts
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { UserCardComponent } from '../../components/user-card/user-card';
#NgModule({
declarations: [
HomePage,
UserCardComponent
],
imports: [
IonicPageModule.forChild(HomePage)
],
})
export class HomePageModule {}
I then tried to declare it (in the same way) in ContactsPageModule to use in contacts.html however I get the following error:
Type UserCardComponent is part of the declarations of 2 modules: HomePageModule and ContactsPageModule!
Please consider moving UserCardComponent to a higher module that imports HomePageModule and ContactsPageModule.
You can also create a new NgModule that exports and includes UserCardComponent then import that NgModule in HomePageModule and ContactsPageModule
When I try to just declare the UserCardComponent in the app.module.ts file I get a Template parse error and the custom component won't work in any pages.
Can you advise me on what to do? The error says to move the "UserCardComponent to a higher module that imports HomePageModule and ContactsPageModule. "
Can you tell me how I would do this? I'm new to ionic. Thanks
If you declare the UserCardComponent in the HomePageModule, you only need to import the HomePageModule in the ContactsPageModule but it introduces dirty dependency between theses modules.
A better way is to declare UserCardComponent in a specific module UserCardModule and then to import this specific module in HomePageModule and in ContactsPageModule.
user-card.module.ts
import { NgModule } from '#angular/core';
import { UserCardComponent } from './user-card';
#NgModule({
declarations: [
UserCardComponent
]
})
export class UserCardModule {}
home.module.ts
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { UserCardModule } from '../../components/user-card/user-card.module';
#NgModule({
declarations: [
HomePage
],
imports: [
IonicPageModule.forChild(HomePage),
UserCardModule
],
})
export class HomePageModule {}
I'm trying to use SqlStorage in an ionic app. I'm getting the error in the title. I'm guessing I need to include SqlStorage but I'm not sure where. My code looks a lot like what's in the docs http://ionicframework.com/docs/v2/api/platform/storage/SqlStorage/ . How do you include SqlStorage?
var prefrences = {
foo: bar
}
let storage = new Storage(SqlStorage);
storage.set('storedPreferences', preferences);
Add SqlStorage to your list of 'include' packages via import statement. i.e
import {SqlStorage} from 'ionic-angular';
For example
import {SqlStorage,...} from 'ionic-angular';
#Page({
templateUrl: 'path/to/template'
})
export class MyPage {
constructor(){
let storage = new Storage(SqlStorage);
...
}
...
}