We are developing an application with Ionic 4 with the framework Angular.
We have an issue when we log to the application.
You can see the error on the picture:
My code is here:
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: '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: '',
redirectTo: '/tabs/tab2',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tabs/tab2',
pathMatch: 'full'
}
];
#NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
I don't believe in magic but when i delete one dot on the loadchildren exemple :
../tab3/tab3.module#Tab3PageModule -> ./tab3/tab3.module#Tab3PageModule
I do it on all the loadchildreds I'm saving the page I try to log in, same problem
and after I reput the dot like this
./tab3/tab3.module#Tab3PageModule -> ../tab3/tab3.module#Tab3PageModule
I'm saving, I try to log in again and it works fine. With this problem, we can't compile on ios.
I think you have to resolve relative paths for your tabs. Use augury chrome to check and resolve your routing. Also try to simplify your routing.
{
path: 'tab2',
loadChildren: () => import('./tab2/tab2.module').then(m => m.Tab2PageModule)
},
Related
No such file or directory, when using Vite and Antd Pro Layout
This is file vite.config.ts:
import { defineConfig } from 'vite';
import reactRefresh from '#vitejs/plugin-react-refresh';
import path from 'path';
import vitePluginImp from 'vite-plugin-imp';
export default defineConfig({
plugins: [
reactRefresh(),
vitePluginImp({
libList: [
{
libName: 'antd',
style: (name) => {
return `antd/lib/${name}/style/index.less`;
},
},
],
}),
],
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
...{
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
},
},
},
},
},
resolve: {
alias: [
{
find: /^~/,
replacement: path.resolve(__dirname, 'src'),
},
],
},
optimizeDeps: {
include: ['#ant-design/icons'],
},
});
This is my config to using antd, antd-pro-layout with vite.
But I received the error:
[vite] Internal server error: ENOENT: no such file or directory, open
'/Users/tranthaison/DEV/vite2-react-ts/srcantd/es/style/themes/default.less'
Can someone help me to fix it?
I had some problems when using React + Antd in Vite.
Thanks for #theprimone for the answer. But the answer is incomplete. I will complete the answer here.
First time, add additional config to Less Preprocessor:
Add this config to your vite.config.js file:
{
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
}
Second, setting module aliases to fix Less #import problem:
Again, add the following config into your vite.config.js file:
{
resolve: {
alias: [
{ find: /^~/, replacement: "" },
],
},
}
Last, install vite-plugin-imp plugin to solve Antd ES problem:
Install the vite-plugin-imp dependencies:
pnpm add -D vite-plugin-imp
# or
npm i -D vite-plugin-imp
then, setup the plugin in your vite.config.js file:
{
plugins: [
// React plugin here
vitePluginImp({
libList: [
{
libName: "antd",
style: (name) => `antd/es/${name}/style`,
},
],
}),
];
}
The final configuration in vite.config.js file will look like this:
import { defineConfig } from "vite";
import reactRefresh from '#vitejs/plugin-react-refresh';
import vitePluginImp from "vite-plugin-imp";
export default defineConfig({
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
resolve: {
alias: [
{ find: /^~/, replacement: "" },
],
},
plugins: [
reactRefresh(),
vitePluginImp({
libList: [
{
libName: "antd",
style: (name) => `antd/es/${name}/style`,
},
],
}),
],
});
Also work with #preact/preset-vite.
Ref:
https://github.com/theprimone/vite-react
https://github.com/ant-design/ant-design/issues/7850
https://github.com/vitejs/vite/issues/2185#issuecomment-784637827
Try to import antd styles like this:
vitePluginImp({
libList: [
{
libName: 'antd',
style: (name) => `antd/es/${name}/style`,
},
],
}),
More usage of Vite + React + Ant Design or other UI Library, this repo theprimone/vite-react might give you more or less inspiration.
I have a question about some code:
In routing.ts I have:
const routes: Routes = [
{
path: 'app',
component: HomeComponent,
canActivate: [AuthGuard],
children: [
{ path: "fp", component: FirstPageComponent }
]},
{
path: 'ro',
component: RouterOutletComponent,
children: [
{ path: 'login', component: LoginComponent },
{ path: 'signup', component: SignUpComponent },
{ path: 'forgotpass', component: ForgotPassComponent }
]},
{ path: "", redirectTo: "/app/fp", pathMatch: "full" },
];
HomeComponent.html have
<router-outlet></router-outlet>
RouterOutletComponent.ts
export class RouterOutletComponent {
constructor( public _page: Page) {
}
public ngOnInit() {
this._page.actionBarHidden = true;
}
}
RouterOutletComponent.html
<router-outlet></router-outlet>
When I am in LoginComponent, I want to navigate in SignUpComponent or in ForgotPassComponent. For navigate I use:
[nsRouterLink]="['/ro/signup']"
or
import { Router } from "#angular/router";
public gotosignup() {
this.router.navigate(['/ro/signup']);
}
In Android this navigate works very good, very fast. When I run in IOS simulator, this routing doesn't works? Why???
I try to remove from RouterOutletComponent and this work in IOS simulator. I try to use like below and work good.
[nsRouterLink]="['/signup']"
or
import { Router } from "#angular/router";
public gotosignup() {
this.router.navigate(['/signup']);
}
Can you share with me any idea, why? How to solution it inside RouterOutletComponent ??
My application is a bit large in size. It contains many feature modules and most are lazily loaded. I want to preload a lazily loaded module, which is included in forChild routes.
For this, I have referred to Angular documentation and followed their steps. I have provided a custom preloading strategy service mentioned below.
This is my custom preloading strategy file:
#Injectable()
export class CustomPreloadingWithDelayStrategy implements PreloadingStrategy {
preload(route: Route, load: () => Observable<any>): Observable<any> {
if (route.data && route.data['preload']) {
return load();
} else {
return Observable.of(null);
}
}
}
app-routing file,
const routes: Routes =
[
XXX,
{
path: '',
data: {
base: true
},
component: MyComp,
children: [
{
path: 'page1/:id',
loadChildren: 'XXXXXXX'
},
{
path: 'page2',
loadChildren: 'XXXXXXXX'
},
{
path: 'page3',
loadChildren: 'app/feature-modules/folder1/my-folder1-module#Folder1Module'
}];
#NgModule({
imports: [RouterModule.forRoot(routes, {useHash: true, preloadingStrategy: CustomPreloadingWithDelayStrategy})],
exports: [RouterModule],
entryComponents: [ ]
})
export class AppRoutingModule {}
My Folder1Module's routing file:
const routes: Routes = [{
path: 'sub-page1/:data1/:data2',
loadChildren: 'app/feature-modules/sub-pages/pages/sub-page1.module#SubPage1Module'
}, {
path: 'sub-page2/:data1',
loadChildren: 'app/feature-modules/sub-pages/pages/sub-page2.module#SubPage2Module',
data: {preload: true}
}];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class Folder1RoutingModule {
}
So when I open this route /page3/sub-page1/data1/data2, SubPage2Module is to be preloaded. But that is not happening.
I have spent nearly 2 hours to understand why the module is not pre-loaded even when I was doing everything right.
The problem lies with children, any route that is defined and further distributed with children is considered as a normal route even if you've defined your modules within the children with the help of loadChildren. The preloadingStrategy just takes modules to preload and not path/routes. The moment you've defined your routes under children it considers it as normal route and moves on to scan other routes that are provided with loadChildren. Following is the interpretation of Angular with your routes:
const routes: Routes =
[
XXX, // Normal path
{
path: '',
data: {
base: true
},
component: MyComp,
children: [ // Normal path (no module) as children is used, move on
{
path: 'page1/:id',
loadChildren: 'XXXXXXX'
},
{
path: 'page2',
loadChildren: 'XXXXXXXX'
},
{
path: 'page3',
loadChildren: 'app/feature-modules/folder1/my-folder1-module#Folder1Module'
},
],
},
{ path: 'abc', loadChildren: '../path/to/module#AbcModule', data: { preload: true }} // Module found, preload it!
];
If you debug closely in your custom CustomPreloadingWithDelayStrategy then you will observe that your route /page3/sub-page1/data1/data2 can't even make up to the route parameter of preload() method because preloading is all about loading module and not about loading routes. However, our route abc does make an appearance! Hope it helps :)
I have problem with routing in my application. I use Angular2+ and WebApi2. I created Angular from quickstart project and I added it to my WebApi solution. After configurating it, I launched first time app allthing work fine. Problems appear after I added routing. When I try to navigate to link included in routing table, the browser redirect me all time to one component. I searched how to deal with it but I didn't find anything. Below I present codes and file names:
RouteConfig.cs
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{*url}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
Share _Layout.cshtml
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="~/src/systemjs.config.js"></script>
<script>
System.import('./src/main.js').catch(function (err) { console.error(err); });
</script>
system.config.js
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: '/src/systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
}
}
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouterModule, Routes } from '#angular/router';
import { AppComponent } from './app.component';
import { HomePage } from './HomePage.component';
import { Test } from './Test.component';
import { HttpModule } from '#angular/http';
const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomePage },
{ path: 'test', component: Test },
{ path: '**', component: HomePage }
];
#NgModule({
declarations: [
AppComponent, HomePage, Test
],
imports: [
BrowserModule,
HttpModule,
RouterModule.forRoot(appRoutes)
],
providers: [],
bootstrap: [HomePage]
})
export class AppModule { }
Index.cshtml
<home-page></home-page>
Answer: all problems are caused by #RenderBody(). When I moved <home-page></home-page> under #RenderBody() all is working fine.
i work on a angular 4 project as front end for an asp.net MVC and API in the same solution when i set my routes i get the above error.
my code as following
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule, Routes } from '#angular/router';
import { DashboardComponent } from
'../../Components/dashboard/dashboard.component';
import { TraitComponent } from '../../Components/trait/trait.component';
const routes: Routes = [
{ path: ' ', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component:DashboardComponent },
{ path: 'Trait', component: TraitComponent },
//{ path: 'heroes', component: }
];
#NgModule({
imports: [
RouterModule.forRoot(routes) ,
CommonModule
],
exports: [RouterModule],
})
export class MyAppRoutingModuleModule {
i register/import the "myapprouting "and in my appmodule
that is code in my appComponent
<nav>
<a routerLink="localhost:56800/dashboard">Dashboard</a>
<a routerLink="localhost:56800/Trait">Heroes</a>
</nav>
<!-- <app-trait></app-trait>-->
<router-outlet>
</router-outlet>
In your app.module.ts, add the following :
{provide: APP_BASE_HREF, useValue: '/'}
to your **providers : [ ] ** so it would be like this :
providers: [{provide: APP_BASE_HREF, useValue: '/'},SomeService,AnotherService]
app.module.ts
import { APP_BASE_HREF } from '#angular/common'; <-- add those ***
const appRoutes: Routes = [
{ path: 'secondpage', component: SecondPageComponent },
];
#NgModule({
declarations: [
AppComponent,
NameEditorComponent,
ProfileEditorComponent,
SecondPageComponent
],
imports: [
BrowserModule,
// other imports ...
ReactiveFormsModule,
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } //
)
],
providers: [{provide: APP_BASE_HREF, useValue: '/'}], <-- add those **** bootstrap: [AppComponent]
})
export class AppModule { }
Try to change the routerLink to this :
[routerLink]="['/dashboard']
[routerLink]="['/Trait']