trilonio / aspnetcore-angular-universal Goto Github PK

I think adding signalR ( https://www.asp.net/signalr ) example is better than adding WebSocket example.

So, I think signalR can be added here

Hi, I have cloned this repo and started with VS 2015 with Node.JS.

I think I am not getting the output it supposed to be.

I am getting-

"./vendor/vendor.css" not found

Can anyone please help?

Once setting set ASPNETCORE_ENVIRONMENT=Production in command line, you must run webpack manually (at the moment at least), then you can Launch the [Production] Launch Web option from VSCode to see the Production version. (Note, HMR etc is off in prod mode of course.)

Hi @MarkPieszak ,
I want to add new CSS and JS files in vendor.js and vendor.css

As for example I want to add this - https://www.npmjs.com/package/signalr-no-jquery

As a JS for vendor.js

What do I need to do for that?

Will I need to add the new library here-
https://github.com/MarkPieszak/aspnetcore-angular2-universal/blob/master/webpack.config.vendor.js#L45

Or need to do anything else.

Thanks in advance for helping

I think, CSRF token protection is better than using a plain AJAX request.

It is a config and should be configured with this template, because it should be a default configuration.
More can be found here-

https://timdows.com/projects/preventing-csrf-in-asp-net-core-combined-with-angularjs/

I am requesting you to have a look at this link and let me know if this is a good idea or not :)

The subject of my proposal is this picture (browser block).

For me it was very easy to understand how universal is working except html hydration part. As described in docs Angular Universal does not support full hydration from html. The word "hydration" does not appear in the docs at all. Also preboot's repo readme separates hydration from simple re-rendering which universal uses.

As far as I know for now universal supports only object catching.

I think it would be better to replace word "Hydrate" with another one which suits better for case described above.

What are your thoughts on this?

Exception details

Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware:Error: An unhandled exception has occurred while executing the request

System.Exception: Call to Node module failed with error: reflect-metadata shim is required when using class decorators
at Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance.d__71.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Runtime.CompilerServices.TaskAwaiter1.GetResult()
at Microsoft.AspNetCore.NodeServices.HostingModels.OutOfProcessNodeInstance.d__131.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Runtime.CompilerServices.TaskAwaiter1.GetResult()
at Microsoft.AspNetCore.NodeServices.NodeServicesImpl.d__101.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Runtime.CompilerServices.TaskAwaiter1.GetResult()
at Microsoft.AspNetCore.SpaServices.Prerendering.PrerenderTagHelper.d__33.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperRunner.d__0.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.GetResult()
at AspNetCore._Views_Home_Index_cshtml.d__32.MoveNext() in /Views/Home/Index.cshtml:line 2
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.Razor.RazorView.d__14.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.Razor.RazorView.d__13.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.d__18.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.ViewResult.d__26.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.d__32.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.d__31.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.d__29.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.d__23.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.d__18.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Builder.RouterMiddleware.d__4.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Builder.Extensions.MapMiddleware.d__3.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.GetResult()
at Microsoft.AspNetCore.SpaServices.Webpack.ConditionalProxyMiddleware.d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.d__6.MoveNext()
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request finished in 17177.3487ms 500 text/html; charset=utf-8
Microsoft.AspNetCore.NodeServices:Information: [default] Ok, 5.185 sec.

I think update Angular to it's latest version will be more excited

Hi,

I have a some issues with tslint:

The Log after run lint script:

