I am have ASP.Net MVC5 Web application & in need to integrate Angular5 app with it.
Referring to the below link, I am doing the integration.
Integrate Angular 5 with ASP.NET MVC 5
This command can only be run inside of a CLI project
When running the standalone Angular5 app, it runs fine. but when the same component integrating with Razor view, I am getting the below error.
The selector "app-root" did not match any elements
It's been more than a day that I spent on fixing this.
Index.cshtml looks as below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - My ASP.NET Application</title>
<link href="/bundles/styles.bundle.js" rel="stylesheet"/>
<script src="/bundles/inline.bundle.js"></script>
<script src="/bundles/polyfills.bundle.js"></script>
<script src="/bundles/scripts.bundle.js"></script>
<script src="/bundles/vendor.bundle.js"></script>
<script src="/bundles/main.bundle.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="container body-content">
<div class="row">
<app-root></app-root>
</div>
<hr />
<footer>
<p>© 2018 - My ASP.NET Application</p>
</footer>
</div>
</body>
</html>
Thanks.
OMG!!
Two steps fixed this big head breaking issue:-
added <base href="/"> in head section
moved the bundles in the bottom of page i.e., just before the closing body tag
#Styles.Render("~/Content/Styles")
#Scripts.Render("~/Scripts/Bundles")
</body>
Hope this helps!!
Keep the code in Index.cshtml as below. It should work.
<html>
<head>
<base href="/" />
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="~/Scripts/lib/runtime.js"></script>
<script type="text/javascript" src="~/Scripts/lib/polyfills.js"></script>
<script type="text/javascript" src="~/Scripts/lib/vendor.js"></script>
<script type="text/javascript" src="~/Scripts/lib/main.js"></script>
</body>
</html>
I had this problem, but then realised the cause was that I hadn't wrapped my static script references in the #section scripts tag as per the demo, and they were above the app-root tag. The layout needs to write the scripts into the page after the app-root tag. If the tag appears before the references, you'll get that error message.
Related
I have setup Angular 2 with ASP.NET core, using:
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
I followed the standard setup but the App.component.html is duplicating the html and body tags.
When Pressing Control U (to view source) the html looks like:
<html>
<head>
....
</head>
<body>
<app>
<html>
<head>
<style>
...
</style>
</head>
</app>
</body>
</html>
</app>
...
</body>
</html>
redacted
None of my components have html or body tags in them. the only one that has html or body tag is the initial page
My _Layout.cshtml html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - HotSnail</title>
<base href="/" />
<script src="~/content/modules/jquery/jquery-3.2.1.min.js"></script>
<script src="~/content/modules/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
<link href="~/content/modules/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="~/content/modules/animate/animate.css" rel="stylesheet" />
<link href="~/content/global.css" rel="stylesheet" />
</head>
<body>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
My Index.cshtml
<script src="~/dist/vendor.js" asp-append-version="true"></script>
#section scripts {
<script src="~/dist/main-client.js" asp-append-version="true"></script>
}
The above code is what should be served, now the first bit of angular should be the app.component
app.component.html
<ribbon></ribbon>
<div id="content">
<router-outlet></router-outlet>
</div>
ribbon.component.html:
<div id="ribbon">
<span class="ribbon-button-alignment">
<span id="refresh" class="btn btn-ribbon" data-action="resetWidgets" data-title="refresh" rel="tooltip" data-placement="bottom" data-original-title="<i class='text-warning fa fa-warning'></i> Warning! This will reset all your widget settings." data-html="true" data-reset-msg="Would you like to RESET all your saved widgets and clear LocalStorage?"><i class="fa fa-refresh"></i></span>
</span>
<!-- breadcrumb -->
<ol class="breadcrumb"><li>Home</li><li>Outlook</li><li>Inbox</li></ol>
</div>
This is all the components that should be injected on the first page
UPDATE*
So I have done some more research and it seems to be a known bug. As it says here:
https://github.com/aspnet/JavaScriptServices/issues/662
I cant quiet figure out their hacky solution
Here is hacky code that fixes this:
return requestZone.run>(() =>
platform.serializeModule(AppModule)).then(html => { resolve({ html:
html.slice(27, html.length - 14).replace('', '') }); },
reject);
Also in index.cshtml I advice changing app to div because we already
have app tag returned from Universal.
Loading...
I'm not sure where that code would go..
UPDATE
This also happens in the DEFAULT project created when doing
dotnet new angular
Does anyone know who maintains these templates as I'd like to post a bug with the development team
Same problem for angular 5.
I fixed it like in suggestion from last comment on https://github.com/aspnet/JavaScriptServices/issues/662 (last comment by salarcode):
boot.server.ts file change the code to this:
resolve({
html: (() => {
let apphtml = state.renderToString();
apphtml = apphtml.replace('<html><head><style>', '<style>').replace('</head><body><app', '<app').replace('</app></body></html>', '</app>');
return apphtml;
})()});
I feel kinda silly asking this question but I have tried everything I know and even consulted the api docs all to no avail.
My question is how to fix:
Uncaught TypeError: Cannot read property 'v0' of null
What I am doing is compiling a dart based chrome app with dart2js using dart-sdk version 1.10 I have also tried dart-sdk version 1.9 with the same result.
All of my code is located at:
https://github.com/dragonloverlord/Pages
I am building my project in pycharm community edition 4.5 with the dart plugin if that matters.
I have tried using 'build mode=debug' but no different message was given I had the source maps set up as well but nothing changed.
The os that I am building on is linux ubuntu 15.04
I have found the solution to the issue and it's actually very simple!
All you have to do is move the dart scripts to the body of the document like so:
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="utf-8">
<title>Pages</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body id="body">
<div id="menubar">
<button class="float-left" id="add-page" type="button">Add Page</button>
</div>
<div id="main-container">
</div>
<script src="packages/chrome/bootstrap.js" type="text/javascript" defer></script>
<script src="main.dart" type="application/dart"></script>
</body>
</html>
Compared to having them in the head of the document like so:
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="utf-8">
<title>Pages</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
<script src="packages/chrome/bootstrap.js" type="text/javascript" defer></script>
<script src="main.dart" type="application/dart"></script>
</head>
<body id="body">
<div id="menubar">
<button class="float-left" id="add-page" type="button">Add Page</button>
</div>
<div id="main-container">
</div>
</body>
</html>
A very simple fix that is often forgotten!
Also adding defer to the dart script will fix the issue like so:
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="utf-8">
<title>Pages</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
<script src="packages/chrome/bootstrap.js" type="text/javascript" defer></script>
<script src="main.dart" type="application/dart" defer></script>
</head>
<body id="body">
<div id="menubar">
<button class="float-left" id="add-page" type="button">Add Page</button>
</div>
<div id="main-container">
</div>
</body>
</html>
Getting this error $(..).tabs not a function.
here are my imports
<link rel="stylesheet" href="css/jquery-ui-1.10.4.css" type="text/css"></link>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.js"></script>
<script type="text/javascript" src="js/home.js"></script>
Can you help debugging that.
JSP FILE
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login to Web Service Details Tool</title>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript" src="js/home.js"></script>
<link rel="stylesheet" href="css/jquery-ui-1.9.2.custom.css" type="text/css"></link>
</head>
<body>
<div id="tabs">
<ul>
<li>Overview</li>
<li>Web Service Dashboard</li>
<li>Console</li>
</ul>
<div id="tabs1">
<jsp:include page="overview.jsp" />
</div>
<div id="tabs2">
<jsp:include page="dashboard.jsp"/>
</div>
<div id="tabs3">
<jsp:include page="menu.jsp" />
</div>
</div>
<br><br>
This was working until today, i don't know why it stopped working & console is throwing me error tabs is not defined function
The structure would need to look like this:
page.html
-js (folder)
--jquery-2.1.1.js
--jquery-ui-1.10.4.js
The html file would then have the references as you've show above:
<link rel="stylesheet" href="css/jquery-ui-1.10.4.css" type="text/css"></link>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.js"></script>
<script type="text/javascript" src="js/home.js"></script>
You could also use chrome dev tools (F12) to check if the resources have loaded
NOTE: if you're home.js is using any jquery functionality, this file should always be added after the jquery files.
EDIT: based on comment
make sure you're using it like $("#name").tabs(); and not $("#name").tabs;
I had included jquery.js in one of the included jsp page which was causing the issue & the browser was not able to load the jquery files.
I have a strange problem with an app developed using phonegap and jquery mobile:
when the app starts, styles are not applied but if I browse within the app and then go back to the index, I can see styles well applied.
What should I change?
Here is my index.html code:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0">
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
var intervalloRefresh;
var intervalloRisultati;
var iter=0;
// Wait for Cordova to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);
// Cordova is ready to be used!
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
</script>
<script type="text/javascript" src="jquery/jquery-1.5.2.min.js"></script>
<!-- <script type="text/javascript" src="main.js"></script> -->
<script type="text/javascript" src="jquery/jquery.mobile-1.1.1.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
#pulsantiera{width:25%;height:100%;float:left;}
</style>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div id="pulsantiera" data-role="controlgroup" data-type="vertical">
<!-- Allineamento -->
Allinea
Percorsi
Programma
Info
Foto
Chat
Y
A
N
</div>
<div style="width:74%;height:100%;margin-left:26%" >
<h1 id="title">PATH</h1>
<div id="content">
<img src="images/IT_MAPPA.jpg">
</div>
<div id="vote" stle="display:none"></div>
</div>
</div>
</div>
</body>
</html>
Have you tried switching the position of your CSS and JS files?
If parsed from top to bottom:
1) jquery is initialized
2) jquery mobile is initialized
3) then the CSS is loaded
So the CSS needed for the JQM widgets is not there when JQM kicks into gear.
Try switching to:
1) all CSS
2) jquery
3) jquery mobile
Also check the JQM page template. The CSS always goes first.
I am attempting integrate jQuery Mobile into an existing mobile page. I want to use the collapsible element, and form features.
When I include the js file, and load the page, the page is rendered blank. When it is not included it is rendered correctly. I have added data-role="page" and "content" as below:
Looking in Firebug I see the body element has the 'ui-mobile-viewport' class on it and it's visibility is set to hidden; its child elements have display = none.
I am getting this error in the console when debugging (line 5014) of jquery-mobile-1.0.1.js:
$el.prop is not a function
if ( $el.prop("disabled") ) {
Code below:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title><%=PageTitle%></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<link rel="stylesheet" type="text/css" href="<%=CssPath%>/jquery.mobile-1.0.1.css" media="screen" />
<script type="text/javascript" src="<%=JsPathShared%>/jquery.js"></script>
<script type="text/javascript" src="<%=JsPath%>/page.js"></script>
<script type="text/javascript" src="<%=JsPath%>/jquery.mobile-1.0.1.js"></script>
</head>
<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
<div data-role="page" id="page-wrap" >
<header>
<%RenderBanner();%>
</header>
<div data-role="content" class="section-wrap">
<%Render();%>
<footer>
<nav>
<%RenderNavigation();%>
</nav>
<%RenderFooter();%>
</footer>
</div>
</div>
<%=GoogleAnalytics()%>
</body>
</html>
Consider checking out the jQuery Mobile Boilerplate project from Github. It contains a complete jQuery Mobile project along with code snippets you can use to compare your code to a working project.
https://github.com/commadelimited/jQuery-Mobile-Boilerplate