enten / angular-universal Goto Github PK
View Code? Open in Web Editor NEWAngular Universal 100% powered by Angular CLI
Angular Universal 100% powered by Angular CLI
I've a problem in production server. I don't know why start my SPA with PM2. In older versions of Angular Universal (like 5 ver) I copy the server.js file from the dist/server folder into my vhost root folder and I start it with PM2 than in this Angular Universal by Enten I have not a file called server.js. I need help. Thanks a lot.
Hi,
I finally found out to install this package with this line indicated on the readme:
npm install --save-dev udk webpack webpack-cli
This installation were fine.
Then I added this dev script to my package.json:
{
"name": "ng-universal-demo",
"version": "0.0.0",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/angular/universal-starter.git"
},
"contributors": [
"AngularClass <[email protected]>",
"PatrickJS <[email protected]>",
"Jeff Whelpley <[email protected]>",
"Jeff Cross <[email protected]>",
"Mark Pieszak <[email protected]>",
"Jason Jean <[email protected]>",
"Fabian Wiles <[email protected]>"
],
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"lint": "ng lint ng-universal-demo",
"dev": "ng-udkc",
"build:client-and-server-bundles": "ng build --prod && ng run ng-universal-demo:server:production",
"build:prerender": "npm run build:client-and-server-bundles && npm run compile:server && npm run generate:prerender",
"build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
"compile:server": "tsc -p server.tsconfig.json",
"generate:prerender": "cd dist && node prerender",
"serve:prerender": "cd dist/browser && http-server",
"serve:ssr": "node dist/server"
},
"pre-commit": [],
"private": true,
"dependencies": {
"@angular/animations": "^6.0.0",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/platform-server": "^6.0.0",
"@angular/router": "^6.0.0",
"@nguniversal/common": "^6.0.0",
"@nguniversal/express-engine": "^6.0.0",
"@nguniversal/module-map-ngfactory-loader": "^6.0.0",
"core-js": "^2.4.1",
"rxjs": "^6.2.2",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.6.0",
"@angular/cli": "6.0.0",
"@angular/compiler-cli": "^6.0.0",
"@angular/language-service": "^6.0.0",
"@types/node": "^8.0.30",
"codelyzer": "^4.0.2",
"express": "^4.15.2",
"http-server": "^0.10.0",
"pre-commit": "^1.2.2",
"reflect-metadata": "^0.1.10",
"ts-loader": "^4.2.0",
"tslint": "^5.7.0",
"typescript": "~2.7.2",
"udk": "^0.3.17",
"webpack": "^4.19.0",
"webpack-cli": "^3.1.0"
}
}
Then I tried to run : npm run dev
and got this error:
/mnt/d/workSpace/Cours/Angular/universal-starter/node_modules/udk/angular/lib/devContainer.js:6
async getBuilderContext(project) {
^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected identifier
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:549:28)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
at Module.require (module.js:504:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/mnt/d/workSpace/Cours/Angular/universal-starter/node_modules/udk/angular/bin/ng-udkc.js:10:22)
I then go to this file and TADA! an async identifier! Which is supposed to be working on Node version 9.11.1...
Any ideas on how to fix this?
izio@DESKTOP-JQ36KHQ:/mnt/d/workSpace/Cours/Angular/universal-starter$ npm -v
3.10.10
root@DESKTOP-JQ36KHQ:/mnt/d/workSpace/Cours/Angular/universal-starter# node -v
v9.11.1
After running ng serve the assets folder is missing in dist/app/browser. The build doesn't seem to copy the assets folder to dist.
had to update this version to be static, when it pulls in a newer version it is missing differential loader.
"@angular-devkit/build-angular": "0.800.2",
Below is the error I got
Cannot find module '@angular-devkit/build-angular/src/utils/differential-loading'
Error: Cannot find module '@angular-devkit/build-angular/src/utils/differential-loading'
I have everything configured like in all other repositories on Angular 6. Browser throws an error:
ERROR Error: Uncaught (in promise): TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script. TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script
The reason is that during "build:prod": "ng run ng-universal:udk:production"
ngsw-worker.js file isn't created.
Does ng-universal:udk
support it?
Hi!
Is it possible to get for example a list of elements using http request, but not in ngOnInit but on click of a button for example, and get the list when seeing page source in the browser?
Thanks
I can't preform build when I use certain packages. For example ngforage
.
~/ng-app$ npm run dev > [email protected] dev /home/deploy/ng-app > ng-udkc [udk] > bootstrap container [udk] >> container up [udk] >>> prepare webpack config [udk] >>> prepare webpack compiler [udk] >>> compiler done [udk] >>> compiler watching... /home/deploy/ng-app/node_modules/localforage/src/utils/serializer.js:2 import createBlob from './createBlob'; ^^^^^^ SyntaxError: Unexpected token import at new Script (vm.js:51:7) at createScript (vm.js:136:10) at Object.runInThisContext (vm.js:197:10) at Module._compile (module.js:613:28) at Object.Module._extensions..js (module.js:660:10) at Module.load (module.js:561:32) at tryModuleLoad (module.js:501:12) at Function.Module._load (module.js:493:3) at Module.require (module.js:593:17) at require (internal/module.js:11:18) at /home/deploy/ng-app/node_modules/ngforage/bundles/ngforage.umd.js:67:19 at Object.setPrototypeOf.__proto__ (/home/deploy/ng-app/node_modules/ngforage/bundles/ngforage.umd.js:26:65) at Object. (/home/deploy/ng-app/node_modules/ngforage/bundles/ngforage.umd.js:29:2) at Module._compile (module.js:649:30) at Object.Module._extensions..js (module.js:660:10)
I used to fix it by adding this code to webpack.server.config.js. But it doesn't work with udk.
// Work around for https://github.com/angular/angular-cli/issues/7200 const path = require('path'); const webpack = require('webpack'); module.exports = { entry: { server: './server.ts', }, target: 'node', resolve: { extensions: ['.ts', '.js'] }, externals: [/(node_modules|main\..*\.js)/,], output: { libraryTarget: 'commonjs2', path: path.join(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ { test: /\.ts$/, loader: 'ts-loader' } ] }, optimization: { minimize: false }, plugins: [ new webpack.ContextReplacementPlugin( // fixes WARNING Critical dependency: the request of a dependency is an expression /(.+)?angular(\\|\/)core(.+)?/, path.join(__dirname, 'src'), // location of your src {} // a map of your routes ), new webpack.ContextReplacementPlugin( // fixes WARNING Critical dependency: the request of a dependency is an expression /(.+)?express(\\|\/)(.+)?/, path.join(__dirname, 'src'), {} ) ] }
How can I implement it with this repository?
Hi, forgive me if this is a silly question, but is there any documentation on how to add gzipping of the generated files to the build pipeline?
Quick question. I see that during the dev task the node server as well as the angular client are created and started successfully. My angular app depends on some server parameters related to x-forwarded-host headers. Because of this I need my express server running during e2e mode so that my app can get those params. Is there any straightforward way to do this using udk?
failed to run npm run dev
and got following error:
`> [email protected] dev /media/pchauhan13/work/repos/angular-universal
ng-udkc
/usr/bin/env: ‘node\r’: No such file or directory
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] dev: ng-udkc
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
`
I'm experiencing this showing up in the Chrome console:
at JSON.parse (<anonymous>)
at XMLHttpRequest.request.onreadystatechange [as __zone_symbol__ON_PROPERTYreadystatechange] (http://localhost:4000/runtime.js:103:34)
at XMLHttpRequest.wrapFn (http://localhost:4000/polyfills.js:1231:43)
at ZoneDelegate.invokeTask (http://localhost:4000/polyfills.js:412:35)
at Zone.runTask (http://localhost:4000/polyfills.js:180:51)
at ZoneTask.invokeTask [as invoke] (http://localhost:4000/polyfills.js:493:38)
at invokeTask (http://localhost:4000/polyfills.js:1634:18)
at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4000/polyfills.js:1660:21)```
Google has failed me, the only mention I found is #1, which is very old and was fixed by updating a package version. Do you know what may be causing it?
I'm wondering how can I prevent the HMR module to reload a specific service so I can keep state across reloads?
I am having trouble by using window object and localStorage in my app. Can you help me how to fix it? I need both to work in browser.
Errors:
ERROR { Error: Uncaught (in promise): ReferenceError: localStorage is not defined ReferenceError: localStorage is not defined
ERROR { Error: Uncaught (in promise): ReferenceError: window is not defined ReferenceError: window is not defined
@NgModule({
declarations: [AppComponent, HomeComponent],
imports: [
BrowserModule.withServerTransition({ appId: 'my-app' }),
RouterModule.forRoot([
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule' },
{ path: 'lazy/nested', loadChildren: './lazy/lazy.module#LazyModule' }
]),
HttpClientModule,
TransferHttpCacheModule,
StartupModule.forRoot('/assets/config/app.json'),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
import { NgModule, ModuleWithProviders, APP_INITIALIZER } from '@angular/core';
import { StartupService, STARTUP_CONFIG } from './startup.service';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
HttpClientModule
],
})
export class StartupModule {
static forRoot(startupConfig: string): ModuleWithProviders<StartupModule> {
return {
ngModule: StartupModule,
providers: [
{ provide: STARTUP_CONFIG, useValue: startupConfig },
StartupService,
{
provide: APP_INITIALIZER,
useFactory: StartupServiceFactory,
deps: [StartupService, STARTUP_CONFIG],
multi: true,
}
]
};
}
}
export function StartupServiceFactory(startService: StartupService, config: string): Function {
return () => startService.load(config).then(resp => console.log(resp));
}
import { Injectable, InjectionToken } from '@angular/core';
import { HttpClient } from '@angular/common/http';
export const STARTUP_CONFIG = new InjectionToken<string>(
'STARTUP_CONFIG'
);
@Injectable()
export class StartupService {
constructor(private client: HttpClient) {}
load(config: string): Promise<any> {
return this.client
.get(config)
.toPromise()
.catch(error => {
console.error(`==========================================`, error);
});
}
}
use StartupModule.forRoot('./assets/config/app.json')
is error
use StartupModule.forRoot('http://localhost:4000/assets/config/app.json')
is successed
I am running npm run dev
When I edit a file i get the error:
[HMR] Cannot apply update.
[HMR] Error: Cannot find module '@angular/material/toolbar.ngfactory'
After this I need to manually restart the server on serverside changes i'm making.
Hope someone can help me out.
Thanks
Hi there,
Thank you @enten for this very useful starter kit !
I'm currently trying to set my app to be able to send a 404 server code response when a visited route is not available. I've found a few tutorials for Angular Universal (here, this one or even here) but each time the server file script is quite different from this project, i've been trying to make it work for a couple hours without success.
Can you describe how implement this functionnality into this starter kit ?
Thanks
I'm getting error when I try to run
npm start
:
module.js:538
throw err;
^Error: Cannot find module 'L:\ng-universal$npm_package_main'
at Function.Module._resolveFilename (module.js:536:15)
at Function.Module._load (module.js:466:25)
at Function.Module.runMain (module.js:676:10)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start:node $npm_package_main
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
This is my package json file:
{
"name": "ng-universal",
"version": "0.0.0",
"license": "MIT",
"main": "dist/app/server/main.js",
"scripts": {
"ng": "ng",
"prestart": "npm run build:prod",
"start": "node $npm_package_main",
"build": "ng run ng-universal:udk",
"build:prod": "ng run ng-universal:udk:production",
"dev": "ng-udkc",
"dev:spa": "ng serve --hmr",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"now-build": "ng run ng-universal:udk:production",
"now-start": "node $npm_package_main"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.0",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/platform-server": "^6.0.0",
"@angular/router": "^6.0.0",
"@nguniversal/module-map-ngfactory-loader": "^6.0.0",
"core-js": "^2.5.5",
"rxjs": "^6.1.0",
"rxjs-compat": "^6.1.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.6.0",
"@angular/cli": "^6.0.0",
"@angular/compiler-cli": "^6.0.0",
"@angular/language-service": "^6.0.0",
"@angularclass/hmr": "^2.1.3",
"@types/jasmine": "~2.8.7",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~10.0.4",
"@types/webpack-env": "^1.13.6",
"codelyzer": "~4.3.0",
"jasmine-core": "~3.1.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.2",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^1.0.0",
"protractor": "~5.3.1",
"ts-node": "~6.0.2",
"tslint": "~5.10.0",
"typescript": "^2.7.2",
"udk": "^0.3.10"
}
}
`"C:\Program Files\JetBrains\WebStorm 2018.2.2\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" run start-local --scripts-prepend-node-path=auto
[email protected] prestart-local C:\Users\vince\Projects\speffyuniversalmaterialv3
npm run build:local
[email protected] build:local C:\Users\vince\Projects\speffyuniversalmaterialv3
ng run ng-universal:udk:local
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: node_module_register
2: v8::internal::FatalProcessOutOfMemory
3: v8::internal::FatalProcessOutOfMemory
4: v8::internal::Factory::NewFixedArray
5: v8::internal::HashTablev8::internal::SeededNumberDictionary,v8::internal::SeededNumberDictionaryShape::IsKey
6: v8::internal::Dictionaryv8::internal::SeededNumberDictionary,v8::internal::SeededNumberDictionaryShape::AtPut
7: v8::internal::compiler::RawMachineAssembler::MakeNode
8: 00000183BF2843C1
npm ERR! code ELIFECYCLE
npm ERR! errno 3
npm ERR! [email protected] build:local: ng run ng-universal:udk:local
npm ERR! Exit status 3
npm ERR!
npm ERR! Failed at the [email protected] build:local script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\vince\AppData\Roaming\npm-cache_logs\2018-09-04T12_01_19_169Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 3
npm ERR! [email protected] prestart-local: npm run build:local
npm ERR! Exit status 3
npm ERR!
npm ERR! Failed at the [email protected] prestart-local script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\vince\AppData\Roaming\npm-cache_logs\2018-09-04T12_01_19_196Z-debug.log
Process finished with exit code 3
`
What's wrong?!?!
Hello.
When building the application for distribution with
npm start
I would like to know which of these 2 files, environment.ts
or environment-prod.ts
, is the one whose values are used.
There doesn't seem to be any difference on how you build, since the prestart
step in package.json
is always set to prod
...
"prestart": "npm run build:prod",
...
Is there a way to control which file's values are used? Are they both used, but at different moments during the application execution?
Is it possible to integrate socket.io with this project?
I want to integrate socket.io with angular-universal (MEAN stack project).
I have clone this project and successfully runing but when I try to integrate socket.io with it then web page is just getting load not showing any view on page, Just getting load.
Can you please provide steps for integrate socket.io?
> [email protected] start C:\Users\myname\Desktop\angular-universal-master
> node ./dist/app/server/main.js
C:\Users\myname\Desktop\angular-universal-master\src\main.server.ts:2
import 'zone.js/dist/zone-node';
^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected string
at new Script (vm.js:80:7)
at createScript (vm.js:274:10)
at Object.runInThisContext (vm.js:326:10)
at Module._compile (internal/modules/cjs/loader.js:664:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `node ./dist/app/server/main.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\myname\AppData\Roaming\npm-cache\_logs\2019-05-22T00_27_06_496Z-debug.log
Windows 10 x64
node v10.15.3(by nodist v0.8.8)
npm 6.9.0
When making a change in a component, the entire app is reloaded, discarding the current state.
I get an output:
`[HMR] Updated modules:
index.js:3671 [HMR] - ./node_modules/raw-loader!./src/app/login.component/login.component.html
index.js:3671 [HMR] - ./src/app/login.component/login.component.ts
index.js:3671 [HMR] - ./src/app/app-routing.module.ts
index.js:3671 [HMR] - ./src/app/app.module.ts
index.js:3671 [HMR] - ./src/app/app.browser.module.ts
index.js:3671 [HMR] - ./src/main.ts
index.js:3671 [HMR] App is up to date.
index.js:3671 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
index.js:3671 AppBrowserModule boostraped! `
I do not use lazy loaded modules.
Any idea what could cause this?
main.ts
function main () {
bootstrap(() => platformBrowserDynamic().bootstrapModule(AppModule))
.then(ngModule => console.log('AppModule boostraped!'))
.catch(console.error);
}
Why do you bootstrap AppModule?
When changing a component under a module, does only this module reloads? I see in the console that HMR logs the entire chain all the way to main.ts.
Good afternoon,
Faced with a problem. I started the assembly (prod): npm run build:prod
and uploaded the application to the server. I got errors that dependencies are required (node_modules). In the application for production there should be no such :(
Thank you very much for your work.
Currently, the server files reside in the src folder in the development environment.
I want all the server files i.e. .api.ts' & 'main.server.ts' outside of src folder in a different folder.
So, I have created a new folder called 'server' in the root directory and I removed the above-mentioned files from src and added them into a server. Actually, I want to create node API server so, I want to create separately server folder.
Then, I changed the path of file 'angular.json' as follows:
and in file 'udk.container.js' as follows:
Then I enter 'npm start' in terminal but I get the following error:
ERROR in ./server/main.server.ts
Module build failed: Error: /home/webosmotic/projects/universal/angular-universal/server/main.server.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
at AngularCompilerPlugin.getCompiledFile (/home/webosmotic/projects/universal/angular-universal/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:708:23)
at plugin.done.then (/home/webosmotic/projects/universal/angular-universal/node_modules/@ngtools/webpack/src/loader.js:41:31)
at
I am not able to find a solution for this...If anyone have a workaround for this please let me know.
I just clone the master.
When a I try to launch the app with yarn start, here is the error I receive
Could not find the implementation for builder udk:udk-builder
Error: Could not find the implementation for builder udk:udk-builder
https://github.com/enten/angular-universal/blob/master/udk.container.js#L14
I guess it should be tsconfig.json
, not tsconfg.json
Hey! First of all, thanks a lot for these great development tools and this starter.
I'm having some issues adding translation support.
For Angular component-side translations to work I currently use ngx-translate/i18n-polyfill which requires the translation files to be raw loaded into the application.
require('raw-loader!../i18n/messages.en.xlf');
This code is in app.module.ts
When using the Angular architect builder everything works as expected and the file gets included and loaded. But when trying to use the UDK builder it builds the client app (without errors!) and when trying to build the server app it fails with:
ERROR in /E/Coding/my-app/src/app/app.module.ts
Module not found: Error: Can't resolve '../i18n' in '/E/Coding/my-app/src/app'
resolve '../i18n' in '/E/Coding/my-app/src/app'
No description file found
No description file found
as directory
/E/Coding/my-app/src/i18n doesn't exist
[/E/Coding/my-app/src/app/package.json]
[/E/Coding/my-app/src/i18n/package.json]
[/E/Coding/my-app/src/i18n]
@ /E/Coding/my-app/src/app/app.module.ts 15:11-68
@ /E/Coding/my-app/src/app/app.server.module.ngfactory.js
@ /E/Coding/my-app/src/app/ngmodule.ts
@ /E/Coding/my-app/src/server.ts
@ /E/Coding/my-app/src/main.server.ts
(when changing the path to a non-existent one, it also fails almost instantly, this here happens after almost everything is already built)
Folder structure is this:
/src/
/src/i18n/
/src/app/
/src/app/app.module.ts
/src/main.server.ts
/src/main.ts
/src/server.ts => renamed from api.ts (adjusted the occurences too)
/dist/app/browser
is completely build
/dist/app/server
doesn't exist
Also getting this warning:
WARNING in ./src/i18n/messages.en.xlf
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" encoding="UTF-8"?>
If you have any idea what is causing this, it would be great if you could help with that! :)
App-shell improves statistics on the first contentfull point in the lighthouse benchmark
There is no clear way how to combine udk-builder and app-shell builder
I tried to make some adjustments but the udk library doesn't seem to work as it depdends on the Angular 10 devkit builder.
Do you want to provide support for Angular 11?
module.js:549
throw err;
^
Error: Cannot find module 'C:\Users\scran\Source\Repo\universal-enten$npm_package_main'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Function.Module.runMain (module.js:693:10)
at startup (bootstrap_node.js:191:16)
at bootstrap_node.js:612:3
ServerTransferStateModule and BrowserTransferStateModule should be used in order to send cached server http results to client.
Greetings. Thanks for your work.
Bumped into a problem with Lazy Loading. For example, I create a lazy module "home". I register in routing:
{ path: '', loadChildren: './home/home.module#HomeModule' },
And I get after picking up the assembly:
[HMR] Update check failed: SyntaxError: Unexpected token < in JSON at position 0
Unhandled Promise rejection: Unexpected token < in JSON at position 0 ; Zone: ; Task: Promise.then ; Value: SyntaxError: Unexpected token < in JSON at position 0
And with the new assembly we get:
ERROR in ./src/app/ngmodule.ts
Module not found: Error: Can't resolve 'home/home.module.ngfactory.js' in '/var/www/universal-starter/src/app'
Hi,
I'm trying to use your work with ng-bootstrap and i get:
import { forwardRef, Inject, Directive, Input, Output, EventEmitter, ElementRef, ContentChild, NgZone, Renderer2 } from '@angular/core';
^^^^^^
SyntaxError: Unexpected token import
Thanks
Any changes are not being reflected in server build until I kill the process and rerun npm run dev
.
The development cycle using default SSR universal functionality is so cumbersome its unusable (the way Im using it anyway).
Im having to rebuild the project for every change i make which is impossible for metatag tuning. I can't even make source code changes for manual reload with angular universal. Does this project offer HMR and SSR simultaneously?
i.e. can i make changes to a universal app and see them update in the browser?
thanks
this code
const domino = require("domino");
const fs = require("fs");
const path = require("path");
const templateA = fs
.readFileSync(path.join("dist/app/browser", "index.html"))
.toString();
const win = domino.createWindow(templateA);
win.Object = Object;
win.Math = Math;
global["window"] = win;
global["document"] = win.document;
global["branch"] = null;
global["object"] = win.object;
I'm using ng-lazyload-image & followed the documentation by importing in module & using it like this
<img [defaultImage]="'./assets/deleted_user.jpg'" [lazyLoad]="'./assets/lazy.jpg'" [errorImage]="'./assets/error.jpg'" alt="Top nav image" style=" height: 16.5px;
margin-bottom: 4px;">
but it's throwing error:
Can't bind to 'defaultImage' since it isn't a known property of 'img'.
Can't bind to 'lazyLoad' since it isn't a known property of 'img'.
Can't bind to 'errorImage' since it isn't a known property of 'img'.
I found this repository as well as https://github.com/angular/universal-starter, and I would want to know why / when it would be more appropriate to use your repository or the official one ?
What happened with the commit history?
I think you are the only guy who can help me solve this issue
I create an example too... https://github.com/mixalistzikas/angular-ssr-i18n
But when I run npm run build:all
I get this error: Unknown option: '--deployUrl'
Any suggestions. I know this is not your project but I'm trying to find a solution and none can help me.
Do you have a now.json that you did not include in the repo? I am trying to deploy an SSR angular app to now.sh and struggling on how to get it to work correctly. I cloned this repo and tried a now deployment but nothing happened on their end, it just uploaded the files. That's what's happening with my site.
Hi @enten @pwnpsasin @dvaldivia
if we add the module:commonjs in tsconfig.server.json
all our modules are compiled inside the main.js and not lazy-loaded on server side.. I can see the file difference in dist folder after the build. it will be good if we use the lazy loading module in server side as well. Not sure how we can do this..
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.