greentube / localize-router Goto Github PK

Steps to reproduce
Navigate to lazy loaded module.
Notice that deep links have been translated.
Click on one of the deep links

Current behavior
Router cannot find translated sub route.

Expected behavior
Router should successfully navigate user to lazy loaded sub route.

Hello,

I want to use this angular2 seed advanced who use ng2-translate

But also I wanted to add your pluggin to add localization on my urls, but when I install, import and launch got the error traceur.js not found, tried to install it but same error.

Any idea?

Regards,

JSON config file has following structure:

{
    "locales": ["en", "de", ...],
    "prefix": "..."
}

Please consider adding here that if one is not going to use translated routes (and hence prefix), they need to remove prefix field from the config rather than leaving it blank. I did it and that caused very subtle bugs (e.g. paths like module1/page1 were being translated to /en/[object Object]/page1).

https://github.com/ngx-translate

When using a wildcard route like the following, which is a totally valid route, localize-router causes an exception (see below):

{
    path: '**',
    component: NotFoundPageComponent
}

zone.js:516 Unhandled Promise rejection: Cannot read property 'split' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'split' of undefined
    at ManualParserLoader.LocalizeParser.translateRoute (localize-router.parser.js:132)
    at ManualParserLoader.LocalizeParser._getTranslatePromise (localize-router.parser.js:119)
    at ManualParserLoader.LocalizeParser.translateRoutes (localize-router.parser.js:87)
    at ManualParserLoader.LocalizeParser.init (localize-router.parser.js:72)
    at localize-router.parser.js:234
...

A workaround is to use a redirectTo property on the wildcard path and set the component on this other path, like so:

{
    path: '404',
    component: NotFoundPageComponent
},
{
    path: '**',
    redirectTo: '/404'
}

This has the side-effect that the original path cannot be found anymore in the ActivatedRoute snapshot so the NotFoundPageComponent cannot attempt to redirect the user to the appropriate page. This is what I want to do..

I feel like this can be easily fixed by changing this line into the following:

if (this.originalWildcard && this.originalWildcard.redirectTo) {

I'm not entirely sure about the implications of this change, so I've not made a pull request.

Hello,

could you please release a new version with the localStorage fix #37?
The latest tag 0.7.0 doesn't have that fix.

Is there or will there be a method for ignoring routes? (For situations like Auth callback)

Thanks for the great library 👍

It will be great if url will not change if locales will have only one languag

Hello,
With the angular 1 version of $translate there was a plugin that allows us the save the user locale selection in the local-storage and reload it automatically on the next visite? How can this be implement with ngtranslate2-localize-router?
Thanks so much,
Yves

It would be nice to have an option to set value for localStorage key.

I would think of it, as being part of the end product, to be a real dependency.
Could it be worthy to change the readme from:

npm install --save-dev localize-router

to

npm install --save localize-router

is there support described for universal somewhere?

digging trough the source code I suspect not, cause it uses a check for navigator for the browserlanguage. When going for support for universal in node this language could be extracted from the requested_language.

GRtz

ERROR in Error encountered resolving symbol values statically. Calling function 'prepareRoutes', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function

angular-cli: 1.0.0-rc.2

How can I use one module without the routing?

I want to do localhost/module
not localhost/es/module or localhost/en/module

It's possible? @meeroslav

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LocalizeRouterModule } from 'localize-router/localize-router';

export const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' }
];
@NgModule({
  imports: [
    LocalizeRouterModule.forRoot(routes),
    RouterModule.forRoot(routes)
  ],
  exports: [LocalizeRouterModule, RouterModule]
})
export class AppRoutingModule { }

Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppRoutingModule in C:/Projects/frontend/dist/tmp/app/app-routing.module.ts, resolving symbol AppRoutingModule in C:/Projects/frontend/dist/tmp/app/app-routing.module.ts
    at simplifyInContext (C:\Users\chuckj\src\angular\modules\@angular\compiler-cli\src\static_reflector.ts:537:15)
    at StaticReflector.simplify (C:\Users\chuckj\src\angular\modules\@angular\compiler-cli\src\static_reflector.ts:541:20)
    at StaticReflector.annotations (C:\Users\chuckj\src\angular\modules\@angular\compiler-cli\src\static_reflector.ts:93:28)
    at NgModuleResolver.resolve (C:\Projects\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:14261:46)
    at CompileMetadataResolver._loadNgModuleMetadata (C:\Projects\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:14646:45)
    at CompileMetadataResolver.getUnloadedNgModuleMetadata (C:\Projects\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:14636:23)
    at addNgModule (C:\Projects\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:12944:43)
    at C:\Projects\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:12957:16
    at Array.forEach (native)
    at _createNgModules (C:\Projects\frontend\node_modules\@angular\compiler\bundles\compiler.umd.js:12956:28)
