I am trying to use ngx-translate or ng2-translate for months now...
I keep let it go for a while and continue to develop other sections of the app.
I have tried again now with Core 2, but still no luck.
I create the project and it works perfectly. I can change or create Angular components with everything running great.
As soon as I install ngx-translate (https://www.npmjs.com/package/@ngx-translate/core) or ng2-translate(https://www.npmjs.com/package/ng2-translate) nothing works. The most common problem that I encounter is
NodeInvocationException: Prerendering failed because of error: Error: Module build failed: Error: ENOENT: no such file or directory, open 'C:\Users\Andrei\AngularDefault\SIGAD\node_modules\@angular\platform-server\bundles\platform-server.umd.js'.
I get these warnings when I install though:
npm install @ngx-translate/core --save
npm WARN [email protected] requires a peer of webpack@^1.13.2 || ^2.1.0-beta but none was installed.
npm WARN [email protected] requires a peer of chai@* but none was installed.
npm WARN [email protected] requires a peer of jasmine-core@* but none was installed.
npm WARN [email protected] requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but none was installed.
npm WARN @ngx-translate/[email protected] requires a peer of @angular/core@>=2.0.0 but none was installed.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any
"} (current: {"os":"win32","arch":"x64"})
for npm install @ngx-translate/http-loader
npm WARN @ngx-translate/[email protected] requires a peer of @angular/core@>=2.0.0 but none was installed.
npm WARN [email protected] requires a peer of webpack@^1.13.2 || ^2.1.0-beta but none was installed.
npm WARN [email protected] requires a peer of chai@* but none was installed.
npm WARN [email protected] requires a peer of jasmine-core@* but none was installed.
npm WARN [email protected] requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but none was installed.
npm WARN @ngx-translate/[email protected] requires a peer of @angular/core@>=4.3.0 but none was installed.
npm WARN @ngx-translate/[email protected] requires a peer of @angular/common@>=4.3.0 but none was installed.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any
"} (current: {"os":"win32","arch":"x64"})
This is not the only file that I get with "Prerendering failed because...". For example, the strangest thing is if I download Mark Pieszak template https://github.com/MarkPieszak/aspnetcore-angular2-universal. I get another file in the error:
NodeInvocationException: Prerendering failed because of error: Error: Module build failed: Error: ENOENT: no such file or directory, open 'C:\Users\Andrei\AngularDefault\SIGAD\node_modules\reflect-metadata\Reflect.js'
at Error (native)
Without me making any changes...is this a Windows problem or something?
From other questions and issues on github like Ionic: Error: Module build failed: Error: ENOENT: no such file or directory I suspect that after I have updated Angular to the newest version 4.3.6 some of the packages have changed their case, but I fail to find them.
I haven't event written code to use one of these packages...
my package.json is:
{
"name": "SIGAD",
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"dependencies": {
"@angular/animations": "4.3.6",
"@angular/common": "4.3.6",
"@angular/compiler": "4.3.6",
"@angular/compiler-cli": "4.3.6",
"@angular/core": "4.3.6",
"@angular/forms": "4.3.6",
"@angular/http": "4.3.6",
"@angular/platform-browser": "4.3.6",
"@angular/platform-browser-dynamic": "4.3.6",
"@angular/platform-server": "4.3.6",
"@angular/router": "4.3.6",
"@ngtools/webpack": "1.6.2",
"@ngx-translate/core": "^7.2.0",
"@types/webpack-env": "1.13.0",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "3.2.3",
"bootstrap": "3.3.7",
"css": "2.2.1",
"css-loader": "0.28.5",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "0.11.2",
"html-loader": "0.5.1",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.7",
"preboot": "5.0.0",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.3",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"typescript": "2.4.2",
"url-loader": "0.5.9",
"webpack": "3.5.5",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"zone.js": "0.8.17"
},
"devDependencies": {
"@types/chai": "4.0.4",
"@types/jasmine": "2.5.54",
"chai": "4.1.1",
"jasmine-core": "2.7.0",
"karma": "1.7.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.4"
}
}
my app.module.ts is:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { UserComponent } from "./components/user/user.component";
import { ErrorComponent } from "./components/error/error.component";
@NgModule({
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
HomeComponent,
UserComponent,
ErrorComponent
],
imports: [
CommonModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: 'user', component: UserComponent },
{ path: 'error', component: ErrorComponent },
{ path: '**', redirectTo: 'home' }
])
]
})
export class AppModuleShared {
}
the GIT repository is here https://github.com/dobrinsky/AngularDefault .
Please help... this is so hard to understand why is not working since everybody sais it is simple to use...
P.S. I am not using webpack. do these 2 packs require webpack to run?
UPDATE: using npm install webpack throws
NodeInvocationException: Can't resolve all parameters for HttpXsrfCookieExtractor: (?, [object Object], [object Object])
After this I tried:
- Uninstalling Node completely (along with any version managers / etc)
- Go to %AppData% / roaming delete any npm or npm cache folders there
- Reboot your machine, install the latest Node 6.*
- npm i -g webpack
I do not get the above warnings when installing, but and now I get:
Prerendering failed because of error: Error: Module build failed: TypeError: loaderUtils.getOptions is not a function
