robertdyball / a2spa Goto Github PK
View Code? Open in Web Editor NEWSPA with ASP.NetCore 2 + Angular 4 + Bootstrap 4+ OpenIdDict
Home Page: https://www.codeproject.com/Articles/1148767/SPA-using-ASP-Net-Core-plus-Angular-part
SPA with ASP.NetCore 2 + Angular 4 + Bootstrap 4+ OpenIdDict
Home Page: https://www.codeproject.com/Articles/1148767/SPA-using-ASP-Net-Core-plus-Angular-part
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.
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 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": "*" },
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'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.
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.