Compilation failed

If I set a different language on URI, there isn't on configuration file(locales.json), my application crashes.

There routers for 404:
{path: '404', component: NotFoundComponent},
{path: '**', redirectTo: '404'}

But localize-router put this routers inside children language route.
For example:
{path: '', redirectTo: 'en', pathMatch: 'full'}
{path: 'en', children: [
{path: '404', component: NotFoundComponent},
{path: '**', redirectTo: '404'}
]}

I'm trying to dynamically choose which module is shown in root path (not a repro but what I'm trying to implement: https://plnkr.co/edit/Euj4kjDOMQxLJkS8U1P2 ) but I'm running into some issues with integrating localize-router.
I'm guessing the problem is because I'm resetting the config after localize-router has initialized and translated the routes.

localize-router 0.6.2, angular 2.4.0

Before upgrading the router from 3.4.7 to 3.4.8 the following happened:
localhost:3000 => localhost:3000/de/karten/standard

After the upgrade I receive the following redirect:
localhost:3000 => localhost:3000/cards/standard

Obviously a bugfix in the angular router broke the translated redirects.
I upgraded all my dependencies manually and step by step and the problem occurred as soon as I upgraded the angular dependencies.

Will try to look into that as well

Hi,
I'm experiencing an issue with routerLinkActive. When I toggle the lang using the following
changeLanguage(lang: string) {
this.localize.changeLanguage(lang);
}
It does it's thing and changes the locale and the url accordingly but I loose my nav link highlight controlled by the routerLinkActive. What should I look for? If I just navigate in without changing locale the highlighting work correctly

Thanks so much,
Yves

I'm working with this package and I'm asking myself if there's any way to get off the URL lang prefix. For example, if the application is executing in different sites: .com, .es, .de, .fr, etc. I'm able to ask to the API the default lang of the site and set up it in the bootstrapped component so application will know the current lang by the response of the API and I wont need the URL prefix. I think mysite.es/es/perfil or mysite.co.uk/en/profile can be redundant as .es is a spanish TLD so...

Is there any way to remove the URL lang prefix?

Hi,
I am working on multi-culture angular web app and to get culture in URL I am using

https://github.com/gmostert/ng2-breadcrumb

But found that the current selected culture appear in the breadcrumb component like this:
Home / En / Campaigns

Is there any way to remove the culture from the breadcrumb ?

thanks

Note that at the moment lazy loading doesn't work for nested routes. If you have route like lazy/lazy_child if you navigate first to lazy and then to lazy_child everything will work. However if you go directly to lazy/lazy_child Router will report unknown route error, since child routes will not be translated before Route matching mechanism kicks in.

Steps to reproduce

• Create a lazy loaded module with nested routes e.g.

// main routes
{ path: 'lazy', loadChildren: 'path/to/some/route/lazy.module#LazyModule' }

// routes in LazyModule
{ path: '', component: LazyComponent },
{ path: 'child', component: LazyChildComponent }

• Navigate to translated version of /lazy/child in language other than en e.g.

/de/muessiges/kind

Current behavior
Router reports NavigationError as route has not been translated at the moment of route matching.

Expected behavior
All child lazy routes should be translated and Router should properly find requested route.

Explanation
LocalizeRouter currently listens to RouteConfigLoadEnd, but this event only signals that child module has been loaded. Child routes are still not available. Additionally RouteConfigLoadEnd returns only requested route, not the module factory from which the child routes could be extracted.

Further steps
Discuss with Angular team on possible solutions.

With localize-router I see in my Network tab (Chrome) that the JSON file with current language translations is loaded twice.