info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'lint' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prelint', 'lint', 'postlint' ]
5 info lifecycle aspnetcore-angular2-universal-starter@~prelint: aspnetcore-angular2-universal-starter@
6 silly lifecycle aspnetcore-angular2-universal-starter@~prelint: no script for prelint, continuing
7 info lifecycle aspnetcore-angular2-universal-starter@~lint: aspnetcore-angular2-universal-starter@
8 verbose lifecycle aspnetcore-angular2-universal-starter@~lint: unsafe-perm in lifecycle true
9 verbose lifecycle aspnetcore-angular2-universal-starter@~lint: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\PROJECTS\ARTYCO\CRM\Presentation\node_modules.bin;C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\NativeBinaries\x86;C:\Program Files (x86)\Intel\iCLS Client;C:\Program Files\Intel\iCLS Client;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Skype\Phone;C:\Program Files (x86)\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\140\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn\ManagementStudio;C:\NugetCLI;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\130\Tools\Binn;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\Program Files\Microsoft SQL Server\130\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\130\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\110\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\120\DTS\Binn;C:\Program Files\Microsoft SQL Server\120\Tools\Binn;C:\Program Files\Microsoft DNX\Dnvm;C:\Program Files\dotnet;C:\Program Files\Git\cmd;C:\Program Files\nodejs;C:\Users\jgarcia.perez\AppData\Local\Microsoft\WindowsApps;C:\Program Files (x86)\Microsoft VS Code\bin;C:\Users\jgarcia.perez\AppData\Roaming\npm
10 verbose lifecycle aspnetcore-angular2-universal-starter@~lint: CWD: C:\PROJECTS\ARTYCO\CRM\Presentation
11 silly lifecycle aspnetcore-angular2-universal-starter@~lint: Args: [ '/d /s /c', 'npm run tslint "Client//*.ts"' ]
12 silly lifecycle aspnetcore-angular2-universal-starter@~lint: Returned: code: 1 signal: null
13 info lifecycle aspnetcore-angular2-universal-starter@~lint: Failed to exec lint script
14 verbose stack Error: aspnetcore-angular2-universal-starter@ lint: npm run tslint "Client/**/*.ts"
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:279:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:885:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid aspnetcore-angular2-universal-starter@
16 verbose cwd C:\PROJECTS\ARTYCO\CRM\Presentation
17 error Windows_NT 10.0.14393
18 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "lint"
19 error node v7.4.0
20 error npm v4.0.5
21 error code ELIFECYCLE
22 error aspnetcore-angular2-universal-starter@ lint: npm run tslint "Client/**/*.ts"
22 error Exit status 1
23 error Failed at the aspnetcore-angular2-universal-starter@ lint script 'npm run tslint "Client//.ts"'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the aspnetcore-angular2-universal-starter package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error npm run tslint "Client/**/.ts"
23 error You can get information on how to open an issue for this project with:
23 error npm bugs aspnetcore-angular2-universal-starter
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls aspnetcore-angular2-universal-starter
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Wonder if you could add electron support as well.

Hello,

Get an error:

but It's ok to use webpack build:

The project's npm dependices restoring output:

Environment
npm -v
3.8.2

node -v
v4.4.1

Exception Stack
Microsoft.AspNetCore.Mvc.ViewFeatures.Internal.ViewResultExecutor:Information: Executing ViewResult, running view at path /Views/Home/Index.cshtml.
'dotnet.exe' (CoreCLR: clrhost): Loaded 'C:\Users\darkl.nuget\packages\Microsoft.AspNetCore.WebUtilities\1.0.0\lib\netstandard1.3\Microsoft.AspNetCore.WebUtilities.dll'. Loading disabled by Include/Exclude setting.
Microsoft.Extensions.DependencyInjection.DataProtectionServices:Information: User profile is available. Using 'C:\Users\darkl\AppData\Local\ASP.NET\DataProtection-Keys' as key repository and Windows DPAPI to encrypt keys at rest.
'dotnet.exe' (CoreCLR: clrhost): Loaded 'C:\Program Files\dotnet\shared\Microsoft.NETCore.App\1.0.1\System.Reflection.Emit.dll'. Loading disabled by Include/Exclude setting.
Microsoft.AspNetCore.NodeServices:Information: Node will restart because file changed: F:\git\aspnetcore-angular2-universal\wwwroot\dist\main.js
Microsoft.AspNetCore.NodeServices:Information: webpack built 396559ce6e3756fbe2a7 in 9638ms
Microsoft.AspNetCore.NodeServices:Information: [default] Checking started in a separate process...
Microsoft.AspNetCore.NodeServices:Information: [default] Ok, 5.798 sec.
Exception thrown: 'System.ArgumentNullException' in System.Private.CoreLib.ni.dll
Exception thrown: 'System.Exception' in Microsoft.AspNetCore.NodeServices.dll
Exception thrown: 'System.Exception' in System.Private.CoreLib.ni.dll
Exception thrown: 'System.Exception' in System.Private.CoreLib.ni.dll
Exception thrown: 'System.Exception' in System.Private.CoreLib.ni.dll
Exception thrown: 'System.Exception' in System.Private.CoreLib.ni.dll
Exception thrown: 'System.Exception' in System.Private.CoreLib.ni.dll
Exception thrown: 'System.Exception' in System.Private.CoreLib.ni.dll
Exception thrown: 'System.Exception' in System.Private.CoreLib.ni.dll
Exception thrown: 'System.Exception' in System.Private.CoreLib.ni.dll
Exception thrown: 'System.Exception' in System.Private.CoreLib.ni.dll
Exception thrown: 'System.Exception' in System.Private.CoreLib.ni.dll
Exception thrown: 'System.Exception' in System.Private.CoreLib.ni.dll
Exception thrown: 'System.Exception' in Microsoft.AspNetCore.Mvc.Core.dll
Exception thrown: 'System.Exception' in System.Private.CoreLib.ni.dll
Exception thrown: 'System.Exception' in Microsoft.AspNetCore.Mvc.Core.dll
Exception thrown: 'System.Exception' in System.Private.CoreLib.ni.dll
Exception thrown: 'System.Exception' in System.Private.CoreLib.ni.dll
Exception thrown: 'System.Exception' in System.Private.CoreLib.ni.dll
Exception thrown: 'System.Exception' in System.Private.CoreLib.ni.dll
'dotnet.exe' (CoreCLR: clrhost): Loaded 'C:\Program Files\dotnet\shared\Microsoft.NETCore.App\1.0.1\System.Diagnostics.StackTrace.dll'. Loading disabled by Include/Exclude setting.
'dotnet.exe' (CoreCLR: clrhost): Loaded 'C:\Program Files\dotnet\shared\Microsoft.NETCore.App\1.0.1\System.IO.MemoryMappedFiles.dll'. Loading disabled by Include/Exclude setting.
Exception thrown: 'System.IO.FileNotFoundException' in System.Private.CoreLib.ni.dll
'dotnet.exe' (CoreCLR: clrhost): Loaded 'C:\Program Files\dotnet\shared\Microsoft.NETCore.App\1.0.1\System.IO.UnmanagedMemoryStream.dll'. Loading disabled by Include/Exclude setting.
Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware:Error: An unhandled exception has occurred while executing the request

