enten / angular-universal Goto Github PK

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

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;

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.

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

@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);
      });
  }
}

result:

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

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 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?

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.

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.

main.ts

function main () {
  bootstrap(() => platformBrowserDynamic().bootstrapModule(AppModule))
    .then(ngModule => console.log('AppModule boostraped!'))
    .catch(console.error);
}

Why do you bootstrap AppModule?

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.
`

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

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?

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.

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?

What happened with the commit history?

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'.

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?

`"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?!?!

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 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 ?

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

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

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

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?

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

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.

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"
  }
}

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?

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.

I'm wondering how can I prevent the HMR module to reload a specific service so I can keep state across reloads?

Any changes are not being reflected in server build until I kill the process and rerun npm run dev.

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..

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?

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?

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

https://github.com/enten/angular-universal/blob/master/udk.container.js#L14

I guess it should be tsconfig.json, not tsconfg.json

> [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

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?

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'

ServerTransferStateModule and BrowserTransferStateModule should be used in order to send cached server http results to client.

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.