Jasmine specs fail on new angular project using --auth Individual

[benday]

Describe the bug

After creating a new project using "dotnet new angular", there are jasmine spec failures.

To Reproduce

Run attached script (create-problem.bat). This script creates a new solution with a webapi/angular project, builds the solution, and then runs 'ng test'

create-problem.bat.txt

You should see a handful of spec failures in LoginMenuComponent, AuthorizeGuard, LogoutComponent. (see spec-failure-details.txt)

spec-failure-details.txt

AuthorizeGuard > should ...
NullInjectorError: StaticInjectorError(DynamicTestModule)[AuthorizeGuard -> Router]:
StaticInjectorError(Platform: core)[AuthorizeGuard -> Router]:
NullInjectorError: No provider for Router!
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'AuthorizeGuard', Function ] })
at
at NullInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:855:1)
at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17514:1)
at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17440:1)
at StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17266:1)
at resolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17514:1)
at tryResolveToken (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17440:1)
at StaticInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:17266:1)
at resolveNgModuleDep (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:30393:1)
at createClass (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:30463:1)
at createProviderInstance (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:30426:1)
LogoutComponent > should create
NullInjectorError: StaticInjectorError(DynamicTestModule)[LogoutComponent -> ActivatedRoute]:
StaticInjectorError(Platform: core)[LogoutComponent -> ActivatedRoute]:
NullInjectorError: No provider for ActivatedRoute!
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'LogoutComponent', Function ], ngDebugContext: DebugContext({ view: Object({ def: Object({ factory: Function, nodeFlags: 33669121, rootNodeFlags: 33554433, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 33554433, childFlags: 114688, directChildFlags: 114688, childMatchedQueries: 0, matchedQueries: Object({ }), matchedQueryIds: 0, references: Object({ }), ngContentIndex: null, childCount: 1, bindings: [ ], bindingFlags: 0, outputs: [ ], element: Object({ ns: '', name: 'app-logout', attrs: [ ], template: null, componentProvider: Object({ nodeIndex: 1, parent: , renderParent: , bindingIndex: 0, outputIndex: 0, checkIndex: 1, flags: 114688, childFlags: 0, directChildFlags: 0, childMatchedQueries: 0, matchedQueries: Object, matchedQueryIds: 0, references: Object, ngContentIndex ...
at
at NullInjector.get (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:855:1)
at resolveToken (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:17514:1)
at tryResolveToken (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:17440:1)
at StaticInjector.get (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:17266:1)
at resolveToken (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:17514:1)
at tryResolveToken (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:17440:1)
at StaticInjector.get (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:17266:1)
at resolveNgModuleDep (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:30393:1)
at NgModuleRef.get (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:31578:1)
at resolveDep (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:32143:1)
Expected undefined to be truthy.
Error: Expected undefined to be truthy.
at
at UserContext. (http://localhost:9876/karma_webpack/src/api-authorization/logout/logout.component.spec.ts:23:23)
at ZoneDelegate.invoke (http://localhost:9876/karma_webpack/node_modules/zone.js/dist/zone-evergreen.js:359:1)
at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/karma_webpack/node_modules/zone.js/dist/zone-testing.js:308:1)
LoginComponent > should create
NullInjectorError: StaticInjectorError(DynamicTestModule)[LoginComponent -> ActivatedRoute]:
StaticInjectorError(Platform: core)[LoginComponent -> ActivatedRoute]:
NullInjectorError: No provider for ActivatedRoute!
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'LoginComponent', Function ], ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 33669121, rootNodeFlags: 33554433, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 33554433, childFlags: 114688, directChildFlags: 114688, childMatchedQueries: 0, matchedQueries: Object({ }), matchedQueryIds: 0, references: Object({ }), ngContentIndex: null, childCount: 1, bindings: [ ], bindingFlags: 0, outputs: [ ], element: Object({ ns: '', name: 'app-login', attrs: [ ], template: null, componentProvider: Object({ nodeIndex: 1, parent: , renderParent: , bindingIndex: 0, outputIndex: 0, checkIndex: 1, flags: 114688, childFlags: 0, directChildFlags: 0, childMatchedQueries: 0, matchedQueries: Object, matchedQueryIds: 0, references: Object, ngContentIndex: ...
at
at NullInjector.get (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:855:1)
at resolveToken (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:17514:1)
at tryResolveToken (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:17440:1)
at StaticInjector.get (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:17266:1)
at resolveToken (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:17514:1)
at tryResolveToken (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:17440:1)
at StaticInjector.get (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:17266:1)
at resolveNgModuleDep (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:30393:1)
at NgModuleRef_.get (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:31578:1)
at resolveDep (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:32143:1)
Expected undefined to be truthy.
Error: Expected undefined to be truthy.
at
at UserContext. (http://localhost:9876/karma_webpack/src/api-authorization/login/login.component.spec.ts:23:23)
at ZoneDelegate.invoke (http://localhost:9876/karma_webpack/node_modules/zone.js/dist/zone-evergreen.js:359:1)
at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/karma_webpack/node_modules/zone.js/dist/zone-testing.js:308:1)
LoginMenuComponent > should create
Failed: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("*ngIf="isAuthenticated | async">

<a class="nav-link text-dark" [ERROR ->][routerLink]='["/authentication/profile"]' title="Manage">Hello {{ userName | async }}

"): ng:///DynamicTestModule/LoginMenuComponent.html@2:39
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("

<a class="nav-link text-dark" [ERROR ->][routerLink]='["/authentication/logout"]' [state]='{ local: true }' title="Logout">Logout
</"): ng:///DynamicTestModule/LoginMenuComponent.html@5:39
Can't bind to 'state' since it isn't a known property of 'a'. ("class="nav-item">
<a class="nav-link text-dark" [routerLink]='["/authentication/logout"]' [ERROR ->][state]='{ local: true }' title="Logout">Logout

"): ng:///DynamicTestModule/LoginMenuComponent.html@5:81 Can't bind to 'routerLink' since it isn't a known property of 'a'. ("*ngIf="!(isAuthenticated | async)">

][routerLink]='["/authentication/register"]'>Register

"): ng:///DynamicTestModule/LoginMenuComponent.html@10:38 Can't bind to 'routerLink' since it isn't a known property of 'a'. ("

][routerLink]='["/authentication/login"]'>Login

"): ng:///DynamicTestModule/LoginMenuComponent.html@13:38 error properties: Object({ ngSyntaxError: true, ngParseErrors: [ Can't bind to 'routerLink' since it isn't a known property of 'a'. ("*ngIf="isAuthenticated | async">

][routerLink]='["/authentication/profile"]' title="Manage">Hello {{ userName | async }}

"): ng:///DynamicTestModule/LoginMenuComponent.html@2:39, Can't bind to 'routerLink' since it isn't a known property of 'a'. ("

][routerLink]='["/authentication/logout"]' [state]='{ local: true }' title="Logout">Logout ][state]='{ local: true }' title="Logout">Logout

"): ng:///DynamicTestModule/LoginMenuComponent.htm ... ... Error: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. ("*ngIf="isAuthenticated | async">

][routerLink]='["/authentication/profile"]' title="Manage">Hello {{ userName | async }}

"): ng:///DynamicTestModule/LoginMenuComponent.html@2:39 Can't bind to 'routerLink' since it isn't a known property of 'a'. ("

][routerLink]='["/authentication/logout"]' [state]='{ local: true }' title="Logout">Logout ][state]='{ local: true }' title="Logout">Logout

"): ng:///DynamicTestModule/LoginMenuComponent.html@5:81 Can't bind to 'routerLink' since it isn't a known property of 'a'. ("*ngIf="!(isAuthenticated | async)">

][routerLink]='["/authentication/register"]'>Register

"): ng:///DynamicTestModule/LoginMenuComponent.html@10:38 Can't bind to 'routerLink' since it isn't a known property of 'a'. ("

][routerLink]='["/authentication/login"]'>Login

"): ng:///DynamicTestModule/LoginMenuComponent.html@13:38 at syntaxError (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:2175:1) at TemplateParser.parse (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:11388:1) at JitCompiler._parseTemplate (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25961:1) at JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25949:61) at http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25893:1 at at JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25893:1) at http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25813:1 at Object.then (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:2166:27) at JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25811:1) Error: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. ("*ngIf="isAuthenticated | async">

][routerLink]='["/authentication/profile"]' title="Manage">Hello {{ userName | async }}

"): ng:///DynamicTestModule/LoginMenuComponent.html@2:39 Can't bind to 'routerLink' since it isn't a known property of 'a'. ("

][routerLink]='["/authentication/logout"]' [state]='{ local: true }' title="Logout">Logout ][state]='{ local: true }' title="Logout">Logout

"): ng:///DynamicTestModule/LoginMenuComponent.html@5:81 Can't bind to 'routerLink' since it isn't a known property of 'a'. ("*ngIf="!(isAuthenticated | async)">

][routerLink]='["/authentication/register"]'>Register

"): ng:///DynamicTestModule/LoginMenuComponent.html@10:38 Can't bind to 'routerLink' since it isn't a known property of 'a'. ("

][routerLink]='["/authentication/login"]'>Login

"): ng:///DynamicTestModule/LoginMenuComponent.html@13:38 error properties: Object({ ngSyntaxError: true, ngParseErrors: [ Can't bind to 'routerLink' since it isn't a known property of 'a'. ("*ngIf="isAuthenticated | async">

][routerLink]='["/authentication/profile"]' title="Manage">Hello {{ userName | async }}

"): ng:///DynamicTestModule/LoginMenuComponent.html@2:39, Can't bind to 'routerLink' since it isn't a known property of 'a'. ("

][routerLink]='["/authentication/logout"]' [state]='{ local: true }' title="Logout">Logout ][state]='{ local: true }' title="Logout">Logout