"@angular/cli": "1.0.0-beta.31"
"@angular/compiler-cli": ">=4.0.0-beta <5.0.0"
"@angular/common": ">=4.0.0-beta <5.0.0"
"@angular/compiler": ">=4.0.0-beta <5.0.0"
"@angular/core": ">=4.0.0-beta <5.0.0"
"@angular/http": ">=4.0.0-beta <5.0.0"
"@angular/platform-browser": ">=4.0.0-beta <5.0.0"
"@angular/platform-browser-dynamic": ">=4.0.0-beta <5.0.0"
"@angular/router": ">=4.0.0-beta <5.0.0"
"ng2-translate": "5.0.0"
"localize-router": "0.6.2"

Title says it already.
Is there a way to link to the same page in a different locale for direct language switching?

I use ngx-translate and localize-router in my project.
I have MainModule where add ChildModule as lazy loaded.

const rotes: Routes = [
{
path: 'child',
loadChildren: 'app/child/child.module#ChildModule '
}
];

NgModule({
imports: [
TranslateModule.forRoot(...),
RouterModule.forRoot(rotes),
LocalizeRouterModule.forRoot(rotes)
]
})

Then in ChildModule I use forChild() method:
const rotes: Routes = [
{
path: '',
component: ChildComponent,
}
];
NgModule({
imports: [
TranslateModule.forChild(...),
RouterModule.forChild(rotes),
LocalizeRouterModule.forChild(rotes)
]
})

When I go to /child route in browser LocalizeRouter doesn't initializes ngx-translate core service with selected locales ( translate.use(lang) ). So I need to do it manually listening route changes.

It seems like forChild method doesn't provide TranslateService dependency

On chrome, with French as main language, default language returned by LocalizeParser._getBrowserLanguage is not fr.

Hi all,

I try to use localize-router with mgechev/angular-seed. Everything works with ng2-translate but when I try to use localize-router, I have this error :

(SystemJS) XHR error (404 Not Found) loading http://localhost:5555/node_modules/rxjs.js
Error loading http://localhost:5555/node_modules/rxjs.js as "rxjs" from http://localhost:5555/node_modules/localize-router/bundles/localize-router.umd.js

I tried the same configuration in an angular-cli project and it works perfectly.

Did you try to use ng2-translate && localize-router in an angular-seed project ? Did you already have that kind of errors ?

Thanks for your replies.

Hi @meeroslav

I upgraded from 0.4.0 to 0.5.0 and then finally to 0.6.0
With the latest version I receive Error: Template parse errors: The pipe 'translate' could not be found.

As it only happened, when upgrading this module, I think there might be a bug with the initialization.

    LocalizeRouterModule.forRoot(ROUTES),
    RouterModule.forRoot(ROUTES, { useHash: false, preloadingStrategy: PreloadAllModules }),
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
      deps: [Http]
    }),

Can you provide some assistance?

When I click on the following buttons, they bring me back to the home page.

<a
      (click)="changeLang('en')" 
      [routerLink]="'/en'" 
      [routerLinkActive]="['router-link-active']">English
</a>
<a 
      (click)="changeLang('it')" 
      [routerLink]="'/it'" 
      [routerLinkActive]="['router-link-active']">Italiano
</a>

This is not the desired action. I would instead like it to simply change languages and modify the URL to be /it/pronuncia instead of /en/pronunciation. For example.

I have also tried:

<a (click)="changeLang('en')"  
  [routerLinkActive]="['router-link-active']">English</a>
<a (click)="changeLang('it')" 
  [routerLinkActive]="['router-link-active']">Italiano</a>

Notice how I removed

[routerLink]="'/en'" and [routerLink]="'/it'"

Unfortunately, here, it doesn't change the URL. It simply changes the language.

I have noticed, in the demo site that you posted, that you can change the URL with the following buttons:

  <button (click)="changeLanguage('en')">EN</button>
  <button (click)="changeLanguage('de')">DE</button>

So, here the URL and language changes, but you stay on the same page. It does not bring you back to the homepage.

However, if you click

  <a [routerLink]="'/en'" [routerLinkActive]="['router-link-active']">EN</a>
  <a [routerLink]="'/de'" [routerLinkActive]="['router-link-active']">DE</a>

It does bring you back to the homepage.

Any idea where I could be going wrong?

Thanks guys!

Issue:-
Routing is not happening in lazy loaded modules through loadChildren route configuration.