System.Exception: Call to Node module failed with error: reflect-metadata shim is required when using class decorators
at Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance.d__71.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Runtime.CompilerServices.TaskAwaiter1.GetResult()
at Microsoft.AspNetCore.NodeServices.HostingModels.OutOfProcessNodeInstance.d__131.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Runtime.CompilerServices.TaskAwaiter1.GetResult()
at Microsoft.AspNetCore.NodeServices.NodeServicesImpl.d__101.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Runtime.CompilerServices.TaskAwaiter1.GetResult()
at Microsoft.AspNetCore.SpaServices.Prerendering.PrerenderTagHelper.d__33.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperRunner.d__0.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.GetResult()
at AspNetCore._Views_Home_Index_cshtml.d__32.MoveNext() in /Views/Home/Index.cshtml:line 2
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.Razor.RazorView.d__14.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.Razor.RazorView.d__13.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.d__18.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.ViewResult.d__26.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.d__32.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.d__31.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.d__29.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.d__23.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.d__18.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Builder.RouterMiddleware.d__4.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Builder.Extensions.MapMiddleware.d__3.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.GetResult()
at Microsoft.AspNetCore.SpaServices.Webpack.ConditionalProxyMiddleware.d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.d__6.MoveNext()
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request finished in 17725.885ms 500 text/html; charset=utf-8

Show how we can automatically update it through data within a Route.

Updated Root App Component, subscribing to NavigationEnd event and changing Title through MetaService when route finishes changing.

Currently only works in Browser, as we're not supplying the entire Html document. We'll have to look into fixing this later.

import { Component, ViewEncapsulation, Inject, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute, PRIMARY_OUTLET } from '@angular/router';
import { Title } from '@angular/platform-browser';
import { Subscription } from 'rxjs/Subscription';
import { isBrowser } from 'angular2-universal';
import { Meta } from 'app-shared';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/filter';

