Aurelia-CLI issue - aurelia

I'm trying to use the aurelia cli to create a new project
Here are the options I'm using.
Project Name: Test
Default Setup: 3 (custom)
Module Loader: 3 (webPack)
Plaform: 2 (ASP.NET Core)
Transpiler: Babel
Template setup: Default
CSS Processor: 1 (None default)
Test Runner: 2 (Karma)
Integration Testing: 1 (protractor)
Code Editor: 1 (VS Code)
When its complete since I told it I was targeting ASP.NET Core I thought I would be able to do a dotnet run.
I can and it says the app is running and listening on port 5000.
If I navigate to http://localhost:5000 a page comes up and just shows loading...
If you look at the console you see that it cant find app.js, vendor.css, vendor.js
If you go looking for these files, they are nowhere to be found. Its looking for them in the dist folder but they do not exist.
Is this a bug in the cli using these options?

Related

Missing config.json stencil CLI

I'm trying to do some work for a client, but cannot get their bigcommerce site running locally. I have installed stencil CLI (v3.1.1) and downloaded the theme from the bigcommerce dashboard (all files). from the root of the theme i ran "stencil init", then "npm i" and "stencil start".
when i run stencil start, it throws an error saying there's no config.json file.
this is the error i get
How do i generate the config.json file?
The only config file I see is config.stencil.json.
I have also tried running "stencil pull" in hopes that it would pull the config, but it throws another error: "not ok -- Error: Could not fetch active theme details for channel 1: Request failed with status code 404"
Stencil-cli version:
3.1.1
Node version:
12
NPM version:
6.14.15
OS:
mac big sur
Stencil 3.1.1 has been deprecated for some time now. I believe the current version is 3.8. As of 4 months ago, anything below 3.5 will not run (https://developer.bigcommerce.com/changelog#publications/required-stencil-cli-version-set-to-3-5-0).
If you don't have a config.json file in your project, you will need to get the one from the client's store. Try downloading their theme again. It should come through.
Edit: It is possibly the case that you need a new API token. Try making a new one for your store. Make sure the following scopes are set:
Themes: Modify
Settings & Information: Modify
Sites & Routes: Read-only (or Modify)
Documentation for creating a new API account: https://support.bigcommerce.com/s/article/Store-API-Accounts#creating

Spartacus API calls return 504 (Gateway Timeout) when running using Server Side Rendering (SSR)

I'm trying to get Spartacus to work with SSR. When opening the default URL, http://localhost:4200, the storefront renders, as expected, but only after I clear the site data first. When I attempt to browse the storefront, API calls fail with a 504 (Gateway timeout). Chrome dev tools indicates the error is happening in the service worker. At this point, I'm wondering if I configured Spartacus incorrectly. When running Spartacus using yarn start rather than yarn serve:ssr, I can load the home page and browse the site normally.
OS: Ubuntu 16.04.6 LTS
Chrome Version: 73.0.3683.75
Node version: 11.15.0
Angular CLI version: 8.3.8
Yarn version: 1.19.1
ng new ssr-spartacus-app --style=scss
cd ssr-spartacus-app
ng add #spartacus/schematics --baseUrl https://localhost:9002 --baseSite cmssiteuid --pwa --ssr
rm src/app/app.component.html
echo "<cx-storefront>Loading...</cx-storefront>" > src/app/app.component.html
yarn build:ssr
yarn serve:ssr
Before running yarn build:ssr, I made following change to the app.module.ts file:
Before
context: {
baseSite: ['cmssiteuid'],
},
After
authentication: {
client_id: 'mobile_android',
client_secret: 'secret',
},
context: {
urlParameters: ['baseSite', 'language', 'currency'],
baseSite: ['cmssiteuid'],
},
I also set anonymousConsents to false. With this set to true, I was getting a lot of CORs errors.
If been scratching my head with this for a little while now and I'm hoping someone with more knowledge of Spartacus' inner workings can shed some light on why Spartacus is behaving this way with SSR.
I'm not sure that I can give you some certain recipe to fix the issue, obviously I need more details and logs relates to your problem, but still, based on my experience I can share with you some tips and tricks about how we should play with such issues (which relates to SSR).
Some set of theory which relates to SSR
https://angular.io/guide/universal (you can feel free to use Angular official documentation as a primary source, cuz Spartacus uses Angular OOTB features to make it works)
https://sap.github.io/spartacus-docs/server-side-rendering-in-spartacus/
https://enable.cx.sap.com/tag/tagid/spartacus (SSR related videos)
Practical approaches for debugging SSR
You should observe and analyze console output during starting your application in Node.js
You can use SSR configuration from example Storefront application (https://github.com/SAP/spartacus/tree/develop/projects/storefrontapp) like a starting point, cuz OOTB SSR works like a charm
Something from Spartacus team https://sap.github.io/spartacus-docs/how-to-debug-server-side-rendered-storefront/
Common set of theory to ensure that application has been configured correctly
SAP Commerce Cloud configuration for working with Spartacus https://sap.github.io/spartacus-docs/installing-sap-commerce-cloud/
Take a look on the guide https://sap.github.io/spartacus-docs/building-the-spartacus-storefront-from-libraries/ to ensure, that your frontend application has correct configuration
Double check your configuration which B2cStorefrontModule is using (here you can find an example project here https://github.com/SAP/spartacus/tree/develop/projects/storefrontapp)
Take a look on Network and Console browser tabs and try to resolve all errors
did you turn off PWA?
Turn PWA off.
As soon as Spartacus is installed in PWA mode, a service worker is installed, and it serves a cached version of index.html, along with the js files. This results in SSR being completely skipped. The following steps describe how to turn off PWA:
Check that there are no service workers registered in your app. If you do find any service workers, remove them.
Turn PWA off in your app module configuration, as follows:
StorefrontModule.withConfig({
backend: {
occ: {
baseUrl: 'https://[your_enpdoint],
},
},
pwa: {
enabled: false,
},
};
Rebuild your local Spartacus libraries by running the following command:
yarn build:core:lib
Build your local Spartacus shell app by running the following command:
yarn build --prod
Build the SSR version of your shell app by running the following command:
yarn build:ssr
Start Spartacus with the SSR server by running the following command:
yarn serve:ssr
If you are getting 504 after hitting the API service you need to check your API logs.
IF you have err log:
{"instant":{"epochSecond":1644915623,"nanoOfSecond":929833000},"thread":"hybrisHTTP1","level":"ERROR","loggerName":"org.springframework.web.servlet.DispatcherServlet","message":"Context initialization failed","thrown":{"commonElementCount":0,"localizedMessage":"Error creating bean with name 'cartEntriesController': Injection of resource dependencies failed; nested exception is org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'defaultStockValidator' defined in ServletContext resource [/WEB-INF/config/v2/validators-v2-spring.xml]: Unsatisfied dependency expressed through constructor parameter 0: Could not convert argument value of type [de.hybris.platform.ycommercewebservices.stock.impl.DefaultCommerceStockFacade] to required type [de.hybris.platform.commercewebservices.core.stock.CommerceStockFacade]: Failed to convert value of type 'de.hybris.platform.ycommercewebservices.stock.impl.DefaultCommerceStockFacade' to required type 'de.hybris.platform.commercewebservices.core.stock.CommerceStockFacade'; nested exception is java.lang.IllegalStateException: Cannot convert value of type 'de.hybris.platform.ycommercewebservices.stock.impl.DefaultCommerceStockFacade' to required type 'de.hybris.platform.commercewebservices.core.stock.CommerceStockFacade': no matching editors or conversion strategy found","message":"Error creating bean with name 'cartEntriesController': Injection of resource dependencies failed; nested exception is org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'defaultStockValidator'
You can try resolution:
Remove template extension ycommercewebservices extension from manifest.json, rebuild and redeploy with "Migrate Data" mode.

Webpack errors on Publish using Angular 4.2.5

I created an app with the SPA Templates. The Angular app is using the primeng components for the UI. In order to get the bootstrap, fontawesome and primeng themes running I ran webpack --config webpack.config.vendor.js so that I could add the css files to the nonTreeShakableModules array. Everything seems to work until I publish.
When I attempt to publish I get the following error
ERROR in ./$$_gendir/~/primeng/components/menu/menu.ngfactory.ts
Module parse failed: .\$$_gendir\node_modules\primeng\components\menu\menu.ngfactory.ts Unexpected token (14:32)
You may need an appropriate loader to handle this file type.
| import * as i3 from '#angular/router';
| import * as i4 from 'primeng/components/dom/domhandler';
| export const MenuModuleNgFactory:i0.NgModuleFactory<i1.MenuModule> = i0.?cmf(i1.MenuModule,
| ([] as any[]),(_l:any) => {
| return i0.?mod([i0.?mpd(512,i0.ComponentFactoryResolver,i0.?CodegenComponentFactoryResolver,
# ./$$_gendir/ClientApp/app/components/locations/locations.component.ngfactory.ts 9:0-99
# ./$$_gendir/ClientApp/app/components/list/list.component.ngfactory.ts
# ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts
# ./ClientApp/boot.server.ts
I have this error for every primeng component that is used.
You might be experiencing this because The ASP.NET core 2.0 / Angular Template uses different typescript loaders for development and for production : awesome-typescript-loader and angular2-template-loader in development, and #ngtools/webpack in production.
From my experience, #ngtools/webpack doesn't do well with loading some third party angular components. You could try using awesome-typescript-loader and angular2-template-loader for both development and production.

How to create an aurelia 1.0 app that can be deployed at any root location

I am trying to work out how to deploy an aurelia app, it runs in development with au run. but I need to deploy it into a path which is not the root of the web-site. ie at '/site' not '/'
when I deploy I get an exception from the router: ERROR [app-router] Error: Route not found: /site/
I think it may be that I need to specify a baseURL in one or more places?
but can't see how I can:
make it work in the development environment at /
make it work in the deployed environment at /[any-site-path]
avoid building in knowledge of '/[any-site-path]' to my development environment or bundles, as the path wont be known until someone comes to deploy the code?
i found this question but that seems to apply to an out of date version of the code.
I am using Aurelia 1.0 and building using the au-cli
Any pointers would be useful.
Looks like this is a bug that has been fixed in a more recent version.
I have just gone through and applied the latest versions of:
"aurelia-bootstrapper": "^1.0.0" -> "^2.1.1"
"aurelia-cli": "^0.24.0" -> "^0.26.1"
"aurelia-tools": "^0.2.2" -> "^1.0.0"
And i can now deploy my application to a site sub folder without specifying any url content in the code or html files!
So I can satisfy all 3 of the criteria in my question.
Note the aurelia-cli update (0.25.0) requires a change to the main.(ts/js) as mentioned in the release notes.

running dart project says dart:html is not available for the standalone vm

I used Git to pull a project
I then start IntelliJ, and say: Open Project.
The project itself looks like it has 4 modules, Lab1, Lab2, Solution2, Solution2
I open the full project. In Lab1, i want to run to see how my web page looks, but when i say: Run main.dart the error kicked back is:
C:\code\dart-sdk\bin\dart.exe --ignore-unrecognized-flags --checked --enable-vm-service:51293 --trace_service_pause_events C:\code\workspace\tw_remoting_training\codelab_01\web\main.dart
Observatory listening on http://127.0.0.1:51293
The built-in library 'dart:html' is not available on the stand-alone VM.
'package:remoting_training/remoting_printer.dart': error: line 20 pos 1: library handler failed
import 'dart:html';
^
Process finished with exit code 254
Im not sure what is going on here though. As a secondary option, i will also try to Right-Click on index.html and click: Open with > Dartium but that shows a blank page. It shouldve done 4 async calls which printed strings to the screen.
Is there something I am missing? Is it not running because of it being a module in a project?
If your Dart script imports dart:html or a library that imports dart:html you can run that script only from the Dartium browser (by adding a script tag to HTML that points the that Dart script, or if you run it through pub build or dart2js in any browser), but it can't be run from the console.
With dart:io it's exactly the opposite, it can't be run in the browser.