"): ng:///DynamicTestModule/LoginMenuComponent.htm ... ... Error: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. ("*ngIf="isAuthenticated | async">

][routerLink]='["/authentication/profile"]' title="Manage">Hello {{ userName | async }}

"): ng:///DynamicTestModule/LoginMenuComponent.html@2:39 Can't bind to 'routerLink' since it isn't a known property of 'a'. ("

][routerLink]='["/authentication/logout"]' [state]='{ local: true }' title="Logout">Logout ][state]='{ local: true }' title="Logout">Logout

"): ng:///DynamicTestModule/LoginMenuComponent.html@5:81 Can't bind to 'routerLink' since it isn't a known property of 'a'. ("*ngIf="!(isAuthenticated | async)">

][routerLink]='["/authentication/register"]'>Register

"): ng:///DynamicTestModule/LoginMenuComponent.html@10:38 Can't bind to 'routerLink' since it isn't a known property of 'a'. ("

][routerLink]='["/authentication/login"]'>Login

"): ng:///DynamicTestModule/LoginMenuComponent.html@13:38 at syntaxError (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:2175:1) at TemplateParser.parse (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:11388:1) at JitCompiler._parseTemplate (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25961:1) at JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25949:61) at http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25893:1 at at JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25893:1) at http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25813:1 at Object.then (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:2166:27) at JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25811:1) Expected undefined to be truthy. Error: Expected undefined to be truthy. at at UserContext. (http://localhost:9876/_karma_webpack_/src/api-authorization/login-menu/login-menu.component.spec.ts:23:23) at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:359:1) at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:308:1)

[benday]

I think that I've got some fixes that make the specs run. I'd be happy to submit a pull request but I'm not sure where I should go.

FYI, here's a github repo that starts with a repro of the problem and then fixes it over a series of commits. https://github.com/benday/dotnet31angularproblems

[javiercn]

@benday thanks for contacting us.

I believe we run ng test as part of our E2E tests. Are you saying this happens with an out of the box template?

If you have some fixed that can be applied to the template and that would fix this issue we probably would accept a pull request for it.

[benday]

@javiercn -- the problem is in the source code that goes into the webapi/angular template. I've been trying to find where that code actually comes from. Can you point me to where that is in GitHub? Thanks.

[javiercn]

@benday https://github.com/dotnet/aspnetcore/tree/master/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp