How do I find errors in an Angular 6 template? - asp.net-mvc

I've created an ASP.NET MVC Core 2 application with an Angular 6 front-end. When it works, it works, but when I make an error in some template code, for instance creating an empty span in app.component:
<span />
Everything will compile and Angular will run, but it will remain stuck on the basic "loading" page defined in index.html. There's no error anywhere in the browser's developer tools, and none in Visual Studio's various output windows. As soon as I fix the offending tag:
<span></span>
and save the document, the page reloads and everything works.
Where are errors like these reported so that I can find them?

Try running the ng build --prod command this will give you a more exact location of where errors are.

Related

Vaadin / load reactjs build

We develop a reactjs application which works fine, but one of our customer wants to load this application inside their vaadin environment.
I thought sending them the reactjs build will be enough but for some reason they cannot load it : they use vaadin 14 and try to load the build script via #JsModule annotation and put a vaadin div component with the correct id (in order for reactjs to bootstrap it) but they say they hava this error :
Uncaught Error: Minified React error #200; visit
https://reactjs.org/docs/error-decoder.html?invariant=200 for the full
message or use the non-minified dev environment for full errors and
additional helpful warnings
I dont know what's is going on here.
Thanks
If you follow that link, you'll see that the full error message is:
Target container is not a DOM element.
It seems likely that when the script ran, the target Div did not exist yet. Using #JsModule means that the Vaadin application will include that module into its Javascript build, and run it as soon as the Vaadin application bootstraps in the browser. At that point in time there isn't anything related to the Vaadin application in the DOM yet.
One thing you could try is to change your script to expose a function (for example using a window global) to render the React application into the Div, rather than have the script render the React application immediately when the script runs. On the Vaadin side, your customer could then call that function as soon as the target Div has been added to the DOM, for example using executeJs in the components onAttach method.

Unable to debug JS file in developer tools

I have an ASP.NET MVC application developed using knockout js and webpack.
When I run the application, then open developer tools and search for any js file, it is not showing.
When I make changes in HTML, that change is shown in the UI.
When I make changes in typescript, that change is NOT shown and throws an error.
I tried setting breakpoints and none are hit. I figured that my local ts/js files are not running and I am unable to figure where web pack is running these files.
Any pointers to how I can run my local js files?

Nested application ignores bundles

I'm trying to run my ASP.NET MVC 5.2.3.0 application as nested application so that I can access it as a subfolder, like http://example.com/my-application.
I've added it to an existing application by choosing Add Application a chosen separate application pool.
When I run my-application on its own URL it works fine however when I try to run it as http://example.com/my-application it refuses to render bundles, neither style nor js.
What I have tried so far:
I have tried to enable and disable bundling and minification. When it's disabled Styles.Render adds nothing to markup. When it's enabled invalid link to bundle is added to markup, for example <link href="/calc/bundles/styles/mainlayout?v=" rel="stylesheet"/> and the link returns empty document.
I have tried to put my-application to empty website to ensure no side effects inherited. No difference here.
I have tried to put brand new application side by side with my-application and bundling worked fine there so it must be something wrong with my application and I can not find what exactly.
I have tried to ILSpy System.Web.Optimization code but couldn't find any help there.
I have failed to debug System.Web.Optimization as my VS just hung.
I didn't find any conflicting routes with my-application address.
If anyone faced the same issue then any advice appreciated.
Thanks.
UPDATE: I found what causes the issue. We intensively use T4MVC and we use it for bundles configuration as well. So our bundle declaration looks something like:
bundles.Add(new ScriptBundle("~/bundles/scripts")
.Include("~" + Links.Scripts.Script1_js, "~" + Links.Scripts.Script2_js));
And "~" + Links.Scripts.Script1_js for nested application gives me ~/my-application/scripts/script1.js while VirtualPathProvider from inside Include method expects it to be ~/scripts/script1.js.
So the question transforms into: does anyone know how to prevent T4MVC from adding nested application path onto static files links so that application isn't aware of being nested? I bet #David Ebbo knows how to achieve this :)

Razor views not generating html after deploying Umbraco 7.2 in IIS 7

I am new to Umbraco, so I started creating a site to play a bit with it. While I had my site running on IIS express (either from VS or WebMatrix) everything worked fine. After deploying the site to IIS 7, the razor views of the front end are display in plain text, meaning that I actually see Razor syntax in the browser. Umbraco back office is working perfect though, except when I hit preview, in that case I get the plain Razor syntax again. I then try to deploy a simple new MVC project to IIS and the Razor engine worked just fine, so I guess is not a problem in IIS but in Umbraco configuration. Is there any configuration tweak I need to take care in Umbraco configuration to solve this problem? Thanks in advance for the help.
I also tried to deploy it in the IIS of my local development machine (the same in which it runs OK in IIS-express) which has the right framework and everything and I got the same cshtml display in the browser.
After struggling a bit more with the problem I found the issue causing this behavior. After installing the starter kit a lot of files are generated in the folder and subfolders of the solution. In order to publish the solution to generate the contents of your website the VS project needs to have all these files included as project files. I found out that some views were excluded of the project and thus not being generated when publishing. I included the missing views and double check that all important files were part of the project and problem solved.

My first DART polymer project: No execution / testing possible, nothing works?

I have created a polymer project. It generates a default app which reverses text entered into an input field. This works.
Then I tried to add a core-header-panel. I copied the code from the description page into the index.html file of the project:
<body unresolved fullbleed layout vertical>
<core-header-panel flex>
<core-toolbar>
<div>Hello World!</div>
</core-toolbar>
</core-header-panel>
<main-app>
</main-app>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
This gets me 3 warnings on the displayed web page. Two say:
Custom element found in document body without an "unresolved"
attribute on it or one of its parents.
I have inserted an unresolved attribute after the body tag. I do not understand why the error does not go away.
The third messages is:
custom element with name core-toolbar not found
I added a line
<link rel="import" href="packages/core_elements/core_toolbar.html">
but the error message did not go away.
Finally I outcommented the complete core-header-panel and nevertheless the page in Dartium still shows "Hello world" and all the error messages.
I'm lost here. The DART editor / Dartium "development system" seems to be useless. I can not even test the simplest things. What am I doing wrong? How do you work with this system???
BTW: I get exactly the same behaviour when I try to run this as Javascript in Firefox browser ...
You need to add an import for core-toolbar and core-header-panel.
You also need to add a dependency to the pubspec.yaml file.
dependencies:
core_elements: any
Otherwise I can't see anything wrong.
If this doesn't work, please try to run pub cache repair in your project directory (from command line).
If this still doesn't work please add the complete content of your pubspec.yaml, pubspec.lock and index.html to your question.
Meanwhile I found a solution by accident. The problem was that whatever I changed in the sources the DART editor always transfered the initial errornous file to the browser, or at least this is what it looks like.
The problem disappeared when I switched to another polymer project which I had used as an initial tutorial project, run that one and went back to the above project. Suddenly the browsers were able to display the changed files.
Looks for me like an ugly bug in the DART editor.

Resources