@Component({
    selector: 'app-root',
    template: `
        <div class="container-fluid">
            <app-nav-menu></app-nav-menu>
            <router-outlet></router-outlet>
        </div>
    `,
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit, OnDestroy {

    private defaultPageTitle: string = 'Angular Universal & ASP.NET Core Starter';
    private sub: Subscription;
  
    constructor(
        public router: Router,
        public activatedRoute: ActivatedRoute,
        public meta: Meta
    ) {}
    
    ngOnInit() {
        // Change "Title" on every navigationEnd event
        // Titles come from the data.title property on all Routes (see app.routes.ts)
        this.changeTitleOnNavigation();
    }
    
    ngOnDestroy() {
        // Subscription clean-up
        this.sub.unsubscribe();
    }

    private changeTitleOnNavigation () {
        this.sub = this.router.events
            .filter(event => event instanceof NavigationEnd)
            .map(() => this.activatedRoute)
            .map(route => {
                while (route.firstChild) route = route.firstChild;
                return route;
            })
            .filter(route => route.outlet === 'primary')
            .mergeMap(route => route.data)
            .subscribe((event) => {

                // Set Title if available, otherwise leave the default Title
                const title = event['title'] 
                    ? (event['title'] + ' - ' + this.defaultPageTitle)
                    : this.defaultPageTitle;

                // Temporarily only do this in the Browser
                // Until we can get entire Html doc (this is a .NET issue since we never pass the entire Document (only root-app))
                return isBrowser ? this.meta.setTitle(event['title']) : '';
            });
    }

}

• Reorganize & improve file structure.
• Improve file documentation
• Cleanup unused code

Before I think of using this, I would like to know how I can maintain the newest updates from the repository.

Should I fork the repo and merge every time the updates of this repo to my repo or is there an other update mechanism I don't know about? If yes, you could add this to the readme :).

Thanks in advance.

Your server side logic in "bootstrap-server.ts" is rendering a full HTML document inside your Razor template. If your disable Javascript inside your browser and you render the page, you're ending up with something like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>.NET Core + Angular + Universal ! - Angular2 ASPNET Core - Starter</title>
        <base href="/" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
    <app>
        <!DOCTYPE html><html><head><title></title>...
    </app>
   </body>
</html>

Note: Currently unavailable in Universal repo (if that page is initially hit, or refresh is his on it)

Work in progress...

I try to use your template, and change the ng2-bootstrap with the material2 but I always get an error. Can you add the sample for material2

Just cloned to desktop and loaded the solution into VS 2015. My OS is Win10.
Packages restored properly. Solution builds nicely.

But after I try to launch the application, the browser shows this error: "Exception: Call to Node module failed with error: reflect-metadata shim is required when using class decorators".

Any idea?

after the suggested upgrading this is shown:

Angular2Spa.xproj: Failed to migrate XProj project Angular2Spa. 'dotnet migrate --skip-backup -s -p "C:\Dropbox\projects_github\aspnetcore-angular2-universal" -x "C:\Dropbox\projects_github\aspnetcore-angular2-universal\Angular2Spa.xproj"' exited with error code 1.
Angular2Spa.xproj: No executable found matching command "dotnet-migrate"

also the project.json/xproj has to be migrated to the new csproj structure.

what can be the cause if main.js is not available in .\dist?
keep getting 404's on that important file. dotnet ran fine.

I like to add a simple CRUD REST API with Entity framework in this template.

I like to use SQLite as DB because it is portable and no configuration issue is needed to be faced.

Add after doing that, I like to make a PR.

Will you appreciate to add a REST API with entity framework here and merge that?

Thanks

Add bootstrap4-alpha7 CSS to layout.

Fix Ng2-bootstrap issues with latest version:

Now imported like:
import { Ng2BootstrapModule } from 'ng2-bootstrap';
Previously:
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';

Also needs to be called with Ng2BootstrapModule.forRoot() now.
Updates will be in app.common.ts

Hi,

Maybe it's something I'm doing wrong with my tests, but when I run "karma" I get errors with the use of JavaScript ES6 +: let.

Log of some errors:

1. JavaScript ES6 +: let

> [default] Checking started in a separate process...
> Chrome 55.0.2883 (Windows 10 0.0.0) ERROR
>   Uncaught Error: Module parse failed: C:\PROJECTS\ARTYCO\CRM\Presentation\Client\containers\customers\customer-list.component.spec.ts Unexpected token (24:13)
>   You may need an appropriate loader to handle this file type.
>   |    describe('CustomerListComponent:', () => {
>   |       
>   |      let comp: BannerComponent;
>   |      let fixture: ComponentFixture<BannerComponent>;
>   |      let de: DebugElement;
>   at Client/karma-tests.ts:2234
> [default] Ok, 1.105 sec._

2. When mock Http

> [default] Checking started in a separate process...
> Chrome 55.0.2883 (Windows 10 0.0.0) ERROR
>   Uncaught Error: Module parse failed: C:\PROJECTS\ARTYCO\CRM\Presentation\Client\containers\customers\customer-list.component.spec.ts Unexpected token (32:39)
>   You may need an appropriate loader to handle this file type.
>   |               {
>   |                   provide: Http,
>   |                   useFactory: (pBackend: MockBackend, pOptions: BaseRequestOptions) => {
>   |                       return new Http(pBackend, pOptions);
>   |                   },
>   at Client/karma-tests.ts:2234
> [default] Ok, 0.985 sec.

Also, It will help an example of unit test for "rest-test.component" and some edit form.

If the component has depencies with some service, http, rxjs and use mocks, it will be perfect.

Regards!

Currently we have NgRx Store on the Server, but we need to pass these easily to the client, then initialize the Store with those values. This way if someone uses the Store to handle a lot of their application they can transfer cache/state here instead.

This is another option as opposed to HttpCacheService.

(Could be connected with ngrx/store#294)

HttpCacheService needs some kind of auto-cleaner, so that even after a cached response is held between the server & client, it gets removed later, since on route changes we might need fresh data (not the old cached one).

Added in commit 0e06dbc

I think adding WebRTC example will be helpful for enriching this template.

I am working on adding WebRTC ( https://webrtc.org/ ) to this library.

If you agree to add webRTC to this library, I proudly like to contribute here :)

Example implementation to add:

export class BrowserStorage implements StorageService {
}

export class ServerStorage implements StorageService {
}

Then you want your abstraction Class.

export class StorageService {
    getItem (key:string) {}
    setItem (key:string, val: any) => {}
}

Hi there,

I get the exception below when I try running the application (VS2015 update 3). Tried importing es6-shim package, but the error persists.

System.Exception: Call to Node module failed with error: reflect-metadata shim is required when using class decorators at Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance.<InvokeExportAsync>d__7 1.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at Microsoft.AspNetCore.NodeServices.HostingModels.OutOfProcessNodeInstance.<InvokeExportAsync>d__13 1.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at Microsoft.AspNetCore.NodeServices.NodeServicesImpl.<InvokeExportWithPossibleRetryAsync>d__10 1.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at Microsoft.AspNetCore.SpaServices.Prerendering.PrerenderTagHelper.<ProcessAsync>d__33.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperRunner.<RunAsync>d__0.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Runtime.CompilerServices.TaskAwaiter.GetResult() at AspNetCore._Views_Home_Index_cshtml.<ExecuteAsync>d__32.MoveNext() in /Views/Home/Index.cshtml:line 2 --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at Microsoft.AspNetCore.Mvc.Razor.RazorView.<RenderPageAsync>d__14.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at Microsoft.AspNetCore.Mvc.Razor.RazorView.<RenderAsync>d__13.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.<ExecuteAsync>d__18.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at Microsoft.AspNetCore.Mvc.ViewResult.<ExecuteResultAsync>d__26.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.<InvokeResultAsync>d__30.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.<InvokeNextResultFilterAsync>d__28.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.Rethrow(ResultExecutedContext context) at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted) at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.<InvokeNextResourceFilter>d__22.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.Rethrow(ResourceExecutedContext context) at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted) at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.<InvokeAsync>d__20.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at Microsoft.AspNetCore.Builder.RouterMiddleware.<Invoke>d__4.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at Microsoft.AspNetCore.SpaServices.Webpack.ConditionalProxyMiddleware.<Invoke>d__5.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at Microsoft.AspNetCore.SpaServices.Webpack.ConditionalProxyMiddleware.<Invoke>d__5.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.<Invoke>d__7.MoveNext()

Hi,

I have some problems executing the comand npm “karma start”:

karma start

npm : keywords if/then/else require v5 option

_[33m10 01 2017 18:11:06.625:WARN [karma]: _[39mNo captured browser, open http://localhost:9876/
_[32m10 01 2017 18:11:06.634:INFO [karma]: _[39mKarma v1.3.0 server started at http://localhost:9876/
_[32m10 01 2017 18:11:35.871:INFO [Chrome 55.0.2883 (Windows 10 0.0.0)]: _[39mConnected on socket /#-kYKd2-8muD341jcAAAA with id manual-7585

Chrome 55.0.2883 (Windows 10 0.0.0) ERROR
You need to include some adapter that implements __karma__.start method!

Hi,

Can you please add a sample on loading ASP.NET View as template, with server rendering feature

IE: localStorage or sessionStorage for example

Hi,

I added the "angular2-tree-component" component via npm and got the error "TS2688: Cannot find type definition file for 'core-js'.

After installing "@types\core-js" I got "TS2300: Duplicate identifier 'PropertyKey'" (lib.es2015.core.d.ts).

Has anyone an idea how I can fix that problem?

SourceMapDevToolPlugin

On hold for a while.

C# debugging works out of the box, but Webpack TS sourcemaps can't be integrated with vscode-chrome-debugging just yet in this fashion (unless we had a straight up Node server).

Issue with VStudio, port setup not wiring up.
Add better Redux/Eventing example on server side.

Awaiting necessary fixes from Angular Core.
TBD