Comments (47)
Finally yes. I will implement the solution in the upcoming days.
from localize-router.
Looks like this is not working with nested lazy loading... top level lazy loaded components get loaded but lazy loaded components with routes declared with forChild(routes) get the "Cannot match any routes" error
Here's an example where the terms/privacy policy page work as expected but the lazy loaded module breaks with the Cannot match any routes error:
import { Location } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { LocalizeRouterModule, LocalizeRouterSettings, LocalizeParser } from 'localize-router';
import { LocalizeRouterHttpLoader } from 'localize-router-http-loader';
export function HttpLoaderFactory(translate: TranslateService, location: Location, settings: LocalizeRouterSettings, http: HttpClient) {
return new LocalizeRouterHttpLoader(translate, location, settings, http);
}
const routes: Routes = [
{ path: '', loadChildren: './pages/home/home-tabs/home-tabs.module#HomeTabsPageModule' },
{ path: '', loadChildren: './pages/category/category-tabs/category-tabs.module#CategoryTabsPageModule' },
{ path: 'terms', loadChildren: './pages/terms/terms.module#TermsPageModule' },
{ path: 'privacy', loadChildren: './pages/privacy-policy/privacy-policy.module#PrivacyPolicyPageModule' },
{ path: 'search', loadChildren: './pages/search/search.module#SearchPageModule' },
{ path: 'video', loadChildren: './pages/video/video.module#VideoPageModule' }
];
@NgModule({
imports: [
LocalizeRouterModule.forRoot(routes, {
parser: {
provide: LocalizeParser,
useFactory: HttpLoaderFactory,
deps: [TranslateService, Location, LocalizeRouterSettings, HttpClient]
}
}),
RouterModule.forRoot(routes)
],
exports: [LocalizeRouterModule, RouterModule]
})
export class AppRoutingModule { }
And here's the lazy loaded module's routes:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { LocalizeRouterModule } from 'localize-router';
import { HomeTabsPage } from './home-tabs.page';
const routes: Routes = [
{
path: 'browse',
component: HomeTabsPage,
children: [
{
path: 'popular',
children: [
{
path: '',
loadChildren: '../popular/home-popular.module#HomePopularPageModule'
}
]
},
{
path: 'latest',
children: [
{
path: '',
loadChildren: '../latest/home-latest.module#HomeLatestPageModule'
}
]
},
{
path: 'trending',
children: [
{
path: '',
loadChildren: '../trending/home-trending.module#HomeTrendingPageModule'
}
]
},
{
path: '',
redirectTo: '/browse/popular',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/browse/popular',
pathMatch: 'full'
}
];
@NgModule({
imports: [
LocalizeRouterModule.forChild(routes),
RouterModule.forChild(routes),
TranslateModule
],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
from localize-router.
Even if this was resolved at any point of time, there had to be a regression. As of today only top level route of a lazy-loaded module (the one with empty string path) is loaded properly, any child routes it contains resolve in Cannot match any routes
error.
It would be great if we could reopen this issue @meeroslav
from localize-router.
A work around to this is to add a route in others translation language. If you have many languages and many subroutes that can be painfull but if like me you have to translate 2 languages, you're going to be able to use lazyloading and copy paste urls that the users can enter in the browser to arrive directly on the web page.
For Exemple:
In appModule
export const routes: Routes = [
{
path: '',
component: NavigationComponent,
children: [
{
path: 'admin', loadChildren: './+admin/admin.module#AdminModule'
},
{
path: 'users', loadChildren: './+users/users.module#UsersModule'
}
]
}
];
In submodule:
export const routes: Routes = [
{
path: '',
component: AdminComponent,
children: [
{ path: '', component: ListUserFormComponent },
{ path: 'profile/:userid', component: UserDetailComponent },
{ path: 'profile/:userid/cat/:catid', component: CatDetailComponent }, // english
{ path: 'profile/:userid/chat/:catid', component: CatDetailComponent }, // french
{ path: 'profile/:userid/cat/:catid/fur', component: FurDetailComponent }, // english
{ path: 'profile/:userid/chat/:catid/fourrure', component: FurDetailComponent } // french
]
}
];
fr.sjon :
"ROUTES.partners": "partners",
"ROUTES.cat": "chat",
"ROUTES.fur": "fourrure",
en.json:
"ROUTES.partners": "partners",
"ROUTES.cat": "cat",
"ROUTES.fur": "fur",
from localize-router.
I have dig a little bit more why doesn't work in my case and found out that LocalizeRouterService.traverseRouteSnapshot
when checking for segments is excluding paths that have 'empty' fragments as a parent...
this line:
if (snapshot.firstChild && snapshot.firstChild.routeConfig && snapshot.firstChild.routeConfig.path) {
will skip route configuration when lazy module has default route set as empty with parent component in, something like this:
const lazyRoutes: Routes = [
{
path: '',
component: ContainerComponent,
children: [
{
path: 'child1',
component: ChildComponent1
},
{
path: 'child2',
component: ChildComponent2
},
]
changeLanguage
executed on the path <lazyModulePath>/child1
will not work
from localize-router.
can we reopen this issue @meeroslav ? or I can create a new issue with repro...
from localize-router.
Currently having the same issue as mentioned here. I'm curious about the solution you came up with.
from localize-router.
@meeroslav changeLanguage executed on the path
lazyModulePath/child1
will not work.
some news here?
from localize-router.
@timmyrosen This library seems to be dead, we have tried all the suggested fixes in this library but none works. We already migrated to https://github.com/gilsdav/ngx-translate-router and everything works like a charm with a good maintainer support.
Also works completely with Angular Universal.
from localize-router.
Can you suggest a temporary workaround?
from localize-router.
At the moment unfortunately not, except for not using lazy loading.
from localize-router.
Hi, to me looks like it is not working with any child route.
Can you confirm?
from localize-router.
@NKjoep What do you mean by "any child route"?
from localize-router.
I meant not lazy loaded child route. However I think I fixed the issue I had. I ended with a broken configuration.
from localize-router.
Hi, do you have any updates for this issue ?
from localize-router.
@Messilius thanks for the tip! have you actually tried that already? :) does it work?
from localize-router.
It work in the project im currently doing. The only thing that dont work is when there is 2 subsequent lazymodule than a lazy child. But with one layer of lazy loading and then child components it work.
from localize-router.
Any update on this? It's a problem of angular or a problem of this module?
from localize-router.
It's dependent on angular updating the router, here's the issue: angular/angular#16282
Latest comment from the angular team here: angular/angular#16308 (comment)
from localize-router.
Dear Meeroslav,
I'm stuck with this problem of child routes and lazy loading.
Route translations is a must for multi languages website.
I have made a GIT that reproduce exactly the problem (if it can help you)...
Here is it : https://github.com/MisterEffix/localize-router-and-sub-routing
from localize-router.
As I commented before in some other PR, if you look at this fn from the sources:
/**
* Change language and navigate to translated route
* @param lang
* @param extras
*/
LocalizeRouterService.prototype.changeLanguage = function (lang, extras) {
var _this = this;
if (lang !== this.parser.currentLang) {
var rootSnapshot_1 = this.router.routerState.snapshot.root;
this.parser.translateRoutes(lang).subscribe(function () {
_this.router.navigateByUrl(_this.traverseRouteSnapshot(rootSnapshot_1), extras);
});
}
};
Everything is ok (page stays the same and translations are in place) until the _this.router.navigateByUrl()
is called.
What do you think?
(ps = also I'd use a take(1) there --> this.parser.translateRoutes(lang).take(1).subscribe(...
)
from localize-router.
Has there been any resolution to this?
from localize-router.
My production build is always broken and i get a 404 when loading the lazyloaded frontpage. I get a 404 when loading the page. Everything works when not creating a production build.
from localize-router.
any updates on this one? I mean, no pressure :)
from localize-router.
@marko999, this bug was fixed and closed 4 days ago.
Please upgrade to version 1.0.0-rc.3
to see the changes.
If you want to see it in action, refer to demo/cli
in the solution.
There will be a public github page soon.
Let me know if there is anything else I can help you with.
from localize-router.
Thanks for fixing the bug!
I haven't had time to check out the new version yet but do you think there will be any problems with extending your LocalizeRouterConfigLoader
to catch errors from the load()
method like this?
from localize-router.
@CamusAran, it's safe to extend LocalizeRouterConfigLoader
as long as the functionality is kept. There might be problems though if some other Module creates it's own override of SystemJsNgModuleLoader
and then those two end up in a race condition.
Maybe you'd like to propose improvement of the LocalizeRouterConfigLoader
by adding error handler on load?
from localize-router.
@meeroslav I did think about suggesting that but I don't know if it is in within the scope of the package. Ideally it'd be implemented upstream but that issue is over a year old now.
What do you think?
from localize-router.
@CamusAran generally, it's not within the scope of this package. But then again, having conflict with another loader is not desired behavior either.
If you think this error handling is still needed, we can make LocalizeRouterConfigLoader extendable and replaceable. That way you can create external package for people that need error handling.
from localize-router.
@meeroslav Thanks, I'll get back to you once I've had a chance to work on it (most likely next year).
from localize-router.
Still doesn't work for me, changeLanguage
method is breaking redirecting to default route for that module...other case when it needs a workaround is when user wants to land to lazy loaded child route, I need pathMatch: 'full'
and duplicated translated route in order to make it work
from localize-router.
This also still does not work for me...
It appears once I successfully navigate to the route in one language, it will start working for the others. For instance, the route in English is results
which coincides directly with the path specified in the routes ({ path: "results", component: ResultsComponent }
)... In this case, I can navigate to that route in English because the path string is identical to the localized route. Once I navigate there, I can then change language and it will work correctly... Even navigating away and then back in another language will now work.
But if I try to navigate to the route by the localized value (not the exact value specified in the routes.path
) I get redirected as if the route doesn't exist...
url: "/fr/search-fr/resultsfr"
urlAfterRedirects: "/fr/search-fr"
from localize-router.
Looking at the demo/cli
example app... When I console out the instantiated LocalizeRouterService each of the routes in the object have a data.localizeRouter.path
property which coincides with the path specified in the RouterModule routes.
When I do the same for my lazy loaded module, there is no data.localizeRouter.path
property for each of the routes.
from localize-router.
I fixed my problem by creating explicit routing modules which get imported into the main module like the demo/cli
app has done...
ex:
core-router.module.ts // module that imports and exports RouterModule and LocalizeRouterModule
core.module.ts // imports CoreRouterModule
This did create a new issue when trying to load the lazy module... Error: StaticInjectorError[InjectionToken CompositionEventMode]:
This is currently being discussed (with a temporary fix) here: angular/angular-cli#8917 (comment)
from localize-router.
I had the same issue too, it has been a year, too bad that it's not fixed yet.
from localize-router.
@meeroslav some news here?
from localize-router.
I just started using Angular. Very sad to see such problem is still not fixed for more than a year. I am looking for solution for a similar problem.
lazyModulePath/:parameter
from localize-router.
The issue seems to come back with the upgrade to Angular 6.
I have the same issue. When changing language, the component reload (it occurs when hitting navigate
or navigateByUrl
in the 'changeLanguage` function)
The function : LocalizeRouterService.traverseRouteSnapshot
will return a redundant url path like "fr/index/index" and then the router navigate to an unknown url => go back to home.
EDIT : After fixing the function LocalizeRouterService.traverseRouteSnapshot
to return a valid url like "fr/index".
The component reload (ngOnInit is called) when a navigation occurs in the changeLanguage
function :
this.router.resetConfig(this.parser.routes);
if (useNavigateMethod) {
this.router.navigate([url], extras);
} else {
this.router.navigateByUrl(url, extras);
}
from localize-router.
The issue should be resolved in both 1.0.1 version (for Angular 4.0.0-5.2.5) and 2.0.0-RC.1 (for Angular 6/7)
There was a bug in path traversing when translating the full route.
from localize-router.
It worked for me in the version 2.0.0-RC.2 (for Angular 6/7) but it doesn't in the 2.0.0-RC.1 but i'm glad that its solved. Thanks a lot guys!
from localize-router.
Are there any updates on this? I'm having the same issue aswell.
Here is my lazy loaded module routing:
export const routes: Routes = [
{
path: '',
component: AuthDashboardPage,
children: [
{
path: '',
loadChildren: () => import('../reservations/reservations.module').then(m => m.ReservationsModule)
},
{
path: 'profile',
loadChildren: () => import('../profile/profile.module').then(m => m.ProfileModule)
}
]
}
];
My first child route with the empty path (ReservationsModule) gets loaded correctly, but the second path "profile" does not. It redirects to the home page.
Here is my lazy loaded module:
@NgModule({
imports: [SharedModule, LocalizeRouterModule.forChild(routes), routing, ...materialModules],
exports: [],
declarations: [AuthDashboardPage],
providers: []
})
export class AuthDashboardModule {}
from localize-router.
@timmyrosen I did make it work.
Your code seems good to me at the first glaze.
Have you tried loadChild Components like
loadChildren: './core/site/static/static.module#StaticModule'
( can you try this to check! )
from localize-router.
Hello,
Is there any fix for this problem yet ?
from localize-router.
IIRC, I could only get it working by specifying a path for everything.
This configuration is working for me:
import { LocalizeParser, LocalizeRouterModule, LocalizeRouterSettings, ManualParserLoader } from 'localize-router';
import { RouterModule, Routes } from '@angular/router';
import { CategoryTabsPage } from '@base/pages/category/category-tabs/category-tabs.page';
import { HomeTabsPage } from '@base/pages/home/home-tabs/home-tabs.page';
import { HttpClient } from '@angular/common/http';
import { Location } from '@angular/common';
import { NgModule } from '@angular/core';
import { PredictivePreloadStrategy } from '@base/core/predictive-preload';
import { SettingsTabsPage } from '@base/pages/settings/settings-tabs/settings-tabs.page';
import { TranslateService } from '@ngx-translate/core';
import { UserTabsPage } from '@base/pages/user/user-tabs/user-tabs.page';
import { environment } from '@environment';
export function LocalizeRouterFactory(
translate: TranslateService,
location: Location,
settings: LocalizeRouterSettings,
http: HttpClient
) {
settings.alwaysSetPrefix = false;
settings.defaultLangFunction = () => {
return environment.languages.default;
};
return new ManualParserLoader(translate, location, settings, environment.languages.supported, 'ROUTES.');
}
const routes: Routes = [
{
path: 'all',
component: HomeTabsPage,
children: [
{
path: 'latest',
data: {
preload: true,
rss: true
},
children: [
{
path: '',
loadChildren: () => import('@base/pages/home/latest/home-latest.module').then(m => m.HomeLatestPageModule)
}
]
},
{
path: 'popular',
data: {
preload: true,
rss: true
},
children: [
{
path: '',
loadChildren: () =>
import('@base/pages/home/popular/home-popular.module').then(m => m.HomePopularPageModule)
}
]
},
{
path: 'trending',
data: {
preload: true,
rss: true
},
children: [
{
path: '',
loadChildren: () =>
import('@base/pages/home/trending/home-trending.module').then(m => m.HomeTrendingPageModule)
}
]
}
]
},
{
path: 'category/:topic',
component: CategoryTabsPage,
children: [
{
path: 'popular',
data: {
preload: true,
rss: true
},
children: [
{
path: '',
loadChildren: () =>
import('@base/pages/category/popular/category-popular.module').then(m => m.CategoryPopularPageModule)
}
]
},
{
path: 'latest',
data: {
rss: true,
preload: true,
delay: 15000
},
children: [
{
path: '',
loadChildren: () =>
import('@base/pages/category/latest/category-latest.module').then(m => m.CategoryLatestPageModule)
}
]
},
{
path: 'trending',
data: {
rss: true,
preload: true,
delay: 15000
},
children: [
{
path: '',
loadChildren: () =>
import('@base/pages/category/trending/category-trending.module').then(m => m.CategoryTrendingPageModule)
}
]
}
]
},
{
path: 'copyright',
data: {
ondemand: true
},
loadChildren: () => import('@base/pages/legal/copyright/copyright.module').then(m => m.CopyrightPageModule)
},
{
path: 'infringement',
data: {
ondemand: true
},
loadChildren: () => import('@base/pages/legal/infringement/infringement.module').then(m => m.InfringementPageModule)
},
{
path: 'terms',
data: { ondemand: true },
loadChildren: () => import('@base/pages/legal/terms/terms.module').then(m => m.TermsPageModule)
},
{
path: 'privacy',
data: {
ondemand: true
},
loadChildren: () =>
import('@base/pages/legal/privacy-policy/privacy-policy.module').then(m => m.PrivacyPolicyPageModule)
},
{
path: 'search/:query',
data: {
preload: true,
rss: true
},
loadChildren: () => import('@base/pages/search/search.module').then(m => m.SearchPageModule)
},
{ path: 'search', redirectTo: '/search/', pathMatch: 'full' },
{
path: 'settings',
component: SettingsTabsPage,
children: [
{
path: 'general',
children: [
{
path: '',
data: {
ondemand: true,
user: true
},
loadChildren: () =>
import('@base/pages/settings/general/settings-general.module').then(m => m.SettingsGeneralPageModule)
}
]
},
{
path: 'customize',
children: [
{
path: '',
data: {
ondemand: true,
user: true
},
loadChildren: () =>
import('@base/pages/settings/customize/settings-customize.module').then(
m => m.SettingsCustomizePageModule
)
}
]
},
{
path: 'security',
children: [
{
path: '',
data: {
ondemand: true,
user: true
},
loadChildren: () =>
import('@base/pages/settings/security/settings-security.module').then(m => m.SettingsSecurityPageModule)
}
]
}
]
},
{
path: 'user/:uid',
component: UserTabsPage,
children: [
{
path: 'favorites',
data: {
delay: 21000,
preload: true,
rss: true,
user: true
},
loadChildren: () =>
import('@base/pages/user/favorites/user-favorites.module').then(m => m.UserFavoritesPageModule)
},
{
path: 'history',
data: {
delay: 21000,
preload: true,
rss: true,
user: true
},
loadChildren: () => import('@base/pages/user/history/user-history.module').then(m => m.UserHistoryPageModule)
},
{
path: 'playlists',
data: {
delay: 21000,
preload: true,
rss: true,
user: true
},
loadChildren: () =>
import('@base/pages/user/playlists/user-playlists.module').then(m => m.UserPlaylistsPageModule)
}
]
},
{
path: 'video/:video',
loadChildren: () => import('@base/pages/video/video.module').then(m => m.VideoPageModule),
data: {
preload: true
}
},
{
path: 'welcome',
loadChildren: () => import('@base/pages/home/default/home-default.module').then(m => m.HomeDefaultPageModule),
data: {
preload: true
}
},
{
path: '',
redirectTo: '/welcome',
pathMatch: 'full'
}
];
@NgModule({
imports: [
LocalizeRouterModule.forRoot(routes, {
parser: {
provide: LocalizeParser,
useFactory: LocalizeRouterFactory,
deps: [TranslateService, Location, LocalizeRouterSettings, HttpClient]
}
}),
RouterModule.forRoot(routes, {
enableTracing: environment.enableTracing,
preloadingStrategy: PredictivePreloadStrategy
})
],
exports: [LocalizeRouterModule, RouterModule],
providers: [PredictivePreloadStrategy]
})
export class AppRoutingModule {}
And the package.json is here:
{
"name": "megabyteapp",
"version": "0.0.2",
"private": true,
"dependencies": {
"@angular/animations": "^9.0.0-rc.7",
"@angular/cdk": "^9.0.0-rc.6",
"@angular/common": "^9.0.0-rc.7",
"@angular/core": "^9.0.0-rc.7",
"@angular/fire": "^5.3.0-rc.4",
"@angular/forms": "^9.0.0-rc.7",
"@angular/material": "^9.0.0-rc.6",
"@angular/platform-browser": "^9.0.0-rc.7",
"@angular/platform-browser-dynamic": "^9.0.0-rc.7",
"@angular/platform-server": "^9.0.0-rc.7",
"@angular/router": "^9.0.0-rc.7",
"@angular/service-worker": "^9.0.0-rc.7",
"@capacitor/core": "^1.0.0",
"@ionic-native/app-availability": "^5.15.0",
"@ionic-native/core": "^5.15.0",
"@ionic-native/facebook": "^5.15.0",
"@ionic-native/firebase": "^5.15.0",
"@ionic-native/google-plus": "^5.15.0",
"@ionic-native/launch-review": "^5.19.1",
"@ionic-native/social-sharing": "^5.15.0",
"@ionic-native/splash-screen": "^5.15.0",
"@ionic-native/status-bar": "^5.15.0",
"@ionic-native/twitter-connect": "^5.15.0",
"@ionic-native/user-agent": "^5.15.0",
"@ionic/angular": "^4.11.7",
"@ionic/angular-server": "^0.0.2",
"@ionic/pro": "2.0.4",
"@ionic/storage": "^2.2.0",
"@nguniversal/express-engine": "9.0.0-next.9",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"@sentry/browser": "^5.7.1",
"algoliasearch": "^3.33.0",
"cordova-plugin-appavailability": "^0.4.2",
"cordova-plugin-facebook4": "^6.0.0",
"cordova-plugin-firebase": "^2.0.5",
"cordova-plugin-x-socialsharing": "^5.4.4",
"core-js": "^2.6.2",
"croppie": "^2.6.3",
"email-validator": "^2.0.4",
"express": "^4.15.2",
"firebase": "^7.6.1",
"linkifyjs": "^2.1.8",
"localize-router": "2.0.0-RC.3",
"localstorage-polyfill": "^1.0.1",
"lodash.debounce": "^4.0.8",
"lodash.throttle": "^4.1.1",
"md5": "^2.2.1",
"memoizee": "^0.4.14",
"moment": "^2.24.0",
"ngx-auto-unsubscribe": "^3.0.0",
"ngx-moment": "^3.5.0",
"ngx-store": "^2.1.0",
"parallax-js": "^3.1.0",
"query-string": "^6.2.0",
"rxjs": "^6.5.3",
"rxjs-compat": "^6.5.3",
"shaka-player": "^2.5.0",
"text-mask-addons": "^3.8.0",
"text-mask-core": "^5.1.2",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.900.0-rc.7",
"@angular/cli": "^9.0.0-rc.7",
"@angular/compiler": "^9.0.0-rc.7",
"@angular/compiler-cli": "^9.0.0-rc.7",
"@angular/language-service": "^9.0.0-rc.7",
"@google-cloud/translate": "^5.0.2",
"@ionic/angular-toolkit": "^2.1.1",
"@nguniversal/builders": "^9.0.0-next.9",
"@types/facebook-js-sdk": "^3.3.0",
"@types/jasmine": "~3.4.1",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"@types/webappsec-credential-management": "^0.5.1",
"cloudflare-workers-kv": "0.0.11",
"codelyzer": "^5.1.2",
"dotenv": "^8.2.0",
"edit-json-file": "^1.2.1",
"firebase-admin": "^8.9.1",
"gulp-real-favicon": "^0.3.2",
"handlebars": "^4.1.2",
"imagemin": "^7.0.1",
"imagemin-webp": "^5.1.0",
"import-sort-style-eslint": "^6.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "^2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"npm": "^6.13.0",
"pino": "^5.13.6",
"pino-pretty": "^3.3.0",
"prettier": "^1.19.1",
"prettier-plugin-import-sort": "0.0.3",
"protractor": "~5.4.2",
"puppeteer": "^2.0.0",
"rich-logger-decorator": "^4.0.0",
"sharp": "^0.23.4",
"showdown": "^1.9.0",
"tinify": "^1.6.0-beta.2",
"ts-loader": "^6.1.2",
"ts-node": "~8.4.1",
"tslint": "^5.20.0",
"typescript": "~3.6.4",
"webpack-bundle-analyzer": "^3.5.1",
"webpack-cli": "^3.3.9"
}
}
from localize-router.
@ProfessorManhattan This do not work in my project, i am on angular 8 and i use angular-universal for SSR , the app works fine if i dont set the initial navigation to true, bu when i do, if i try to access directly to any page other than the root page i get a route not found error
here is my package.json
{
"name": "kasania-public",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"compile:server": "webpack --config webpack.server.config.js --progress --colors",
"serve:ssr": "node dist/server",
"build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
"build:client-and-server-bundles": "ng build --prod && ng run kasania-public:server:production --bundleDependencies all"
},
"private": true,
"dependencies": {
"@agm/core": "^1.1.0",
"@agm/js-marker-clusterer": "^1.1.0",
"@angular/animations": "~8.2.14",
"@angular/cdk": "^8.2.3",
"@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/platform-server": "~8.2.5",
"@angular/router": "~8.2.14",
"@fortawesome/angular-fontawesome": "^0.5.0",
"@fortawesome/fontawesome-svg-core": "^1.2.26",
"@fortawesome/free-brands-svg-icons": "^5.12.0",
"@fortawesome/free-solid-svg-icons": "^5.12.0",
"@ng-bootstrap/ng-bootstrap": "^5.1.5",
"@nguniversal/express-engine": "8.1.1",
"@nguniversal/module-map-ngfactory-loader": "8.1.1",
"@ngx-share/button": "^7.1.4",
"@ngx-share/buttons": "^7.1.4",
"@ngx-share/core": "^7.1.4",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"@nicky-lenaers/ngx-scroll-to": "^3.0.1",
"@types/mocha": "^5.2.7",
"animate.css": "^3.7.2",
"bootstrap": "^4.4.1",
"core-js": "^3.6.4",
"express": "^4.15.2",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"intersection-observer": "^0.7.0",
"jquery": "^3.4.1",
"js-marker-clusterer": "^1.0.0",
"libphonenumber-js": "^1.7.30",
"localize-router": "^2.0.0-RC.3",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"ng-lazyload-image": "^7.0.1",
"ng2-pdf-viewer": "^6.0.2",
"ngx-gallery": "^5.10.0",
"rxjs": "^6.5.4",
"slick-carousel": "^1.8.1",
"tslib": "^1.10.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.803.22",
"@angular/cli": "^8.3.22",
"@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/jquery": "^3.3.31",
"@types/node": "~8.9.4",
"codelyzer": "^5.2.1",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.5.1",
"protractor": "~5.4.0",
"ts-loader": "^5.2.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cli": "^3.1.0"
}
}
from localize-router.
@ProfessorManhattan @hymenoby check my previous comment: #45 (comment)
I encourage you to migrate ASAP. This project seems to be dead and doesn't work for sure with SSR and lazy load nested routes.
from localize-router.
@ProfessorManhattan Thanks, i will try with https://github.com/gilsdav/ngx-translate-router as you said
from localize-router.
Related Issues (20)
- localize-router not working as expected with Angular Universal: server-side rendering HOT 6
- Function traverseSnapshot not properly assembling the new translated route. HOT 11
- Localize router unable to pass data params on an empty path HOT 2
- Out of sync localize pipe HOT 1
- changeLanguage does not work for route with parameters HOT 6
- After language is switch, back button redirect into 404
- InitialNavigation enabled crashes Routing HOT 7
- Lazy loaded component is not bootstrapping HOT 4
- can't trigger window.load
- Angular 8 + IVy support HOT 1
- Can't make it, need tutorial. HOT 1
- Angular recognize only the default lang in SSR. HOT 4
- Angular 8 support HOT 6
- Extra slash translating root route
- LazyLoad Child Componenter onPage Refresh re-directs:Home Page HOT 1
- Unhandled promise rejection HOT 6
- Custom Cookies expiration
- Children routes issue lazy load module HOT 5
- Problem with Initial Navigation in RouterModule HOT 4
- LocalizeRouterModule.forRoot returns a ModuleWithProviders type without a generic type argument HOT 20
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from localize-router.