environment:-
angular-cli: 1.0.0-beta.24
node: 6.4.0
os: win32 x64
@angular/router: 3.4.2
@angular/compiler-cli: 2.4.2
localize-router: ^0.4.0,
ng2-translate: ^4.0.0,

main app routing:-
export const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent }
{ path: 'web', loadChildren: 'app/modules/web/web.module#WebModule' }
];

web routing in WebModule:-
export const routes: Routes = [
{ path: 'web', component: WebComponent, children: [
{ path: 'home', component: HomeComponent }
]
}
];

Observed:-

1. When try to redirect to '/web'. WebModule file gets fetched from server in network and url changed to 'en/web' but blank page gets displayed with no error in console.
2. When try to redirect to '/web/home' :- Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'en/web/home'

Expected:- There should not be any error in console and child module should get fetched lazily with working child routes in url.

I try to translate a route dynamically in a component, I need to do that because I navigate from a component to other by a button, but before of navigate I need to do something else.
I do this

this.localize.translateRoute('restaurantList').subscribe((path: string) => {
this.router.navigate(['restaurantList']);
});

I don't know if I do something wrong, I just downloaded localize-router, everything works fine, but I cann't translate the route in the component. Can you help me please. Thanks!

Here's the quote from README:

If no language is provided in the url path, application uses default path - language set in the browser or first locale in the config. Make sure you therefore place most common language (e.g. 'en') as a first string in the array of locales.

But I don't notice the behavior described; the demo app also acts the other way.

Steps to reproduce in demo app:

• navigate somewhere (i.e.) to '/en/users' -- it works
• type in path without language, as '/users' -- it doesn't work

Desired behavior -- '/users' auto redirects to '/en/users' as first and default language, please any tips to meet that?

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { Inject, NgModule, PLATFORM_ID } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule, Http } from '@angular/http';

// TRANSLATE
import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
import { translateFactory } from './core/services/translate.service';

// LOCALES
import { HomeComponent } from './layout/pages/home/home.component';
import { localizeLoaderFactory } from './core/services/locales.service';
import { LocalizeRouterModule, StaticParserLoader, LocalizeParser } from 'localize-router';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  { path: '', component: HomeComponent }
]

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

// PAGES
import { HomeModule, NotFoundModule, TestModule } from './layout/pages/index'

// SHARED
import { HeaderModule, FooterModule } from './layout/shared/index';

@NgModule({
  imports: [
    // UNIVERSAL
    BrowserModule.withServerTransition({appId: 'd'}),

    HttpModule,
    AppRoutingModule,

    // TRANSLATE
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (translateFactory),
        deps: [PLATFORM_ID, Http]
      }
    }),

    // LOCALES
    RouterModule.forRoot(routes),
    LocalizeRouterModule.forRoot(routes, {
      provide: LocalizeParser,
      useFactory: localizeLoaderFactory,
      deps: [TranslateService, Location, Http]
    }),
    
    // PAGES
    HomeModule,
    TestModule,
    NotFoundModule,

    // TEMPLATE
    HeaderModule,
    FooterModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

export class AppModule {
  constructor(@Inject(PLATFORM_ID) private readonly platformId: any) {}
}

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

// TRANSLATE
import { TranslateModule } from '@ngx-translate/core';

// LOCALIZE
import { LocalizeRouterModule } from 'localize-router';

// RELATED
import { HomeComponent } from './home.component';
import { HomeRoutingModule } from './home-routing.module';



// IMPORT MODULES, DECLARE COMPONENTS
@NgModule({
  imports: [
    CommonModule,
    HomeRoutingModule,
    
  // TRANSLATE
  TranslateModule,
  
  // LOCALIZE
  LocalizeRouterModule,
  ],
  declarations: [
    HomeComponent
  ],
  exports: [
    HomeComponent,
    TranslateModule    
  ]
})
export class HomeModule { }

When I trying to run npm install, I get the following code:
ERROR in Error encountered resolving symbol values statically. Could not resolve @ngx-translate/core relative to /home/www/mobile/node_modules/localize-router/src/localize-router.module.d.ts., resolving symbol LocalizeRouterModule in /home/www/mobile/node_modules/localize-router/src/localize-router.module.d.ts, resolving symbol LocalizeRouterModule in /home/www/mobile/node_modules/localize-router/src/localize-router.module.d.ts

