Angular 4+ server-side rendering solution compatible with @angular/material, jQuery, and other libraries that touch the DOM (as well as providing a rich feature set!)
License: BSD 2-Clause "Simplified" License
How can I pre-render project that uses couple of languages based on this guide https://angular.io/docs/ts/latest/cookbook/i18n.html and uses @angular/cli (non ejected).
I have tried a lot of things, but it seems the angular-ssr uses the source and starts the project, but there is no way I can point it to the proper translation files.
Am I missing something or this feature is not implemented? Is such feature considered for implementation any soon and would that be easily achievable?
Hello,
Thanks for your work, it is wonderful !
When I try to run the command npm run build on a Cli project (I replaced the src folder with my project), I have this Typescript error (after the ng build) :
> ng-render
[info] Rendering application from source (working path: /home/kbarralon/angular-ssr/examples/cli) �[=0l
[error] Failed to render application: Error: Compilation failed: Error: src/app/components/home/home-content/carousel/carousel.animations.ts(3,14): error TS4023: Exported variable 'CarouselAnimations' has or is using name 'AnimationTriggerMetadata' from external module "/home/kbarralon/angular-ssr/examples/cli/node_modules/@angular/animations/src/animation_metadata" but cannot be named.
src/app/components/home/search-bar/search-bar.animations.ts(3,14): error TS4023: Exported variable 'SearchBarAnimations' has or is using name 'AnimationTriggerMetadata' from external module "/home/kbarralon/angular-ssr/examples/cli/node_modules/@angular/animations/src/animation_metadata" but cannot be named.
src/app/components/layout/header/nav/nav.animations.ts(3,14): error TS4023: Exported variable 'NavAnimations' has or is using name 'AnimationTriggerMetadata' from external module "/home/kbarralon/angular-ssr/examples/cli/node_modules/@angular/animations/src/animation_metadata" but cannot be named.
src/app/interfaces/instaMedia.interface.ts(9,21): error TS4033: Property 'images' of exported interface has or is using private name 'InstaImage'.
src/app/interfaces/instaMedia.interface.ts(10,16): error TS4033: Property 'images' of exported interface has or is using private name 'InstaImage'.
src/app/interfaces/instaMedia.interface.ts(11,26): error TS4033: Property 'images' of exported interface has or is using private name 'InstaImage'.
src/app/services/backgrounds.service.ts(13,10): error TS4053: Return type of public method from exported class has or is using name 'Observable' from external module "/home/kbarralon/angular-ssr/examples/cli/node_modules/rxjs/Observable" but cannot be named.
src/app/services/contact.service.ts(12,3): error TS4053: Return type of public method from exported class has or is using name 'Observable' from external module "/home/kbarralon/angular-ssr/examples/cli/node_modules/rxjs/Observable" but cannot be named.
src/app/services/social.service.ts(23,27): error TS4055: Return type of public method from exported class has or is using private name 'Socials'.
src/app/services/utils.service.ts(47,10): error TS4053: Return type of public method from exported class has or is using name 'MdSnackBarRef' from external module "/home/kbarralon/angular-ssr/examples/cli/node_modules/@angular/material/snack-bar/snack-bar-ref" but cannot be named.
src/app/services/utils.service.ts(47,10): error TS4053: Return type of public method from exported class has or is using name 'SimpleSnackBar' from external module "/home/kbarralon/angular-ssr/examples/cli/node_modules/@angular/material/snack-bar/simple-snack-bar" but cannot be named.
-> Error: src/app/components/home/home-content/carousel/carousel.animations.ts(3,14): error TS4023: Exported variable 'CarouselAnimations' has or is using name 'AnimationTriggerMetadata' from external module "/home/kbarralon/angular-ssr/examples/cli/node_modules/@angular/animations/src/animation_metadata" but cannot be named.
src/app/components/home/search-bar/search-bar.animations.ts(3,14): error TS4023: Exported variable 'SearchBarAnimations' has or is using name 'AnimationTriggerMetadata' from external module "/home/kbarralon/angular-ssr/examples/cli/node_modules/@angular/animations/src/animation_metadata" but cannot be named.
src/app/components/layout/header/nav/nav.animations.ts(3,14): error TS4023: Exported variable 'NavAnimations' has or is using name 'AnimationTriggerMetadata' from external module "/home/kbarralon/angular-ssr/examples/cli/node_modules/@angular/animations/src/animation_metadata" but cannot be named.
src/app/interfaces/instaMedia.interface.ts(9,21): error TS4033: Property 'images' of exported interface has or is using private name 'InstaImage'.
src/app/interfaces/instaMedia.interface.ts(10,16): error TS4033: Property 'images' of exported interface has or is using private name 'InstaImage'.
src/app/interfaces/instaMedia.interface.ts(11,26): error TS4033: Property 'images' of exported interface has or is using private name 'InstaImage'.
src/app/services/backgrounds.service.ts(13,10): error TS4053: Return type of public method from exported class has or is using name 'Observable' from external module "/home/kbarralon/angular-ssr/examples/cli/node_modules/rxjs/Observable" but cannot be named.
src/app/services/contact.service.ts(12,3): error TS4053: Return type of public method from exported class has or is using name 'Observable' from external module "/home/kbarralon/angular-ssr/examples/cli/node_modules/rxjs/Observable" but cannot be named.
src/app/services/social.service.ts(23,27): error TS4055: Return type of public method from exported class has or is using private name 'Socials'.
src/app/services/utils.service.ts(47,10): error TS4053: Return type of public method from exported class has or is using name 'MdSnackBarRef' from external module "/home/kbarralon/angular-ssr/examples/cli/node_modules/@angular/material/snack-bar/snack-bar-ref" but cannot be named.
src/app/services/utils.service.ts(47,10): error TS4053: Return type of public method from exported class has or is using name 'SimpleSnackBar' from external module "/home/kbarralon/angular-ssr/examples/cli/node_modules/@angular/material/snack-bar/simple-snack-bar" but cannot be named.
Do you have an idea ?
Thanks
Hello!
Ur package good working!
But.. :)
How to make my dynamic data render? I have read about preboot, and prerendering (where to pass this code?..)
I have custom dynamic text directive and i want ssr to render it. There my directive module:
localization.zip
App.module looks like root.module.ts in the demand-express
Hi there!!
Awesome work, thanks a lot for this repo!!!!
I'm making an app based on that and i had a issue where i could not include a document with subdocs (schemas..).
I dont know if you can help some how, because the same code works isolated (outisde of the andular-ssr index.ts)
Here is the bug in mongoose if you would like to keep tracking
Automattic/mongoose#5302 (comment)
Here is how i reproduced the error:
https://github.com/mariohmol/angular-ssr/blob/master/examples/demand-express/server/index.ts#L153
Feel free to close the issue if you think is not related or if there is nothing that you can do!
Thanks a lot!
I found no errors at all when i try to run my application without the lazyloaded modules.
but when i enable them inside the app routes i got webpack error message :
[error] Fatal exception encountered: Error: Cannot find a webpack chunk with the name ./test/test.module 0l [error] Failed to render application: Error: Fatal renderer exception: Error: Cannot find a webpack chunk with the name ./test/test.module at SafeSubscriber._error (/home/orange/Desktop/projects/maker/angular-ssr/examples/cli/node_modules/angular-ssr/source/application/builder/prerenderer.ts:26:20) at SafeSubscriber.__tryOrUnsub (/home/orange/Desktop/projects/maker/angular-ssr/examples/cli/node_modules/rxjs/src/Subscriber.ts:254:10) at SafeSubscriber.error (/home/orange/Desktop/projects/maker/angular-ssr/examples/cli/node_modules/rxjs/src/Subscriber.ts:216:16) at Subscriber._error (/home/orange/Desktop/projects/maker/angular-ssr/examples/cli/node_modules/rxjs/src/Subscriber.ts:139:22) at Subscriber.error (/home/orange/Desktop/projects/maker/angular-ssr/examples/cli/node_modules/rxjs/src/Subscriber.ts:109:12) at SafeSubscriber.__tryOrUnsub (/home/orange/Desktop/projects/maker/angular-ssr/examples/cli/node_modules/rxjs/src/Subscriber.ts:254:10) at SafeSubscriber.error (/home/orange/Desktop/projects/maker/angular-ssr/examples/cli/node_modules/rxjs/src/Subscriber.ts:216:16) at Subscriber._error (/home/orange/Desktop/projects/maker/angular-ssr/examples/cli/node_modules/rxjs/src/Subscriber.ts:139:22) at Subscriber.error (/home/orange/Desktop/projects/maker/angular-ssr/examples/cli/node_modules/rxjs/src/Subscriber.ts:109:12) at ReplaySubject.Subject.error (/home/orange/Desktop/projects/maker/angular-ssr/examples/cli/node_modules/rxjs/src/Subject.ts:77:15) at ApplicationImpl.<anonymous> (/home/orange/Desktop/projects/maker/angular-ssr/examples/cli/node_modules/angular-ssr/source/application/builder/impl/application.ts:82: 19) at step (/home/orange/Desktop/projects/maker/angular-ssr/examples/cli/node_modules/angular-ssr/build/application/builder/impl/application.js:31:23) at Object.throw (/home/orange/Desktop/projects/maker/angular-ssr/examples/cli/node_modules/angular-ssr/build/application/builder/impl/application.js:12:53) at rejected (/home/orange/Desktop/projects/maker/angular-ssr/examples/cli/node_modules/angular-ssr/build/application/builder/impl/application.js:4:65) at ZoneDelegate.invoke (/home/orange/Desktop/projects/maker/angular-ssr/examples/cli/node_modules/zone.js/dist/zone-node.js:391:26) at Zone.run (/home/orange/Desktop/projects/maker/angular-ssr/examples/cli/node_modules/zone.js/dist/zone-node.js:141:43) 0l
i am trying on the cli example and you can find an example here
https://github.com/wnabil/angular_universal_cli_lazyload
the normal serve is working fine
only the ng-render giving this error.
Sorry for bad English.
Error: Multiple root @NgModule discovered, cannot determine the correct one (AppModuleNgFactory in src/ngfactory/src/app/app.module.ngfactory, and AppModule in src/app/app.module)
I get the above error when I execute ./node_modules/.bin/ng-render
Can you tell me how to tell ng-render what the "correct NgModule" is?
Or how to use ng-render if there are multiple NgModule s ?
I was trying the application. I am using Angular 4.1.0 and Jquery 3.2.1. Everything runs fine with the Angular CLI. But When i try ./node_modules/.bin/ng-render. I get an error:
Failed to render application: ReferenceError: jQuery is not defined
Any suggestions?
I'm having an issue when pre-rendering an angular material beta 3 project using ng-render. It is failing on this line: https://github.com/angular/material2/blob/2.0.0-beta.3/src/lib/input/input-container.ts#L243 as validity is undefined on the native element that's being returned. If Domino doesn't support the ValidityState web API, can we add a polyfill for it?
When try to use Hummer.js on demand-express example get error from NodeJS: Error: Hammer.js is not loaded, can not bind swipeleft event
Bug:
I'm running into the same Error with my repo and even with your demand-express example. It always says:
TypeError: moduleFactory._injectorClass is not a constructor
The error is coming from source/platform/platform.ts line 113:
const createInjector = <M>(injector: Injector, moduleFactory: NgModuleFactory<M>): InstantiableModule<M> => new moduleFactory['_injectorClass'](injector);The argument moduleFactory doesn't have the attribute _injectorClass, it looks like that during runtime:
NgModuleFactory_ {
moduleType: [Function: RootModule],
_bootstrapComponents: [ [Function: RootComponent] ],
_ngModuleDefFactory: [Function]
}I'm using your demand-express example.
Edit:
It's probably because of this commit angular/angular@ce1d7c4, they removed the _injectorClass attribute from NgModuleFactory
i copied the example/cli and put my source code
then installed my dependencies
i almost disabled everything in my application to fix this error but sadly no luck.
[error] Fatal exception encountered: TypeError: Cannot read property 'title' of undefined 0l [error] Failed to render application: Error: Fatal renderer exception: TypeError: Cannot read property 'title' of undefined at SafeSubscriber._error (/home/orange/Desktop/projects/maker/maker-front/node_modules/angular-ssr/source/application/builder/prerenderer.ts:26:20) at SafeSubscriber.__tryOrUnsub (/home/orange/Desktop/projects/maker/maker-front/node_modules/rxjs/src/Subscriber.ts:254:10) at SafeSubscriber.error (/home/orange/Desktop/projects/maker/maker-front/node_modules/rxjs/src/Subscriber.ts:216:16) at Subscriber._error (/home/orange/Desktop/projects/maker/maker-front/node_modules/rxjs/src/Subscriber.ts:139:22) at Subscriber.error (/home/orange/Desktop/projects/maker/maker-front/node_modules/rxjs/src/Subscriber.ts:109:12) at SafeSubscriber.__tryOrUnsub (/home/orange/Desktop/projects/maker/maker-front/node_modules/rxjs/src/Subscriber.ts:254:10) at SafeSubscriber.error (/home/orange/Desktop/projects/maker/maker-front/node_modules/rxjs/src/Subscriber.ts:216:16) at Subscriber._error (/home/orange/Desktop/projects/maker/maker-front/node_modules/rxjs/src/Subscriber.ts:139:22) at Subscriber.error (/home/orange/Desktop/projects/maker/maker-front/node_modules/rxjs/src/Subscriber.ts:109:12) at ReplaySubject.Subject.error (/home/orange/Desktop/projects/maker/maker-front/node_modules/rxjs/src/Subject.ts:77:15) at ApplicationImpl.<anonymous> (/home/orange/Desktop/projects/maker/maker-front/node_modules/angular-ssr/source/application/builder/impl/application.ts:81:19) at step (/home/orange/Desktop/projects/maker/maker-front/node_modules/angular-ssr/build/application/builder/impl/application.js:31:23) at Object.throw (/home/orange/Desktop/projects/maker/maker-front/node_modules/angular-ssr/build/application/builder/impl/application.js:12:53) at rejected (/home/orange/Desktop/projects/maker/maker-front/node_modules/angular-ssr/build/application/builder/impl/application.js:4:65) at ZoneDelegate.invoke (/home/orange/Desktop/projects/maker/maker-front/node_modules/zone.js/dist/zone-node.js:391:26) at Zone.run (/home/orange/Desktop/projects/maker/maker-front/node_modules/zone.js/dist/zone-node.js:141:43) 0l
When I use Number and getClientRects methods I get errors:
Failed to render application: TypeError: elem.getClientRects is not a function
Failed to render application: TypeError: Number is not a function
Not sure if you saw my comment about finding the root cause of #36, so figured I should just move it over to a new ticket.
It seems that having a node_modules accessible from the temporary rendering directory causes the error I pasted (as you noted, most likely by causing multiple instances of reflect-metadata to be loaded).
Could this be resolved simply by having ng-render add something to the effect of "exclude": ["/node_modules", "/tmp/node_modules"] to the relevant tsconfig.json?
I'm following the instructions for setting up the most simple example based on your instructions.
I generated a new project with:
ng new projname --routing
I generated some components to test out the SEO stuff, linked to them with routerLink, set them up with paths in the app-routing.module.ts, and did your steps:
ng build
.\node_modules.bin\ng-render
It outputs:
[info] Rendering application from source (working path: C:\Users\gary\AppData\Local\Temp\eed79cbf415c8)
...and then in about 60-120 seconds, outputs this:
C:\Users\gary\code\ang-seo-pre\node_modules\angular-ssr\source\application\static\find.ts:16
const exports: Map<string, any> = sourceFile['symbol'].exports;
^
TypeError: Cannot read property 'exports' of undefined
at Object.exports.exportClause (C:\Users\gary\code\ang-seo-pre\node_modules\angular-ssr\source\application\static\find.ts:16:57)
at _loop_1 (C:\Users\gary\code\ang-seo-pre\node_modules\angular-ssr\source\application\static\modules\root.ts:60:29)
at Object.exports.discoverRootModule (C:\Users\gary\code\ang-seo-pre\node_modules\angular-ssr\build\application\static\modules\root.js:59:9)
at Object.exports.loadApplicationModule (C:\Users\gary\code\ang-seo-pre\node_modules\angular-ssr\source\application\compiler\options.ts:57:14)
at WebpackCompiler.compile (C:\Users\gary\code\ang-seo-pre\node_modules\angular-ssr\source\application\compiler\webpack\compiler.ts:30:38)
at ApplicationBuilderFromSource.build (C:\Users\gary\code\ang-seo-pre\node_modules\angular-ssr\source\application\builder\from-source.ts:18:29)
at Object.<anonymous> (C:\Users\gary\code\ang-seo-pre\node_modules\angular-ssr\source\bin\render.ts:36:29)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\Users\gary\code\ang-seo-pre\node_modules\angular-ssr\bin\render.js:3:1)
at Module._compile (module.js:570:32)
I'm sure I'm just something doing stupid or overlooked a step? Let me know, thanks!
Can you provide example to transfer state from server to client (for example in demand-express), because readme is not clearly show how to implement this.
When I try to load url from lazy load module server return right response, but when client code loaded, after few seconds content disappear (no errors in console).
When I remove lazy loading or reload page without cache all working fine.
Tested on browsers: Safari (v 10.1.1) and Chrome (v 58.0.3029.81)
When trying to use hammerjs, get error on server side.
I use this property to get the platform. But I get undefined because this method is not available
getClientRects method is not implemented
You can see example here
@clbond First of all, thanks for this great repo ! It's the first SSR solution which works as advertised. Great work 👍
I am using on-demand SSR solution using Express. Its working great. I am trying to find a way to transfer some data from Express res.locals object to client through index.html, on page load. So, I can avoid an ajax call.
Is there an example, I can refer, where this might be possible ? Any help is greatly appreciated
Tested with angular-ssr 0.1.88, Angular 4.1, TypeScript 2.3.1, and Node 7.9.0 on Debian Sid in a Docker container with 2 GB RAM allocated.
My project doesn't use the Angular CLI, but otherwise it should be a typical enough Angular project that I wouldn't expect any issues working with angular-ssr (routes configured with @angular/router, AOT with webpack + @ngtools/webpack, UI built with @angular/material and @angular/flex-layout, occasional use of web-dependent libs like JQuery).
The command that triggers this result is: ng-render --template /home/gibson/.build/cyph.com/index.html --module cyph.com/app.module.ts --symbol AppModule --project . --webpack cyph.com/main.webpack.js --output /home/gibson/.build/cyph.com.
Based on the stack trace below, it looks like patchModuleSearch in render.ts is the culprit. The path of our node_modules in this Docker image is /node_modules; maybe it's just handling that incorrectly?
<--- Last few GCs --->
[6924:0x55abce62c7e0] 156609 ms: Mark-sweep 1242.6 (1300.6) -> 1242.3 (1301.1) MB, 333.3 / 0.0 ms allocation failure GC in old space requested
[6924:0x55abce62c7e0] 156942 ms: Mark-sweep 1242.3 (1301.1) -> 1242.2 (1270.1) MB, 327.0 / 0.0 ms last resort
[6924:0x55abce62c7e0] 157302 ms: Mark-sweep 1242.2 (1270.1) -> 1242.2 (1269.6) MB, 359.2 / 0.0 ms last resort
<--- JS stacktrace --->
==== JS stack trace =========================================
Security context: 0x32b43d3a66a1 <JS Object>
2: patchModuleSearch(aka patchModuleSearch) [/node_modules/angular-ssr/build/bin/render.js:~87] [pc=0x1964983cafee](this=0xc74c2602311 <undefined>)
3: arguments adaptor frame: 2->0
4: /* anonymous */ [/node_modules/angular-ssr/build/bin/render.js:44] [pc=0x196497b56891](this=0x2a78aeb67599 <an Object with map 0x14703482cd61>,exports=0x2a78aeb67599 <an Object with map 0x14703482cd61>...
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: node::Abort() [node]
2: 0x55abcc95b05e [node]
3: v8::Utils::ReportOOMFailure(char const*, bool) [node]
4: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [node]
5: v8::internal::Factory::NewUninitializedFixedArray(int) [node]
6: 0x55abcc41459b [node]
7: 0x55abcc0b914c [node]
8: v8::internal::Runtime_ArrayPush(int, v8::internal::Object**, v8::internal::Isolate*) [node]
9: 0x196497a0ed46
It looks like angular-ssr doesn't like rxjs (version 5.3.1*)? After resolving or working around all other issues, ng-render now fails with this error:
[error] Failed to render application: TypeError: Cannot read property 'bind' of undefined
at new ImmediateDefinition (/node_modules/rxjs/src/util/Immediate.ts:25:48)
at Object.<anonymous> (/node_modules/rxjs/src/util/Immediate.ts:238:26)
at Module._compile (module.js:571:32)
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> (/node_modules/rxjs/src/scheduler/AsapAction.ts:1:1)
at Module._compile (module.js:571:32)
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)
* Edit: Also reproduced using rjxs 5.4.0 / Angular 4.1.2 / angular-ssr 0.1.100.
Hello!
I have the handler for the DOMContentLoaded event.
When I delete the event handler, I get the code recursion.
To reproduce the problem, you can use the following code.
var callback = function() {
console.log("callback");
}
var loadedCallback = function() {
callback();
document.removeEventListener("DOMContentLoaded", loadedCallback)
};
document.addEventListener("DOMContentLoaded", loadedCallback)Error:
callback
callback
callback
callback
callback
callback
callback
callback
callback
[2017-05-02T19:32:00.196Z] [error] [] Failed to render application: Error: caused by: Cannot instantiate cyclic dependency!: Error during instantiation of DocumentContainer!.: Error during instantiation of DocumentContainer!.: Error during instantiation of DocumentContainer!.: Error during instantiation of DocumentContainer!.: Error during instantiation of DocumentContainer!.: Error during instantiation of DocumentContainer!.: Error during instantiation of DocumentContainer!.: Error during instantiation of DocumentContainer!.
at wrappedError (e:\examples\111\angular-ssr-master\examples\cli\node_modules@angular\core\bundles\core.umd.js:1193:34) [http://localhost/]
at injectionError (e:\examples\111\angular-ssr-master\examples\cli\node_modules@angular\core\bundles\core.umd.js:1239:52) [http://localhost/]
at instantiationError (e:\examples\111\angular-ssr-master\examples\cli\node_modules@angular\core\bundles\core.umd.js:1337:12) [http://localhost/]
at ReflectiveInjector_.instantiate (e:\examples\111\angular-ssr-master\examples\cli\node_modules@angular\core\bundles\core.umd.js:2725:19) [http://localhost/]
at ReflectiveInjector.instantiateProvider (e:\examples\111\angular-ssr-master\examples\cli\node_modules@angular\core\bundles\core.umd.js:2698:25) [http://localhost/]
at ReflectiveInjector.new (e:\examples\111\angular-ssr-master\examples\cli\packages\core\src\di\reflective_injector.ts:349:4) [http://localhost/]
at ReflectiveInjector._getObj[...]
ng new whatever
npm i --S angular-ssr
npm run build (doing ng-render) after
Failed to render application: Error: Cannot find a generated NgFactory matching the name src\app\app.module with a symbol AppModule
(Same with /example/CLI app)
How check state of data on client side ?
[info] Rendering application from source (working path: C:\Users\DEEPAK~1.KUM\AppData\Local\Temp\8a64d5de8297)
Unhandled Promise rejection: Hash: 78b6a7ffed306051892e
Version: webpack 2.4.1
Time: 5845ms
Asset Size Chunks Chunk Names
0.js 989 bytes 0 app\app.module
chunk {0} 0.js (app\app.module) 448 bytes [entry] [rendered]
[Cos1] ./src/app/app.module.ts 420 bytes {0} [built] [failed] [1 error]
[0] multi ./app/app.module.ts 28 bytes {0} [built]
ERROR in ./src/app/app.module.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (D:\GitWork\web-ui\node_modules\typescript\lib\typescript.js:9514:20)
at Object.createCompilerHost (D:\GitWork\web-ui\node_modules\typescript\lib\typescript.js:63770:26)
at Object.ngcLoader (D:\GitWork\web-ui\node_modules\@ngtools\webpack\src\loader.js:380:33)
@ multi ./app/app.module.ts ; Zone: <root> ; Task: Promise.then ; Value: { Error: Hash: 78b6a7ffed306051892e
Version: webpack 2.4.1
Time: 5845ms
Asset Size Chunks Chunk Names
0.js 989 bytes 0 app\app.module
chunk {0} 0.js (app\app.module) 448 bytes [entry] [rendered]
[Cos1] ./src/app/app.module.ts 420 bytes {0} [built] [failed] [1 error]
[0] multi ./app/app.module.ts 28 bytes {0} [built]
ERROR in ./src/app/app.module.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (D:\GitWork\web-ui\node_modules\typescript\lib\typescript.js:9514:20)
at Object.createCompilerHost (D:\GitWork\web-ui\node_modules\typescript\lib\typescript.js:63770:26)
at Object.ngcLoader (D:\GitWork\web-ui\node_modules\@ngtools\webpack\src\loader.js:380:33)
@ multi ./app/app.module.ts
at CompilerException.Exception [as constructor] (D:\GitWork\web-ui\node_modules\angular-ssr\source\exception.ts:6:5)
at new CompilerException (D:\GitWork\web-ui\node_modules\angular-ssr\build\exception.js:63:42)
at D:\GitWork\web-ui\node_modules\angular-ssr\source\application\compiler\webpack\compiler.ts:92:18
at onCompiled (D:\GitWork\web-ui\node_modules\angular-ssr\node_modules\webpack\lib\Compiler.js:239:14)
at D:\GitWork\web-ui\node_modules\angular-ssr\node_modules\webpack\lib\Compiler.js:494:13
at next (D:\GitWork\web-ui\node_modules\tapable\lib\Tapable.js:138:11)
at Compiler.<anonymous> (D:\GitWork\web-ui\node_modules\angular-ssr\node_modules\webpack\lib\CachePlugin.js:62:5)
at Compiler.applyPluginsAsyncSeries (D:\GitWork\web-ui\node_modules\tapable\lib\Tapable.js:142:13)
at D:\GitWork\web-ui\node_modules\angular-ssr\node_modules\webpack\lib\Compiler.js:491:10
at next (D:\GitWork\web-ui\node_modules\tapable\lib\Tapable.js:138:11)
at Compilation.compilation.plugin (D:\GitWork\web-ui\node_modules\angular-ssr\node_modules\@angular\cli\plugins\suppress-entry-chunks-webpack-plugin.js:35:17)
at Compilation.applyPluginsAsyncSeries (D:\GitWork\web-ui\node_modules\tapable\lib\Tapable.js:142:13)
at self.applyPluginsAsync.err (D:\GitWork\web-ui\node_modules\angular-ssr\node_modules\webpack\lib\Compilation.js:645:19)
at Compilation.applyPluginsAsyncSeries (D:\GitWork\web-ui\node_modules\tapable\lib\Tapable.js:131:46)
at self.applyPluginsAsync.err (D:\GitWork\web-ui\node_modules\angular-ssr\node_modules\webpack\lib\Compilation.js:636:11)
at next (D:\GitWork\web-ui\node_modules\tapable\lib\Tapable.js:138:11)
innerException: undefined,
__zone_symbol__currentTask:
ZoneTask {
_zone:
Zone {
_properties: {},
_parent: null,
_name: '<root>',
_zoneDelegate: [Object] },
runCount: 0,
_zoneDelegates: null,
_state: 'notScheduled',
type: 'microTask',
source: 'Promise.then',
data: undefined,
scheduleFn: undefined,
cancelFn: null,
callback: [Function],
invoke: [Function] } } Error: Hash: 78b6a7ffed306051892e
Version: webpack 2.4.1
Server returned status code 200 each page
Calling ng-render results in the following error with @angular/[email protected]:
Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming
Unhandled Promise rejection: CSS is not defined ; Zone: <root> ; Task: Promise.then ; Value: { ReferenceError: CSS is not defined
at new t (C:\Users\etroday\AppData\Local\Temp\6412b9a215543\0.js:6:10790)
at NgModuleInjector.get (ng:///t/module.ngfactory.js:155:47)
at NgModuleInjector.tInjector.getInternal (ng:///t/module.ngfactory.js:253:41)
at NgModuleInjector.get (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:3584:44)
at resolveDep (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:11046:45)
at createClass (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:10910:32)
at createDirectiveInstance (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:10730:37)
at createViewNodes (<path-to-app>\packages\core\src\view\view.ts:292:12)
at callViewAction (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:12537:13)
at execComponentViewsAction (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:12446:13)
at createViewNodes (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:12120:5)
at createRootView (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:11998:5)
at callWithDebugContext (<path-to-app>\packages\core\src\view\services.ts:647:1)
at Object.debugCreateRootView [as createRootView] (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:12673:12)
at ComponentFactory_.create (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:9919:46)
at ComponentFactoryBoundToModule.create (<path-to-app>\node_modules\@angular\core\bundles\core.umd.js:3455:29)
ng new.npm install --save @angular/material @angular/animations.BrowserAnimationsModule and MdButtonModule in the app module.index.html:<link href="./node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
app.component.ts, replace {{title}} with <button md-button>{{title}}</button>ng build followed by node_modules\.bin\ng-renderWhen an error is propagated from https://github.com/clbond/angular-ssr/blob/master/source/application/builder/prerenderer.ts#L23, it does not currently exit the process with the proper error code for CI to fail. Can we add a process.exit(1) call somewhere to cover this?
These are the steps I take to reproduce the issue.
I get the following error:
C:\tests\example\node_modules\angular-ssr\source\application\static\find.ts:16
const exports: Map<string, any> = sourceFile['symbol'].exports;
^
TypeError: Cannot read property 'exports' of undefined
at Object.exports.exportClause (C:\Users\nick\Desktop\example\example\node_modules\angular-ssr\source\application\static\find.ts:16:57)
at _loop_1 (C:\Users\nick\Desktop\example\example\node_modules\angular-ssr\source\application\static\modules\root.ts:60:29)
at Object.exports.discoverRootModule (C:\Users\nick\Desktop\example\example\node_modules\angular-ssr\build\application\static\modules\root.js:59:9)
at Object.exports.loadApplicationModule (C:\Users\nick\Desktop\example\example\node_modules\angular-ssr\source\application\compiler\options.ts:57:14)
at WebpackCompiler.compile (C:\Users\nick\Desktop\example\example\node_modules\angular-ssr\source\application\compiler\webpack\compiler.ts:30:38)
at ApplicationBuilderFromSource.build (C:\Users\nick\Desktop\example\example\node_modules\angular-ssr\source\application\builder\from-source.ts:18:29)
at Object. (C:\Users\nick\Desktop\example\example\node_modules\angular-ssr\source\bin\render.ts:31:29)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (C:\Users\nick\Desktop\example\example\node_modules\angular-ssr\bin\render.js:3:1)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
I would like to figure out why this is happening myself, but when I go through the source, I'm having trouble figuring out the entire flow of the process.
So, my questions are if anyone knows what this issue could be, and also where to start looking to get a better feel for how this package works overall.
Thank You!
--nick
Thank you for developing awesome ssr project.
In my project, 'ng-render' command displayed an error message..
[error] Failed to render application: SyntaxError: Unexpected token import =
With this message, i can't find out which file has problem.
https://github.com/clbond/angular-ssr/blob/master/source/bin/render.ts#L32
Can you support stack trace for rendering application exception?
Like we were talking about earlier, could be a domino issue not sure, just wanted to log in just incase.
var temp = document.createElement('div');
temp.innerHTML = '<h1>Whatever</h1>';
if( temp.innerText.length )
^ will break server hereEdit: found the problem. Apparently domino doesn't like DOMPurify. Specifically, it needs to be able to use Element.prototype.outerHTML.set.
Haven't investigated to find out what's triggering it yet, but running ./node_modules/.bin/ng-render --debug after ng build in my project produces the following error:
[error] Failed to render application: Error: NotYetImplemented
at HTMLBodyElement.exports.nyi (/home/gibson/balls/cyph.com/node_modules/domino/lib/utils.js:41:9)
at _initDocument (/tmp/b1ac8c65b477c/0.js:32221:28)
at /tmp/b1ac8c65b477c/0.js:32244:23
at factory (/tmp/b1ac8c65b477c/0.js:32248:10)
at Object.<anonymous> (/tmp/b1ac8c65b477c/0.js:31814:62)
at /tmp/b1ac8c65b477c/0.js:31814:79
at Object.module.exports.module.exports.haveOpts (/tmp/b1ac8c65b477c/0.js:31821:2)
at __webpack_require__ (/tmp/b1ac8c65b477c/0.js:21:30)
at Object.module.exports.P (/tmp/b1ac8c65b477c/0.js:44067:68)
at __webpack_require__ (/tmp/b1ac8c65b477c/0.js:21:30)
at Object.<anonymous> (/tmp/b1ac8c65b477c/0.js:44261:69)
at __webpack_require__ (/tmp/b1ac8c65b477c/0.js:21:30)
at Object.<anonymous> (/tmp/b1ac8c65b477c/0.js:33211:75)
at __webpack_require__ (/tmp/b1ac8c65b477c/0.js:21:30)
at Object.<anonymous> (/tmp/b1ac8c65b477c/0.js:64320:18)
at __webpack_require__ (/tmp/b1ac8c65b477c/0.js:21:30)
Package versions:
@angular/*: 4.1.1
@angular/cli: 1.0.2
@angular/flex-layout: 2.0.0-beta.8
@angular/material: 2.0.0-beta.3
angular-ssr: 0.1.97
domino: 1.0.44
node: 7.10.0
typescript: 2.3.2
webpack: 2.5.1
Hi!angular-ssr is actually a great done!
But I need to build the project with webpack, any help?
Because of the way angular-ssr does HTTP (using an XMLHttpRequest emulation layer), and because we use zone-node instead of zone browser, zone does not automatically hook in to HTTP requests when deciding if the zone is stable or not. So there needs to be a fix that addresses this in waitForApplicationToBecomeStable.
Using angular-ssr 0.1.103 + Angular 4.1.3 + CLI 1.0.3 + rxjs 5.4.0 + zone.js 0.8.10 + TypeScript 2.3.2, the following is consistently reproducible when running ng-render. I also tried the two workarounds from #28 (tsconfig flattening, --module/--symbol) and got the same result.
Edit: also reproducible with 0.9.10.
gibson@2f931fc84db6:~/cyph/cyph.com$ ./node_modules/.bin/ng-render
[info] Rendering application from source (working path: /tmp/aa881fca662ab)
[error] Failed to render application: No NgModule metadata found for 't'. (use --debug to see a full stack trace)
gibson@2f931fc84db6:~/cyph/cyph.com$ ./node_modules/.bin/ng-render --debug
[info] Rendering application from source (working path: /tmp/cda25c7b0c1a2)
[error] Failed to render application: Error: No NgModule metadata found for 'AppModule'.
at NgModuleResolver.resolve (/home/gibson/cyph/cyph.com/node_modules/@angular/compiler/@angular/compiler.es5.js:13884:12)
at CompileMetadataResolver.getNgModuleMetadata (/home/gibson/cyph/cyph.com/node_modules/@angular/compiler/@angular/compiler.es5.js:14468:58)
at JitCompiler._loadModules (/home/gibson/cyph/cyph.com/node_modules/@angular/compiler/@angular/compiler.es5.js:25635:61)
at JitCompiler._compileModuleAndComponents (/home/gibson/cyph/cyph.com/node_modules/@angular/compiler/@angular/compiler.es5.js:25594:21)
at JitCompiler.compileModuleAsync (/home/gibson/cyph/cyph.com/node_modules/@angular/compiler/bundles/compiler.umd.js:25561:23)
at ServerPlatform.compileModule (/home/gibson/cyph/cyph.com/node_modules/angular-ssr/source/platform/platform.ts:33:21)
at /home/gibson/cyph/cyph.com/node_modules/angular-ssr/source/application/builder/from-source.ts:31:22
at ZoneDelegate.invoke (/home/gibson/cyph/cyph.com/node_modules/zone.js/dist/zone-node.js:381:26)
at Zone.run (/home/gibson/cyph/cyph.com/node_modules/zone.js/dist/zone-node.js:141:43)
at /home/gibson/cyph/cyph.com/node_modules/zone.js/dist/zone-node.js:805:57
at ZoneDelegate.invokeTask (/home/gibson/cyph/cyph.com/node_modules/zone.js/dist/zone-node.js:414:31)
at Zone.runTask (/home/gibson/cyph/cyph.com/node_modules/zone.js/dist/zone-node.js:181:47)
at drainMicroTaskQueue (/home/gibson/cyph/cyph.com/node_modules/zone.js/dist/zone-node.js:574:35)
at ZoneTask.invoke (/home/gibson/cyph/cyph.com/node_modules/zone.js/dist/zone-node.js:480:25)
at data.args.(anonymous function) (/home/gibson/cyph/cyph.com/node_modules/zone.js/dist/zone-node.js:1370:25)
at FSReqWrap.oncomplete (fs.js:114:15)
ng-render is consistently failing with the error [error] Failed to render application: Error: Cannot find a generated NgFactory matching the name cyph.com/app.module with a symbol AppModule, or ... cyph.com/app.module.ngfactory ... AppModuleNgFactory.
I've tried the following with the same or similar results:
Doing AOT via webpack + @ngtools/webpack
Doing AOT via ngc directly
Switching --module between relative and absolute paths
Switching --module between app.module.ts and app.module.ngfactory.ts
Omitting --module entirely
The file it's saying it can't find clearly exists, so I'm not sure what the problem is. The stack trace is below. Any ideas?
[info] Rendering application from source (working path: /tmp/38392951ec72b)
[error] Failed to render application: Error: Cannot find a generated NgFactory matching the name cyph.com/app.module with a symbol AppModule
at CompilerException.ZoneAwareError (/node_modules/zone.js/dist/zone-node.js:915:33)
at CompilerException.Exception [as constructor] (/node_modules/angular-ssr/source/exception.ts:6:5)
at new CompilerException (/node_modules/angular-ssr/build/exception.js:64:42)
at NgcModuleLoader.loadModule (/node_modules/angular-ssr/source/application/compiler/ngc/loader.ts:26:13)
at NgcModuleLoader.load (/node_modules/angular-ssr/source/application/compiler/ngc/loader.ts:12:17)
at /node_modules/angular-ssr/source/application/builder/from-source.ts:29:22
at ZoneDelegate.invoke (/node_modules/zone.js/dist/zone-node.js:365:26)
at Zone.run (/node_modules/zone.js/dist/zone-node.js:125:43)
at /node_modules/zone.js/dist/zone-node.js:758:57
at ZoneDelegate.invokeTask (/node_modules/zone.js/dist/zone-node.js:398:31)
at Zone.runTask (/node_modules/zone.js/dist/zone-node.js:165:47)
at drainMicroTaskQueue (/node_modules/zone.js/dist/zone-node.js:591:35)
at ZoneTask.invoke (/node_modules/zone.js/dist/zone-node.js:464:25)
at data.args.(anonymous function) (/node_modules/zone.js/dist/zone-node.js:1598:25)
at _combinedTickCallback (internal/process/next_tick.js:86:20)
at process._tickCallback (internal/process/next_tick.js:104:9)
at Module.runMain (module.js:607:11)
at run (bootstrap_node.js:423:7)
at startup (bootstrap_node.js:147:9)
at bootstrap_node.js:538:3
Can I jump on call with you to for a code walkthrough?
Hello,
what is the current state for SCSS?
I've found this commit but I'm receiving many errors in an existing project. I think this is caused by wrong interpreted scss imports inside of .scss files.
Example:
__zone_symbol__stack: 'Error: Compilation failed. Resource file not found: XXXX/www/src/styling/mixins/background-gardient\n at ResourceResolver.ModuleResolutionHostAdapter.readResource
Import in someFile.scss (usage)
@import "mixins/background-gardient";
Real Filename:
_background-gardient.scss
I'm trying to run the simple setup of ng-render for the first time on a pretty simple Angular 4 app I have.
For some reason I get the error Unhandled Promise rejection: Cannot find module '@angular/platform-browser'.
I couldn't find anything related here or on Google, so any help would be appreciated.
Obviously I am using the platform-browser in my AppModule in the standard way:
import { BrowserModule } from '@angular/platform-browser';
Any reason this shouldn't work?
The output I get is this:
[info] Rendering application from source (working path: C:\Users\Me\AppData\Local\Temp\61dd0e8dc6993)
Unhandled Promise rejection: Cannot find module '@angular/platform-browser' ; Zone: <root> ; Task: Promise.then ; Value: { Error: Cannot find module '@angular/platform-browser'
at Function.Module._resolveFilename (module.js:470:15)
at Function.Module._load (module.js:418:25)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.2 (C:\Users\Me\AppData\Local\Temp\61dd0e8dc6993\webpack:\external "@angular\platform-browser":1:1)
at e (C:\Users\Me\AppData\Local\Temp\61dd0e8dc6993\webpack:\webpack\bootstrap 89d9a0feecaa42a70d63:19:1)
at Object.Cos1 (C:\Users\Me\AppData\Local\Temp\61dd0e8dc6993\webpack:\0.js:6456:84)
at e (C:\Users\Me\AppData\Local\Temp\61dd0e8dc6993\webpack:\webpack\bootstrap 89d9a0feecaa42a70d63:19:1)
at Object.39 (C:\Users\Me\AppData\Local\Temp\61dd0e8dc6993\webpack:\0.js:3456:18)
at e (C:\Users\Me\AppData\Local\Temp\61dd0e8dc6993\webpack:\webpack\bootstrap 89d9a0feecaa42a70d63:19:1)
at C:\Users\Me\AppData\Local\Temp\61dd0e8dc6993\webpack:\webpack\bootstrap 89d9a0feecaa42a70d63:65:1
at Object.<anonymous> (C:\Users\Me\AppData\Local\Temp\61dd0e8dc6993\webpack:\webpack\bootstrap 89d9a0feecaa42a70d63:65:1)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
code: 'MODULE_NOT_FOUND',
__zone_symbol__currentTask:
ZoneTask {
_zone:
Zone {
_properties: {},
_parent: null,
_name: '<root>',
_zoneDelegate: [Object] },
runCount: 0,
_zoneDelegates: null,
_state: 'notScheduled',
type: 'microTask',
source: 'Promise.then',
data: undefined,
scheduleFn: undefined,
cancelFn: null,
callback: [Function],
invoke: [Function] } } Error: Cannot find module '@angular/platform-browser'
at Function.Module._resolveFilename (module.js:470:15)
at Function.Module._load (module.js:418:25)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.2 (C:\Users\Me\AppData\Local\Temp\61dd0e8dc6993\webpack:\external "@angular\platform-browser":1:1)
at e (C:\Users\Me\AppData\Local\Temp\61dd0e8dc6993\webpack:\webpack\bootstrap 89d9a0feecaa42a70d63:19:1)
at Object.Cos1 (C:\Users\Me\AppData\Local\Temp\61dd0e8dc6993\webpack:\0.js:6456:84)
at e (C:\Users\Me\AppData\Local\Temp\61dd0e8dc6993\webpack:\webpack\bootstrap 89d9a0feecaa42a70d63:19:1)
at Object.39 (C:\Users\Me\AppData\Local\Temp\61dd0e8dc6993\webpack:\0.js:3456:18)
at e (C:\Users\Me\AppData\Local\Temp\61dd0e8dc6993\webpack:\webpack\bootstrap 89d9a0feecaa42a70d63:19:1)
at C:\Users\Me\AppData\Local\Temp\61dd0e8dc6993\webpack:\webpack\bootstrap 89d9a0feecaa42a70d63:65:1
at Object.<anonymous> (C:\Users\Me\AppData\Local\Temp\61dd0e8dc6993\webpack:\webpack\bootstrap 89d9a0feecaa42a70d63:65:1)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
Seems that we need to make sure we're patching the Title service correctly. Might need to look into if the Meta service is doing the same.
To repro:
this.title.setTitle(' blow up the server :) ')
BrowserDomAdapter.prototype.setTitle = function (doc, newTitle) { document.title = newTitle || ''; };
Hello, I can't run the ng-render. It outputs "Chunk app/app.module does not have associated output files".
Step to re-product:
ng new project
cd project
ng build
./node_modules/.bin/ng-render
angluar version:
@angular/cli: 1.1.3
node: 8.1.2
os: linux x64
@angular/animations: 4.2.4
@angular/common: 4.2.4
@angular/compiler: 4.2.4
@angular/core: 4.2.4
@angular/forms: 4.2.4
@angular/http: 4.2.4
@angular/platform-browser: 4.2.4
@angular/platform-browser-dynamic: 4.2.4
@angular/router: 4.2.4
@angular/service-worker: 1.0.0-beta.8
@angular/cli: 1.1.3
@angular/compiler-cli: 4.2.4
@angular/language-service: 4.2.4
Output:
output.txt
[info] Rendering application from source (working path: /tmp/18eb39ace1b68) 0l
Unhandled Promise rejection: Chunk app/app.module does not have associated output files ; Zone: <root> ; Task: Promise.then ; Value: { Error: Chunk app/app.module does not have associated output files
at CompilerException.Exception [as constructor] (/tmp/ng/node_modules/angular-ssr/source/exception.ts:6:5)
at new CompilerException (/tmp/ng/node_modules/angular-ssr/build/exception.js:63:42)
at WebpackModuleLoader.lazy (/tmp/ng/node_modules/angular-ssr/source/application/compiler/webpack/loader.ts:26:13)
at WebpackModuleLoader.load (/tmp/ng/node_modules/angular-ssr/source/application/compiler/webpack/loader.ts:15:17)
at /tmp/ng/node_modules/angular-ssr/source/application/builder/from-source.ts:37:22
at ZoneDelegate.invoke (/tmp/ng/node_modules/zone.js/dist/zone-node.js:391:26)
at Zone.run (/tmp/ng/node_modules/zone.js/dist/zone-node.js:141:43)
at /tmp/ng/node_modules/zone.js/dist/zone-node.js:818:57
at ZoneDelegate.invokeTask (/tmp/ng/node_modules/zone.js/dist/zone-node.js:424:31)
at Zone.runTask (/tmp/ng/node_modules/zone.js/dist/zone-node.js:191:47)
at drainMicroTaskQueue (/tmp/ng/node_modules/zone.js/dist/zone-node.js:584:35)
at ZoneTask.invoke (/tmp/ng/node_modules/zone.js/dist/zone-node.js:490:25)
at data.args.(anonymous function) (/tmp/ng/node_modules/zone.js/dist/zone-node.js:1274:25)
at FSReqWrap.oncomplete (fs.js:135:15)
innerException: undefined,
__zone_symbol__currentTask:
ZoneTask {
_zone:
Zone {
_properties: {},
_parent: null,
_name: '<root>',
_zoneDelegate: [Object] },
runCount: 0,
_zoneDelegates: null,
_state: 'notScheduled',
type: 'microTask',
source: 'Promise.then',
data: undefined,
scheduleFn: undefined,
cancelFn: null,
callback: [Function],
invoke: [Function] } } Error: Chunk app/app.module does not have associated output files
....
Pure installation and run "watch" get me console errors (when revert angular-ssr to 0.1.18 all working fine):
ERROR in ./~/@angular/cli/models/webpack-configs/production.js
Module not found: Error: Can't resolve '@angular/service-worker/build/webpack' in '/Users/test/www/node_modules/@angular/cli/models/webpack-configs'
@ ./~/@angular/cli/models/webpack-configs/production.js 57:43-91
@ ./~/@angular/cli/models/webpack-configs/index.js
@ ./~/@angular/cli/models/webpack-config.js
@ ./~/angular-ssr/build/application/compiler/webpack/config/cli.js
@ ./~/angular-ssr/build/application/compiler/webpack/config/index.js
@ ./~/angular-ssr/build/application/compiler/factory.js
@ ./~/angular-ssr/build/application/compiler/index.js
@ ./~/angular-ssr/build/application/index.js
@ ./~/angular-ssr/build/index.js
@ ./server/index.ts
ERROR in ./~/fsevents/~/node-pre-gyp/lib/info.js
Module not found: Error: Can't resolve 'aws-sdk' in '/Users/test/www/node_modules/fsevents/node_modules/node-pre-gyp/lib'
@ ./~/fsevents/~/node-pre-gyp/lib/info.js 14:14-32
@ ./~/fsevents/~/node-pre-gyp/lib ^\.\/.*$
@ ./~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js
@ ./~/fsevents/fsevents.js
@ ./~/chokidar/lib/fsevents-handler.js
@ ./~/chokidar/index.js
@ ./~/watchpack/lib/DirectoryWatcher.js
@ ./~/watchpack/lib/watcherManager.js
@ ./~/watchpack/lib/watchpack.js
@ (webpack)/lib/node/NodeWatchFileSystem.js
@ (webpack)/lib ^.*$
@ (webpack)/lib/webpack.js
@ ./~/angular-ssr/build/application/compiler/webpack/compiler.js
@ ./~/angular-ssr/build/application/compiler/factory.js
@ ./~/angular-ssr/build/application/compiler/index.js
@ ./~/angular-ssr/build/application/index.js
@ ./~/angular-ssr/build/index.js
@ ./server/index.ts
ERROR in ./~/fsevents/~/node-pre-gyp/lib/publish.js
Module not found: Error: Can't resolve 'aws-sdk' in '/Users/test/www/node_modules/fsevents/node_modules/node-pre-gyp/lib'
@ ./~/fsevents/~/node-pre-gyp/lib/publish.js 17:14-32
@ ./~/fsevents/~/node-pre-gyp/lib ^\.\/.*$
@ ./~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js
@ ./~/fsevents/fsevents.js
@ ./~/chokidar/lib/fsevents-handler.js
@ ./~/chokidar/index.js
@ ./~/watchpack/lib/DirectoryWatcher.js
@ ./~/watchpack/lib/watcherManager.js
@ ./~/watchpack/lib/watchpack.js
@ (webpack)/lib/node/NodeWatchFileSystem.js
@ (webpack)/lib ^.*$
@ (webpack)/lib/webpack.js
@ ./~/angular-ssr/build/application/compiler/webpack/compiler.js
@ ./~/angular-ssr/build/application/compiler/factory.js
@ ./~/angular-ssr/build/application/compiler/index.js
@ ./~/angular-ssr/build/application/index.js
@ ./~/angular-ssr/build/index.js
@ ./server/index.ts
ERROR in ./~/fsevents/~/node-pre-gyp/lib/unpublish.js
Module not found: Error: Can't resolve 'aws-sdk' in '/Users/test/www/node_modules/fsevents/node_modules/node-pre-gyp/lib'
@ ./~/fsevents/~/node-pre-gyp/lib/unpublish.js 15:14-32
@ ./~/fsevents/~/node-pre-gyp/lib ^\.\/.*$
@ ./~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js
@ ./~/fsevents/fsevents.js
@ ./~/chokidar/lib/fsevents-handler.js
@ ./~/chokidar/index.js
@ ./~/watchpack/lib/DirectoryWatcher.js
@ ./~/watchpack/lib/watcherManager.js
@ ./~/watchpack/lib/watchpack.js
@ (webpack)/lib/node/NodeWatchFileSystem.js
@ (webpack)/lib ^.*$
@ (webpack)/lib/webpack.js
@ ./~/angular-ssr/build/application/compiler/webpack/compiler.js
@ ./~/angular-ssr/build/application/compiler/factory.js
@ ./~/angular-ssr/build/application/compiler/index.js
@ ./~/angular-ssr/build/application/index.js
@ ./~/angular-ssr/build/index.js
@ ./server/index.ts
ERROR in ./~/fsevents/~/rc/index.js
Module parse failed: /Users/test/www/node_modules/fsevents/node_modules/rc/index.js Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #! /usr/bin/env node
| var cc = require('./lib/utils')
| var join = require('path').join
@ ./~/fsevents/~/node-pre-gyp/lib/info.js 11:13-26
@ ./~/fsevents/~/node-pre-gyp/lib ^\.\/.*$
@ ./~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js
@ ./~/fsevents/fsevents.js
@ ./~/chokidar/lib/fsevents-handler.js
@ ./~/chokidar/index.js
@ ./~/watchpack/lib/DirectoryWatcher.js
@ ./~/watchpack/lib/watcherManager.js
@ ./~/watchpack/lib/watchpack.js
@ (webpack)/lib/node/NodeWatchFileSystem.js
@ (webpack)/lib ^.*$
@ (webpack)/lib/webpack.js
@ ./~/angular-ssr/build/application/compiler/webpack/compiler.js
@ ./~/angular-ssr/build/application/compiler/factory.js
@ ./~/angular-ssr/build/application/compiler/index.js
@ ./~/angular-ssr/build/application/index.js
@ ./~/angular-ssr/build/index.js
@ ./server/index.ts
ERROR in ./~/npm/bin/npm-cli.js
Module parse failed: /Users/test/www/node_modules/npm/bin/npm-cli.js Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #!/usr/bin/env node
| ;(function () { // wrapper in case we're in module_context mode
| // windows: running "npm blah" in this folder will invoke WSH, not node.
@ ./~/npm/lib/npm.js 443:4-32
@ ./~/fsevents/~/node-pre-gyp/lib/util/compile.js
@ ./~/fsevents/~/node-pre-gyp/lib ^\.\/.*$
@ ./~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js
@ ./~/fsevents/fsevents.js
@ ./~/chokidar/lib/fsevents-handler.js
@ ./~/chokidar/index.js
@ ./~/watchpack/lib/DirectoryWatcher.js
@ ./~/watchpack/lib/watcherManager.js
@ ./~/watchpack/lib/watchpack.js
@ (webpack)/lib/node/NodeWatchFileSystem.js
@ (webpack)/lib ^.*$
@ (webpack)/lib/webpack.js
@ ./~/angular-ssr/build/application/compiler/webpack/compiler.js
@ ./~/angular-ssr/build/application/compiler/factory.js
@ ./~/angular-ssr/build/application/compiler/index.js
@ ./~/angular-ssr/build/application/index.js
@ ./~/angular-ssr/build/index.js
@ ./server/index.ts
Thrown in fresh NG4 Application (Angular CLI)
my proceeding:
ng new ng4 --ng4
yarn build
yarn add angular-ssr
./node_modules/.bin/ng-render
[info] Rendering application from source (working path: /home/can/projects/kill/ng4) =
[error] Failed to render application: Error: Cannot find a module matching the name src/app/app.module with a symbol AppModule =
package.json
{
"name": "ng4",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@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/forms": ">=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",
"angular-ssr": "0.0.58",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.7.6"
},
"devDependencies": {
"@angular/cli": "1.0.0-rc.4",
"@angular/compiler-cli": ">=4.0.0-beta <5.0.0",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.1.0"
}
}
ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@angular/cli: 1.0.0-rc.4
node: 7.5.0
os: linux x64
@angular/common: 4.0.0-rc.6
@angular/compiler: 4.0.0-rc.6
@angular/core: 4.0.0-rc.6
@angular/forms: 4.0.0-rc.6
@angular/http: 4.0.0-rc.6
@angular/platform-browser: 4.0.0-rc.6
@angular/platform-browser-dynamic: 4.0.0-rc.6
@angular/router: 4.0.0-rc.6
@angular/cli: 1.0.0-rc.4
@angular/compiler-cli: 4.0.0-rc.6
All styles loaded 2 times in style attributes (one from server, another when app is loaded)
Hi! I'm use cli from example dir and it's amazing! Thx!
But Angular Material show warning logs and some components behavior breaks because of html after build does not have a doctype.
In browser : "Current document does not have a doctype. This may cause some Angular Material components not to behave as expected."
May you add to build generator in html document?
Hello,
When I run 'npm run build:client', I get the following errors:
`$ npm run build:client
[email protected] build:client C:\cygwin\tmp\ssr\examples\demand-express
webpack
ts-loader: Using [email protected] and C:\cygwin\tmp\ssr\examples\demand-express\tsconfig.json
Hash: b482a775fce5eccbb399
Version: webpack 2.6.1
Time: 62498ms
Asset Size Chunks Chunk Names
app.js 4.67 MB 0 [emitted] [big] client
app.js.map 5.56 MB 0 [emitted] client
index.html 272 bytes [emitted]
[16] .//@angular/platform-browser/@angular/platform-browser.es5.js 141 kB {0} [built]/@angular/common/@angular/common.es5.js 130 kB {0} [built]
[19] ./
[29] .//@angular/material/@angular/material.es5.js 759 kB {0} [built]/@angular/forms/@angular/forms.es5.js 204 kB {0} [built]
[40] ./
[42] .//@angular/router/@angular/router.es5.js 214 kB {0} [built]/process/browser.js 5.42 kB {0} [built]
[58] ./
[113] ./app/blog/module.ts 1.55 kB {0} [built]
[119] ./app/main.ts 360 bytes {0} [built]
[122] .//@angular/platform-browser-dynamic/@angular/platform-browser-dynamic.es5.js 5.88 kB {0} [built]/hammerjs/hammer.js 73.8 kB {0} [built]
[129] ./
[143] .//reflect-metadata/Reflect.js 48 kB {0} [built]/zone.js/dist/zone.js 96 kB {0} [built]
[398] ./app/blog/index.ts 301 bytes {0} [built]
[404] ./app/root.module.ts 3.33 kB {0} [built] [1 error]
[407] ./
[408] multi ./app/main.ts 28 bytes {0} [built]
+ 394 hidden modules
WARNING in ./~/@angular/core/@angular/core.es5.js
5704:15-36 Critical dependency: the request of a dependency is an expression
WARNING in ./~/@angular/core/@angular/core.es5.js
5720:15-102 Critical dependency: the request of a dependency is an expression
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\node_modules@angular\tsc-wrapped\src\vinyl_file.d.ts
(11,15): error TS2304: Cannot find name 'Buffer'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\node_modules@angular\tsc-wrapped\src\vinyl_file.d.ts
(1,23): error TS2688: Cannot find type definition file for 'node'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\node_modules\angular-ssr\build\transformation\promise.d.ts
(2,68): error TS2503: Cannot find namespace 'NodeJS'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\node_modules\angular-ssr\build\transformation\promise.d.ts
(1,23): error TS2688: Cannot find type definition file for 'node'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\node_modules@types\express-serve-static-core\index.d.ts
(19,23): error TS2307: Cannot find module 'http'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\node_modules@types\express-serve-static-core\index.d.ts
(6,23): error TS2688: Cannot find type definition file for 'node'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\node_modules\rxjs\observable\dom\WebSocketSubject.d.ts
(24,22): error TS2415: Class 'WebSocketSubject' incorrectly extends base class 'AnonymousSubject'.
Types of property 'lift' are incompatible.
Type '(operator: Operator<T, R>) => WebSocketSubject' is not assignable to type '(operator: Operator<T, R>) => Observable'.
Type 'WebSocketSubject' is not assignable to type 'Observable'.
Types of property 'operator' are incompatible.
Type 'Operator<any, R>' is not assignable to type 'Operator<any, T>'.
Type 'R' is not assignable to type 'T'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\node_modules\rxjs\Subject.d.ts
(16,22): error TS2415: Class 'Subject' incorrectly extends base class 'Observable'.
Types of property 'lift' are incompatible.
Type '(operator: Operator<T, R>) => Observable' is not assignable to type '(operator: Operator<T, R>) => Observable'.
Type 'Observable' is not assignable to type 'Observable'.
Type 'T' is not assignable to type 'R'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\server\paths.ts
(3,34): error TS2304: Cannot find name '__dirname'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\server\http.ts
(12,12): error TS2304: Cannot find name 'require'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\server\http.ts
(18,16): error TS2304: Cannot find name 'process'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\ci\test-runner.ts
(22,28): error TS2304: Cannot find name 'process'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\ci\test-runner.ts
(26,11): error TS2304: Cannot find name 'process'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\ci\test-runner.ts
(47,5): error TS2304: Cannot find name 'process'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\ci\test-runner.ts
(52,5): error TS2304: Cannot find name 'process'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\ci\server.ts
(1,21): error TS2307: Cannot find module 'child_process'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\ci\environment.ts
(1,21): error TS2304: Cannot find name 'process'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\ci\environment.ts
(5,24): error TS2304: Cannot find name 'process'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\ci\client.ts
(1,15): error TS2304: Cannot find name 'require'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\ci\client.ts
(3,16): error TS2304: Cannot find name 'require'.
ERROR in ./app/locale/service.ts
(19,5): error TS2322: Type 'ReplaySubject' is not assignable to type 'Observable'.
Types of property 'lift' are incompatible.
Type '(operator: Operator<string, R>) => Observable' is not assignable to type '(operator: Operator<string, R>) => Observable'.
Type 'Observable' is not assignable to type 'Observable'.
Type 'string' is not assignable to type 'R'.
ERROR in ./app/locale/selector.component.ts
(9,13): error TS2304: Cannot find name 'require'.
ERROR in ./app/blog/blog.component.ts
(15,13): error TS2304: Cannot find name 'require'.
ERROR in ./app/blog/blog.component.ts
(16,12): error TS2304: Cannot find name 'require'.
ERROR in ./app/blog/blog.component.ts
(28,5): error TS2322: Type 'Observable<ArrayLike>' is not assignable to type 'Observable<Blog[]>'.
Type 'ArrayLike' is not assignable to type 'Blog[]'.
Property 'find' is missing in type 'ArrayLike'.
ERROR in ./app/blog/blog.component.ts
(36,5): error TS2322: Type 'Observable<ArrayLike>' is not assignable to type 'Observable<Blog[]>'.
ERROR in ./app/root.module.ts
(28,77): error TS2304: Cannot find name 'require'.
ERROR in ./app/root.component.ts
(9,13): error TS2304: Cannot find name 'require'.
ERROR in ./app/root.component.ts
(11,5): error TS2304: Cannot find name 'require'.
ERROR in ./app/root.component.ts
(12,5): error TS2304: Cannot find name 'require'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\tsconfig.json
error TS2688: Cannot find type definition file for 'chalk'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\tsconfig.json
error TS2688: Cannot find type definition file for 'node'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\tsconfig.json
error TS2688: Cannot find type definition file for 'node-fetch'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\tsconfig.json
error TS2688: Cannot find type definition file for 'source-map'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\tsconfig.json
error TS2688: Cannot find type definition file for 'tapable'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\tsconfig.json
error TS2688: Cannot find type definition file for 'uglify-js'.
ERROR in C:\cygwin\tmp\ssr\examples\demand-express\tsconfig.json
error TS2688: Cannot find type definition file for 'webpack'.
Child html-webpack-plugin for "index.html":
[0] ./~/html-webpack-plugin/lib/loader.js!./app/index.html 269 bytes {0} [built]
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build:client"
npm ERR! node v7.3.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build:client: webpack
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build:client script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-ssr-demand-express-example package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-ssr-demand-express-example
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular-ssr-demand-express-example
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\cygwin\tmp\ssr\examples\demand-express\npm-debug.log`
Hey, first of all, thanks a lot for your effort on this much-needed project.
However, I cannot seem to make it work for my simple 5-pages project.
I tried to follow the steps in this example, but I keep getting an exception.
Would you please be kind to see what might be the issue? I'm wondering if it has to do with the fact that the project is using latest @angular/cli.
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.