The problem is that each time i fix my tabs they start working but if i restart my server i get the following error
RROR Error: Uncaught (in promise): Error: Cannot find module '../tab1/tab1.module'
Error: Cannot find module '../tab1/tab1.module'
I have done everything i know
This is my Tabs-routing.module.ts:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: '',
component: TabsPage,
children:[
{
path:'tab1',
children:[
{
path:'',
loadChildren:'../tab1/tab1.module#Tab1PageModule'
}
]
},
{
path:'tab2',
children:[
{
path:'',
loadChildren:'../tab2/tab2.module#Tab2PageModule'
}
]
},
{
path:'tab3',
children:[
{
path:'',
loadChildren:'../tab3/tab3.module#Tab3PageModule'
}
]
},
{
path:'tab4',
children:[
{
path:'',
loadChildren:'../tab4/tab4.module#Tab4PageModule'
}
]
},
{
path:'tab5',
children:[
{
path:'',
loadChildren:'../tab5/tab5.module#Tab5PageModule'
}
]
},{
path:'',
redirectTo: './tabs/tab1',
pathMatch:'full'
}
]
},{
path:'',
redirectTo: './tabs/tab1',
pathMatch:'full'
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class TabsPageRoutingModule {}
Try to change the loadChildren path:
children: [
{
path: 'tab1',
children: [
{
path: '',
loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
}
]
}]
Or
Try importing 'Tab1PageModule' in tabs.module.ts:
import { TabsPage } from './tabs.page';
import {Tab1PageModule} from '../tab1/tab1.module'; <-- Add this line
#NgModule({
imports: [
Tab1PageModule <-- Add this line
]
})
Related
I want to override the vuetify scss variable to change the v-text-field border-radius
I tried to set up the vueitfy3 with vite-plugin-vuetify and some addition config to overriding the variables, but faced so many warnings related to vuetify:
Code sample
/* nuxt.config */
import vuetify from 'vite-plugin-vuetify'
export default defineNuxtConfig({
build: {
transpile: ['vuetify'],
},
modules: [ /* updated */
async (options, nuxt) => {
nuxt.hooks.hook('vite:extendConfig', (config) =>
config.plugins.push(
vuetify({
styles: {
configFile: 'assets/variables.scss',
},
})
)
);
}
],
vite: {
define: {
'process.env.DEBUG': false,
},
css: {
preprocessorOptions: {
scss: {
additionalData: `
#import "assets/variables.scss";
`
}
}
}
},
app: {
head: {
title: '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
}
}
})
// plugins/vuetify.ts
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import 'vuetify/styles'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
components,
directives
})
nuxtApp.vueApp.use(vuetify)
})
/* assets/variables.scss */
#use 'vuetify/settings' with ( /* updated */
$application-background: red,
$application-color: red
);
All defined varibales in the 'varibales.scss' are detected, but i want to override the vuetify varibales.
I tried to set up the vueitfy3 with vite-plugin-vuetify and some addition config to overriding the variables, but faced with so many warnings related to vuetify.
warrnings
nuxt.config
import vuetify from 'vite-plugin-vuetify'
export default defineNuxtConfig({
build: {
transpile: ['vuetify'],
},
modules: [
async (options, nuxt) => {
nuxt.hooks.hook('vite:extendConfig', (config) =>
// eslint-disable-next-line #typescript-eslint/ban-ts-comment
// #ts-ignore
config.plugins.push(
vuetify({
styles: {
configFile: 'assets/variables.scss',
},
})
)
);
}
],
vite: {
define: {
'process.env.DEBUG': false,
},
css: {
preprocessorOptions: {
scss: {
additionalData: `
#import "assets/variables.scss";
`
}
}
}
},
app: {
head: {
title: '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
}
}
})
plugins/vuetify
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import 'vuetify/styles'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
components,
directives
})
nuxtApp.vueApp.use(vuetify)
})
assets/variables.scss
#use 'vuetify/settings' with (
$application-background: red,
$application-color: red
);
I'd like to rename "Qty" into "Quantity"
Follow things I already tried:
In 'spartacus-configuration.module.ts'
i18n: {
resources: {
en: {
product: {
addToCart: {
quantity: 'Quantity'
}
}
}
}
}
in src/assets/i18n-assets/en/produkt
{
...
"addToCart": {
...
"quantity": "Quantity",
...
},
...
}
The easiest way to overwrite translation values is to provide a new resource in app.module.ts config.
Firstly, new object with specific translations should be defined:
export const translationOverwrites = {
en: {
product: {
addToCart: {
quantity: 'Quantity',
},
},
},
};
and then it should be provided after default Spartacus translations:
...
providers: [
provideConfig({
i18n: { resources: translations },
}),
provideConfig({
i18n: { resources: translationOverwrites },
}),
],
Example code can look like this:
import { translations } from '#spartacus/assets';
import { provideConfig } from '#spartacus/core';
import { HttpClientModule } from '#angular/common/http';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { EffectsModule } from '#ngrx/effects';
import { StoreModule } from '#ngrx/store';
import { I18nModule } from '#spartacus/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SpartacusModule } from './spartacus/spartacus.module';
export const translationOverwrites = {
en: {
product: {
addToCart: {
quantity: 'Quantity',
},
},
},
};
#NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
StoreModule.forRoot({}),
EffectsModule.forRoot([]),
SpartacusModule,
I18nModule,
],
providers: [
provideConfig({
i18n: { resources: translations },
}),
provideConfig({
i18n: { resources: translationOverwrites },
}),
],
bootstrap: [AppComponent],
})
export class AppModule {}
For more information please look into Spartacus documentation: https://sap.github.io/spartacus-docs/i18n/#overwriting-individual-translations
I'm working on an Ionic 4 project, I've generated a tabs project.
What I want to do is create a Login page which is the default page.
When a user has signed in successfully I want to navigate to the tabs.
When I'm trying to do this I get the error:
Error: Cannot match any routes. URL Segment: 'tabs'
These are my routes:
const routes: Routes = [
{ path: '', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'Login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
];
In my Login Page I have a button as follows:
<ion-button expand="block" [href]="'tabs'" color="light" fill="outline">Sign in</ion-button>
When I generate a different page I am able to navigate to this page using the same way.
I was facing the same issue. I found a solution here. You need to add an additional route to your routes array.
const routes: Routes = [
{ path: '', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'Login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
];
Step 1 : Add an additional route to tabs page in your app-routing.module.ts
{ path: 'app', loadChildren: './pages/tabs/tabs.module#TabsPageModule' }
Step 2 : Add the tabs route inside the tabs-routing.module.ts
const routes: Routes =[
{
path:'tabs',
component:TabsPage,
children:[
{
path : 'home',
outlet : 'home',
component : HomePage
},
{
path : 'me',
outlet : 'me',
component : MePage
}
]
}
];
Step 3 : Link to the tabs page
<ion-button href="app/tabs/(home:home)" routerDirection='root'>Tabs</ion-button>
I faced the same issue. My first page is 'Sign In' page by default. I wanted to navigate to tabs module after button click.
app-routing.module.ts:
import { NgModule } from '#angular/core';
import { PreloadAllModules, RouterModule, Routes } from '#angular/router';
const routes: Routes = [
{ path: 'app', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: '', loadChildren: './sign-in/sign-in.module#SignInPageModule' },
{ path: 'search', loadChildren: './search/search.module#SearchPageModule' }
];
#NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
tabs.router.module.ts:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'home',
children: [
{
path: '',
loadChildren: '../home/home.module#HomePageModule'
}
]
},
{
path: 'my-requests',
children: [
{
path: '',
loadChildren: '../my-requests/my-requests.module#MyRequestPageModule'
}
]
},
{
path: 'add-request',
children: [
{
path: '',
loadChildren: '../add-request/add-request.module#AddRequestPageModule'
}
]
},
{
path: 'search',
children: [
{
path: '',
loadChildren: '../search/search.module#SearchPageModule'
}
]
},
{
path: 'profile',
children: [
{
path: '',
loadChildren: '../profile/profile.module#ProfilePageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/home',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/home',
pathMatch: 'full'
}
];
#NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
sign-in.module.ts:
....
const routes: Routes = [
{
path: "",
component: SignInPage
}
];
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [SignInPage]
})
....
sign-in.page.html:
<ion-button (click)="navigateToProfile()">Sign In</ion-button>
sign-in.page.ts:
navigateToProfile(){
this.navController.navigateRoot(`app/tabs/home`);
}
Overall, my solution was:
adding one more path: 'app' in my root module app-routing.module
navigating to root with route with NavController. See here for more details, I found it here.
In Ionic 4, I have an application that features a Master-Detail pattern on the Home Component. My tabs work for the highest-level (component) parents in the router tree.
However, my tabs disappear when I navigate to the Detail Page.
[An image of the detail page goes here.]
app-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
const routes: Routes = [
// { path: '', redirectTo: '/checklists', pathMatch: 'full' },
// { path: '', redirectTo: '/tabs', pathMatch: 'full' },
// { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: 'intro', loadChildren: './intro/intro.module#IntroPageModule' },
// Checklists are added to the tab bar here (or not)
{ path: 'checklists', loadChildren: './home/home.module#HomePageModule' }, // Tab Bar is Visible
// { path: 'checklists/:id', loadChildren: './checklist/checklist.module#ChecklistPageModule' }, // Tab Bar is Not Visible
{ path: 'checklists/:id',
children: [
{ path: '',
loadChildren: './checklist/checklist.module#ChecklistPageModule'
},
]
}, // Tab Bar is Not Visible
// Make checklists/:id into a NESTED route path? Nested, Auxiliary, and Child Routes
{ path: 'about', loadChildren: './about/about.module#AboutPageModule' },
{ path: 'contact', loadChildren: './contact/contact.module#ContactPageModule' }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
tabs.router.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { TabsPage } from './tabs.page';
import { HomePage } from '../home/home.page';
import { AboutPage } from '../about/about.page';
import { ContactPage } from '../contact/contact.page';
import { ChecklistPage } from '../checklist/checklist.page';
let tabsPath = 'tabs';
let tabsComponent = TabsPage;
let tabsEmptyPath = '';
let tabsRouteBasic = '/tabs/(home:home)';
// How do I turn the details of the About Tab into a variable?
// How does the router path/state get transported around in navigation parameters?
let aboutPath = 'about';
let aboutOutletName = 'about';
const routes: Routes = [
{
path: tabsPath,
component: tabsComponent,
children: [
{
path: tabsEmptyPath,
redirectTo: tabsRouteBasic,
pathMatch: 'full',
},
{
path: 'home',
outlet: 'home',
component: HomePage
},
{
path: 'checklist/:id', // This is temporary
outlet: 'home',
component: tabsComponent
},
{
path: 'checklist', // This is temporary
outlet: 'checklist',
component: ChecklistPage
},
// I would like to turn this path into a variable AND dynamically create its related component
{
path: aboutPath,
outlet: aboutOutletName,
component: AboutPage
},
// I would like to turn this path into a variable AND dynamically create its related component
{
path: 'contact',
outlet: 'contact',
component: ContactPage
}
]
},
{
path: '',
redirectTo: '/tabs/(home:home)',
pathMatch: 'full'
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
I'm using the route.navigate(['page']); conditionally and it does not work.
e.g
constructor(private route: Router){}
if(data.user != null) {
this.route.navigate(['page']);
} else {
alert('Please Login');
}
The URL changes but the page don't render.
This is my App Route Module
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
// App Components
import { HeaderComponent } from './header/header.component';
import { HomeComponent } from './home/home.component';
import { ResultsListComponent } from './results-list/results-list.component';
import { SigninComponent } from './signin/signin.component';
import { AffordabilityComponent } from
'./affordability/affordability.component';
import { RegisterComponent } from './register/register.component';
import { ShowroomComponent } from './showroom/showroom.component';
import { AdminComponent } from './admin/admin.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { OffersComponent } from './offers/offers.component';
import { AdminHeaderComponent } from './admin-header/admin-
header.component';
import { FooterComponent } from './footer/footer.component';
import { DealerProfileComponent } from './dealer-profile/dealer-
profile.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
// { path: '**', redirectTo: '', pathMatch: 'full' },
{ path: 'search_results', component: ResultsListComponent },
{ path: 'signin', component: SigninComponent },
{ path: 'results', component: AffordabilityComponent },
{ path: 'register', component: RegisterComponent },
{ path: 'showroom', component: ShowroomComponent },
{ path: 'admin', component: AdminComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'offers', component: OffersComponent },
{ path: 'profile', component: DealerProfileComponent }
];
#NgModule({
imports: [RouterModule.forRoot(routes, { enableTracing: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [
HeaderComponent,
HomeComponent,
ResultsListComponent,
SigninComponent,
AffordabilityComponent,
RegisterComponent,
ShowroomComponent,
AdminComponent,
DashboardComponent,
OffersComponent,
AdminHeaderComponent,
FooterComponent,
DealerProfileComponent
];