robertdyball / a2spa Goto Github PK

I get an error saying no data when loading up first time

I noticed this table has no data in it, I suppose this is the one that needs seeding?

Also noticed swagger doesnt work

Cheers

Severity Code Description Project File Line Suppression State
Error Unable to resolve 'OpenIddict.EntityFrameworkCore (>= 1.0.0-beta2-0614)' for '.NETCoreApp,Version=v1.1'.
Error Unable to resolve 'OpenIddict.Mvc (>= 1.0.0-beta2-0614)' for '.NETCoreApp,Version=v1.1'.
Error Unable to resolve 'OpenIddict.Core (>= 1.0.0-beta2-0614)' for '.NETCoreApp,Version=v1.1'.
Error Unable to resolve 'OpenIddict (>= 1.0.0-beta2-0614)' for '.NETCoreApp,Version=v1.1'.
Error TS2307 Build:Cannot find module '@angular/animations/browser'. A2SPA C:\Users\punko\Source\Repos\A2SPA\VS2017\A2SPA\node_modules@angular\platform-browser\animations\src\animation_renderer.d.ts 1
Error TS2307 Build:Cannot find module '@angular/animations/browser'. A2SPA C:\Users\punko\Source\Repos\A2SPA\VS2017\A2SPA\node_modules@angular\platform-browser\animations\src\providers.d.ts 8

I'm working with a cli-generated project for both the ASP.NET Core and Angular parts using Visual Studio Code, so in essence I'm retracing the steps you originally took in your part 1 tutorial but within VSCode instead and with the current versions of ASP.NET Core (2.0.0) and Angular (5.2.2). However, I've consistently ran into the same issue even after trying and testing with older versions to retrace the steps you took in your tutorial.

While I've been successfully able to display ASP.NET Core pages from both the root route (prior to overriding it) and /home/index and the Angular index.html page from the root route (after overriding ASP.NET Core) and /index.html, I cannot get the AppComponent template to display as you do in your tutorial, only the loader text still.

My errors have been pretty consistent despite making a variety of edits to try and diagnose the issue, but my primary error is Unhandled Promise rejection: Unexpected token <. In full, I get:

Unhandled Promise rejection: Unexpected token <                                     zone.js:672 
  Evaluating http://localhost:5000/wwwroot/app
  Loading app ; Zone: <root> ; Task: Promise.then ; Value: Error: Unexpected token <
  Evaluating http://localhost:5000/wwwroot/app
  Loading app
    at eval (<anonymous>)
    at evaluate (evaluate.js:106)
    at instantiate.js:394
    at dynamicExecute (register-loader.js:665)
    at doEvaluate (register-loader.js:612)
    at ensureEvaluate (register-loader.js:520)
    at register-loader.js:133
    at ZoneDelegate.invoke (zone.js:388)
    at Zone.run (zone.js:138)
    at zone.js:858 SyntaxError: Unexpected token <
    at eval (<anonymous>)
    at evaluate (http://localhost:5000/node_modules/systemjs/dist/system.src.js:2818:16)
    at http://localhost:5000/node_modules/systemjs/dist/system.src.js:3621:21
    at dynamicExecute (http://localhost:5000/node_modules/systemjs/dist/system.src.js:1142:26)
    at doEvaluate (http://localhost:5000/node_modules/systemjs/dist/system.src.js:1089:13)
    at ensureEvaluate (http://localhost:5000/node_modules/systemjs/dist/system.src.js:997:13)
    at http://localhost:5000/node_modules/systemjs/dist/system.src.js:610:14
    at ZoneDelegate.invoke (http://localhost:5000/node_modules/zone.js/dist/zone.js:388:26)
    at Zone.run (http://localhost:5000/node_modules/zone.js/dist/zone.js:138:43)
    at http://localhost:5000/node_modules/zone.js/dist/zone.js:858:57

Now, I am aware that ultimately you end up resorting to using ASP.NET Core templates instead for the SPA behavior and Angular integration, but I'm concerned that it may still be important to get this kind of project to work down the line, especially considering that you're still using those SystemJS files despite no longer having an index.html file.

For reference, here are some of the relevent files in my project:

Program.cs:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Logging;

namespace NgCore3
{
    public class Program
    {
        public static void Main(string[] args)
        {
            BuildWebHost(args).Run();
        }

        public static IWebHost BuildWebHost(string[] args) =>
            WebHost.CreateDefaultBuilder(args)
                .UseStartup<Startup>()
                .Build();
    }
}

Startup.cs:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.FileProviders;

namespace NgCore3
{
	public class Startup
	{
		public Startup(IConfiguration configuration)
		{
			Configuration = configuration;
		}

		public IConfiguration Configuration { get; }

		// This method gets called by the runtime. Use this method to add services to the container.
		public void ConfigureServices(IServiceCollection services)
		{
			services.AddMvc();
		}

		// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
		public void Configure(IApplicationBuilder app, IHostingEnvironment env)
		{
			if (env.IsDevelopment())
			{
				app.UseDeveloperExceptionPage();
			}
			else
			{
				app.UseExceptionHandler("/Home/Error");
			}

			app.UseDefaultFiles();
            app.UseStaticFiles();
            app.UseStaticFiles(new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "node_modules")),
                RequestPath = "/node_modules"
            });

			app.UseMvc(routes =>
			{
				routes.MapRoute(
					name: "default",
					template: "{controller=Home}/{action=Index}/{id?}");
				routes.MapSpaFallbackRoute("spa-fallback", new { controller = "home", action = "index" });
			});
		}
	}
}

index.html:

<!doctype html>



<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>NgCore3</title>
		<!-- <base href="/"> -->

		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="icon" type="image/x-icon" href="favicon.ico">

		<script src="node_modules/core-js/client/shim.min.js"></script>
		<script src="node_modules/zone.js/dist/zone.js"></script>
		<script src="node_modules/systemjs/dist/system.src.js"></script>
		<script src="systemjs.config.js"></script>

		<script>
			SystemJS.import( 'app' )
				//.catch( function ( err ) { console.error( err ) } )
				//.then( function ( m ) { console.log( m ) } )
		</script>
	</head>

	<body>
		<app-root> Loading AppComponent content here... </app-root>
	</body>

</html>

systemjs.config.js:

//import { System } from 'systemjs'
//var SystemJS = require( 'systemjs' )


( function ( global ) {
	SystemJS.config( {
		//baseURL: '/',
		//transpiler: 'typescript',
		paths: {
			'root:': 'wwwroot/',
			'npm:': 'node_modules/'
		},
		map: {
			'app': 'root:app',
			'@angular/core': 'npm:@angular/core/',
			'@angular/common': 'npm:@angular/common/',
			'@angular/animations': 'npm:@angular/animations/',
			'@angular/animations/browser': 'npm:@angular/animations/',
			'@angular/platform-browser/animations': 'npm:@angular/platform-browser/',
			'@angular/compiler': 'npm:@angular/compiler/',
			'@angular/platform-browser': 'npm:@angular/platform-browser/',
			'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/',
			'@angular/common/http': 'npm:@angular/common/http/',
			'@angular/http': 'npm:@angular/http/',
			'@angular/router': 'npm:@angular/router/',
			'@angular/forms': 'npm:@angular/forms/',
		},
		packages: {
			app: {
				defaultExtension: 'ts',
				//meta: { './*.js': { loader: 'systemjs-angular-loader.js' } }
			},
			rxjs: {
				defaultExtension: 'js'
			}
		}
	} )
} )( this )

*.csproj:

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>netcoreapp2.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />
    <PackageReference Include="Microsoft.AspNetCore.SpaServices" Version="2.0.2" />
    <PackageReference Include="Microsoft.DotNet.Watcher.Tools" Version="2.0.0" />
  </ItemGroup>
  <ItemGroup>
    <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="2.0.0" />
    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />
  </ItemGroup>
</Project>

package.json:

{
  "name": "ng-core3",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 5000",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "systemjs": "^0.20.19",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.6",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^6.0.96",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.3.0",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "^2.6.2"
  }
}

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
	"declaration": false,
	"diagnostics": true,
    "emitDecoratorMetadata": true,
	"experimentalDecorators": true,
	"module": "commonjs",
	"moduleResolution": "node",
	"outDir": "./wwwroot",
	"removeComments": false,
	"rootDir": "wwwroot",
	"sourceMap": true,
	"suppressImplicitAnyIndexErrors": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

Hopefully that includes everything you might need from me. Let me know if there's anything else you need to take a look at.

Hi Robert,

First of all, your solution here is awesome! Its what I have been looking for.

I have a question please. I have a need to divy out work to multiple developers on a project I am working on. Its a large application. I dont like the idea of building on massive SPA, because there is alot of moving parts (features) Each feature being complex enough to be its own application. The technique of running multiple silo'd SPAs as was done with angular 1.x is good in this case. Essentially I want to take a microservices approach but for the front end. Each team being responsible for an individual area or domain and only that area. Breaking apart the complexity.

I am wondering. its it possible with your current setup, to have multiple Angular 4-5 applications included in source control ( which I would give to different teams ), and have the build of these angular projects, output into the wwwroot folder.? Essentially, Im trying to figure out if this is possible?

My objective is that different teams can work on different features ( which would load into the respective MVC pages ), and keep things logically seperated.

I would have a team responsible for Infrastructure ( which would build the common components - cross cutting concerns of the application ) - which the other teams would consume.

Do you think this kind of setup might be possible?

Kind Regards

Nigel D

Any idea what to look at?

on this line

var result = await _userManager.CreateAsync(user, model.Password);

I'm using your code.

ReferenceError: _userManager is not defined
at eval (eval at (http://localhost:57738/app/register.component.js), :1:1)
at SafeSubscriber.eval [as _error] (http://localhost:57738/app/register.component.js:47:13)
at SafeSubscriber.__tryOrUnsub (http://localhost:57738/node_modules/rxjs/Subscriber.js:223:16)
at SafeSubscriber.error (http://localhost:57738/node_modules/rxjs/Subscriber.js:184:26)
at Subscriber._error (http://localhost:57738/node_modules/rxjs/Subscriber.js:128:26)
at Subscriber.error (http://localhost:57738/node_modules/rxjs/Subscriber.js:102:18)
at XMLHttpRequest.onLoad (http://localhost:57738/node_modules/@angular/http/bundles/http.umd.js:1185:38)
at ZoneDelegate.invokeTask (http://localhost:57738/node_modules/zone.js/dist/zone.js:367:31)
at Object.onInvokeTask (http://localhost:57738/node_modules/@angular/core/bundles/core.umd.js:3971:41)
at ZoneDelegate.invokeTask (http://localhost:57738/node_modules/zone.js/dist/zone.js:366:36)
at Zone.runTask (http://localhost:57738/node_modules/zone.js/dist/zone.js:166:47)
at XMLHttpRequest.ZoneTask.ZoneTask.cancelFn.invoke (http://localhost:57738/node_modules/zone.js/dist/zone.js:420:38)

I am using vs2017. When I opened the solution, there were so many errors, such as missing type node/mocha, etc. I tried a couple of days and finally found how to solve them.
Modify devDependencies section of package.json
"devDependencies": { "tslint": "^5.0.0", "chai": "^3.5.0", "typings": "^2.1.1", "@types/node": "^7.0.21", "@types/mocha": "^2.2.41", "@types/chai": "*" },

So after resolving my previous issue, I've managed to continue onward through the rest of part 1 of the tutorial and begin actually switching over to the .cshtml files ASP.NET Core uses by default as opposed to regular old Angular .html files. However, as I try to build my files before running the application to test it, I run into this error:

Module parse failed: Unexpected token (5:0) You may need an appropriate loader to handle this file type.

It appears that Angular does not like the .cshtml files being referenced as component templates, hence the fit it throws when I try to ng build, dotnet build, or dotnet run. I use the Angular CLI to manage the Angular side of my project so I suspect I may end up running into bundling issues as well right after this, but for the time being, Angular files won't build because my components are trying to use .cshtml files which Angular doesn't appear to be able to parse on its own.

For a full reference of the error I'm getting, take a look at it here:

ERROR in ./Views/Partials/AboutComponent.cshtml
Module parse failed: Unexpected character '@' (5:0)
You may need an appropriate loader to handle this file type.
| 
| 
| @{ ViewData["Title"] = "About"; }
| 
| 
 @ ./wwwroot/app/about/about.component.ts 14:22-78
 @ ./wwwroot/app/app.module.ts
 @ ./wwwroot/main.ts
 @ multi ./wwwroot/main.ts
ERROR in ./Views/Partials/ContactComponent.cshtml
Module parse failed: Unexpected character '@' (5:0)
You may need an appropriate loader to handle this file type.
| 
| 
| @{ ViewData["Title"] = "Contact"; }
| 
| 
 @ ./wwwroot/app/contact/contact.component.ts 14:22-80
 @ ./wwwroot/app/app.module.ts
 @ ./wwwroot/main.ts
 @ multi ./wwwroot/main.ts
ERROR in ./Views/Partials/IndexComponent.cshtml
Module parse failed: Unexpected character '@' (5:0)
You may need an appropriate loader to handle this file type.
| 
| 
| @{ ViewData["Title"] = "Home Page"; }
| 
| 
 @ ./wwwroot/app/index/index.component.ts 14:22-78
 @ ./wwwroot/app/app.module.ts
 @ ./wwwroot/main.ts
 @ multi ./wwwroot/main.ts
ERROR in ./Views/Partials/AppComponent.cshtml
Module parse failed: Unexpected token (5:0)
You may need an appropriate loader to handle this file type.
| 
| 
| <nav class="navbar navbar-inverse navbar-fixed-top">
| 	<div class="container">
| 		<div class="navbar-header" (click)="setTitle( 'Home - NgCore' )">
 @ ./wwwroot/app/app.component.ts 24:22-73
 @ ./wwwroot/app/app.module.ts
 @ ./wwwroot/main.ts
 @ multi ./wwwroot/main.ts

As a brief experiment, I temporarily decoupled the build and run process between Angular and ASP.NET Core I have set up in my csproj file which got dotnet run to work, but as expected, it returned a ton of 404 errors largely referencing .bundle.js files among others.

You can take a look at my project files if you'd like as I have a repo of the project I've been working on. Feel free to clone it and tinker with it if you'd like. The old index.html file is still sitting around in there since I'm hesitant to dump it until I've gotten this app to fully integrate its frameworks.

Thanks again for the help last time! I'm so close to getting this whole thing to work but then I run into these huge errors lol. Looking forward to your feedback on this one.