I'm using:
[email protected]
Node version 7.4.0
Npm version 4.0.5

I ran into an error when trying to navigate in the code this.router.navigate(['/route']); directly.
Tried this with the localize-router-example as well but found out a solution for it as below:

this.localize.translateRoute('route', true).subscribe( path => this.router.navigate(['/' + path]) );

Would be good to note that down somewhere in the readme

Hi,

I'm trying to load localize-router and am having the following error:

"Cannot find name 'require'."

In order to fix this, I used
declare var require: any;

However, then I am still stuck with the following error:

"TypeError: fs.readFileSync is not a function"

One thing I did was to combine app.browser.module.ts and app.node.module.ts into one app.module.ts. I'm not sure if this could be the problem.

Another possible problem is that I'm using Angular4.

Again, I'm really not sure where this is coming from. If you guys have any ideas, I'd really appreciate it.

Thanks!

I started using this package because I want to translate my routes.
I have a method to decide which language to use for ngx-translate. Some other things depend on this as well, so it is not easily changed.

The module of this package seems to set the language earlier in it's init method than I am able to set the preferred language. It does so incorrectly, causing a 404 response on /assets/i18n/en.json (which does not exist!). This prevents my website from working correctly.

uncaught exception: Response with status: 404 Not Found for URL: http://<snip>/assets/i18n/en.json

ngx-translate seems to recommend setting the language from AppComponent, as they show in their README file.

I'd like to be able to select the language this module should use, instead of it trying (and failing) to do it by itself. Thanks in advance!

and what I've always been looking for but never found, until now :)
Thanks a lot for your effort! Will be contributing wherever I can!

localize-router doesn't work in safaris private mode, because the local storage isn't available.
I'm receiving the same Error as explained in the following stack overflow issue: http://stackoverflow.com/questions/21159301/quotaexceedederror-dom-exception-22-an-attempt-was-made-to-add-something-to-st

Currently there doesn't seem to be a way navigate to a translated relative path (that I've found).

https://angular.io/docs/ts/latest/api/router/index/NavigationExtras-interface.html#!#relativeTo-anchor

Steps to reproduce
Add child routes via RouterModule.forChild(routes).

Current behavior
Child routes are not translated.

Expected behavior
Child routes should be translated.

I got "Cannot match any routes" after page refresh in my appliaction.
Without localize-router everything work fine.

With: LocalizeRouterModule.forRoot(appRoutes) in my app.module.ts I got an error in the browser.

"@angular/cli": "1.0.0-beta.31"
"@angular/compiler-cli": ">=4.0.0-beta <5.0.0"
"@angular/common": ">=4.0.0-beta <5.0.0"
"@angular/compiler": ">=4.0.0-beta <5.0.0"
"@angular/core": ">=4.0.0-beta <5.0.0"
"@angular/http": ">=4.0.0-beta <5.0.0"
"@angular/platform-browser": ">=4.0.0-beta <5.0.0"
"@angular/platform-browser-dynamic": ">=4.0.0-beta <5.0.0"
"@angular/router": ">=4.0.0-beta <5.0.0"
"ng2-translate": "5.0.0"
"localize-router": "0.6.2"

Hello guys, this is my module:

import { NgModule } from '@angular/core';
import { UniversalModule } from 'angular2-universal';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './index';
import { AdminLoginComponent } from './admin-login/admin-login.component';
import { HomeComponent } from './home/home.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ApartmentComponent } from './apartment/apartment.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { RouterModule } from '@angular/router';
import { routes } from './app.routes';

import { HttpModule, Http } from '@angular/http';
import { TranslateModule, TranslateLoader, TranslateStaticLoader, TranslateService } from 'ng2-translate';
import { LocalizeRouterModule, LocalizeParser, ManualParserLoader } from 'localize-router/localize-router';

/**
 * Top-level NgModule "container"
 */
@NgModule({
  /** Root App Component */
  bootstrap: [ AppComponent ],
  /** Our Components */
  declarations: [ AppComponent, AdminLoginComponent, HomeComponent, DashboardComponent, ApartmentComponent, PageNotFoundComponent ],
  imports: [
    /**
     * NOTE: Needs to be your first import (!)
     * BrowserModule, HttpModule, and JsonpModule are included
     */
    HttpModule,
    UniversalModule,
    FormsModule,
    /**
     * using routes
     */
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
      deps: [Http] 
    }),
    LocalizeRouterModule.forRoot(routes, {
    provide: LocalizeParser,
        useFactory: (translate, http) => 
            new ManualParserLoader(translate, ['en','rs'], 'ROUTES'),
        deps: [TranslateService, Http]
    }), 
    RouterModule.forRoot(routes)
  ]
})
export class AppModule {

}

And when i run ng serve i am getting this error:

/home/ivan/Projects/Private/ApartmaniWeb/node_modules/localize-router/localize-router.js:1
(function (exports, require, module, __filename, __dirname) { export * from './src/localize-router.module';
                                                              ^^^^^^
SyntaxError: Unexpected token export
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/ivan/Projects/Private/ApartmaniWeb/dist/server.bundle.js:692:18)
    at __webpack_require__ (/home/ivan/Projects/Private/ApartmaniWeb/dist/server.bundle.js:21:30)

Any idea what am i doing wrong?

Hello, would you please fix the problem? Because if I used ng2-translate 3.0.0, it would contain bugs. Thank you a lot.

Steps to reproduce

1. Use a link with relative path without text to translate e.g. '../'
2. Switch language (replace full url)

Current behavior
Directive RouterLinkWithHref doesn't kick in and url remains set to previous language.

Expected behavior
Directive RouterLinkWithHref should trigger and url should be rebuilt.

Could you please upgrade the angular version?

[email protected] C:\Users\gert\frontend
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- [email protected]
-- UNMET PEER DEPENDENCY [email protected]

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN [email protected] requires a peer of @angular/core@^2.2.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/http@^2.2.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/router@^3.2.0 but none was installed.
npm WARN [email protected] requires a peer of ng2-translate@^4.0.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.

I am trying to build the app for production and in the command line can run the following with no problem:

ng build --env=prod
and
ng build --prod --aot=false

However, I would like to build the dev folder with AoT Compilation.

When I run the following command in terminal:

ng build --prod --aot

I get the following error:

ERROR in Type AppComponent in /src/app/app.component.ts 

	is part of the declarations of 2 modules: 

	AppModule in /src/app/app.browser.module.ts and 

	AppModule in /src/app/app.node.module.ts! 

Please consider moving 

	AppComponent in /src/app/app.component.ts 

	to a higher module that imports 

	AppModule in /src/app/app.browser.module.ts and 

	AppModule in /src/app/app.node.module.ts. 

You can also create a new NgModule that exports and includes 

	AppComponent in /src/app/app.component.ts 

	then import that NgModule in 

	AppModule in /src/app/app.browser.module.ts and 

	AppModule in /src/app/app.node.module.ts.

*side note: I modified the spacing to make it easier to read.

as well as

ERROR in ./src/client.ts

Module not found: Error: Can't resolve './$$_gendir/app/app.browser.module.ngfactory' in '/src'

 @ ./src/client.ts 5:0-82

 @ multi ./src/client.ts

It is true that I have imported the AppComponent into both the app.browser.module.ts and app.node.module.ts files. However, this is the same as I find in the localize-router-example-master.

Any idea where I could be going wrong here? Should I create a shared service? Or is there a better way to do this?

Thanks!

It will allow getting actual current language on server side

After compiled and on a live site, when you copy a URL and paste it into another tab, you receive a 404 error.

Reproduce:

• download https://github.com/Greentube/localize-router/tree/cf422d471f2b15f50c6beb3a22375fa894c5c123
• go into CLI folder
• sudo npm install -g @angular/cli
• ng build --prod
• open site, go to another page, copy page,
  ex. : http://www.URL.com/de/users/Donald%20Knuth
• paste into another tab
• get 404 error

However, on the local server, I can copy and paste the URLs with no problem.

Reproduce:

• download https://github.com/Greentube/localize-router/tree/cf422d471f2b15f50c6beb3a22375fa894c5c123
• go into CLI folder
• sudo npm install -g @angular/cli
• ng serve
• open site, go to another page, copy page,
  ex. : http://localhost:4200/en/users/Donald%20Knuth
• paste into another tab
• the page loads as expected

Any idea what could be happening in the build? Is there any way around it?

Thanks!