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;
})()});
Related
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.
I need, from a view-blade, to search a database in order to fetch data and display them in another view-blade when a link is clicked.
I made the following:
In the view-blade who will acting on database:
#foreach($pending as $p)
<tr>
<td>
Click here
</td>
</tr>
#endforeach
the connected 'route' is
Route::get("/getMyForm/{ident}", ['as' => "openMyPage", 'uses' => "BusinessController#seeMyForm"]);
the method on BusinessController has
public function seeMyForm($ident){
$myResult=DB::select(...);
return view('MyViewBlade')->with('myResult', $myResult);
}
the master template (PrincipalView.blade.php) (as was included in the view-blade to display
<!DOCTYPE html>
<html>
<head>
<meta name="csrf_token" content="{{ csrf_token() }}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-datepicker.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="assets/js/jquery-ui/jquery-ui.css"> -->
<script src="assets/js/jquery.js"></script>
<!-- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> -->
<script src="assets/js/bootstrap-datepicker.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="assets/js/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<link rel="stylesheet" href="assets/js/jquery-ui-1.11.4.custom/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="assets/js/jquery-pessoal.js"></script>
<script src="assets/js/jquery-pessoal2.js"></script>
<link rel="stylesheet" href="assets/plugins/multiple-select-master/multiple-select.css"></script>
<script src="assets/plugins/multiple-select-master/multiple-select.js"></script>
<link href="assets/css/custom.css" rel="stylesheet">
</head>
...
<div class="container">
#yield("corpo")
</div>
...
the view-blade which will display (ToAproveView.blade.php)
#extends('PrincipalView')
#section('corpo')
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Cliente Principal: </label><br>
<input type="text" id="idTxtFaturamentoAprovacaoCliente"
name="namTxtFaturamentoAprovacaoCliente"
readonly value="{{$myResult[0]->clienteprincipal}}"/>
</div>
</div>
is not working. The last view-blade do not render its elements. The view opens itself not well formatted.
Other actions make all other views-blade ok.
I found out, the problem is connected with the line code
Click here
because it was created on the fly (I guess).
Looking at the console of Chrome, is there
GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/css/bootstrap-theme.min.css
29638_1472048778961_121:16 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/css/bootstrap-datepicker.min.css
29638_1472048778961_121:18 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/jquery.js
29638_1472048778961_121:13 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/css/bootstrap.min.css
29638_1472048778961_121:22 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/bootstrap-datepicker.js
29638_1472048778961_121:28 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/jquery-ui-1.11.4.custom/jquery-ui.js
net::ERR_CONNECTION_RESET
29638_1472048778961_121:29 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/jquery-ui-1.11.4.custom/jquery-ui.css
net::ERR_CONNECTION_RESET
29638_1472048778961_121:23 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/bootstrap.min.js
net::ERR_CONNECTION_RESET
The including css and js files do not work (the names in the path are different of that I was wrote abore because I made a translation to better comprehension)
I found out where the error is.
I changed the path to .js and css files in default template and the view rendered correctly:
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
Although there is not the correct answer, since this template serves several views-blade that work perfectly, for now it is ok to me.
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>
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
I want only the landing page to be styled with Jquery. It´s a Login page, when the user logs in with his phone it should show the usual style
<%# page contentType="text/html;charset=UTF-8" %>
<html><!-- lol-->
<head>
<title>myApp/title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" cahrset="utf-8">
</script>
</head>
<body>
<div data-role="page" id="start" data-theme="d">
<div data-role="header">
Kontakt
</div>
<div class="ui-body ui-body-d">
<g:form controller="login" action="doLogin">
<div class="ui-grid-a">
<div class="ui-block-a"><input type="text" name="userNameField" id="username" value="Matrikelnummer" /></div>
<div class="ui-block-b"><input type="password" name="passWordField" id="password" value="Passwort" /></div>
</div>
<input type="submit" data-theme="d" name="loginButton" id="login" value="Login" />
</g:form>
</div>
</body>
</html>
As you can see in the form Im using grails for the backend. My problem is, all the other pages show jquery mobile style too when I login via this page. Why is it? Is ist because the import via "link" tag makes it global for the whole project?
thanks in advance Daniel
edit: the page where you land after login (supposed to have normal style:)
<%# page import="groovy.sql.ExpandedVariable; iwinews.User; iwinews.Category" %>
<html>
<head>
<meta name="layout" content="layout"/>
<script type="text/javascript">
var scroll_lock = false
var more_url = '${createLink(action:"singleNewspost")}';
var newsposts_by_category_url = '${createLink(action:"newspostsByCategory")}';
var all_newsposts_url = '${createLink(action:"allNewsposts")}';
var subscribed_newsposts_url = '${createLink(action:"subscribedNewsposts")}';
var filter_shown_categories_url = '${createLink(action:"filterShownCategories")}';
var search_url = '${createLink(action: "search")}';
var filterTypes = {
search : 0,
category : 1,
alle_kategorien : ${Category.ALLE_KATEGORIEN},
meine_kategorien : ${Category.MEINE_KATEGORIEN}
};
</script>
<script type="text/javascript">
</script>
</head>
<body>
<content tag="search">
<div id="_searchbox">
<input id="search"/></div>
</content>
<content tag="menu">
<h6>News-Kategorien:</h6>
<select id="kategorien_dropdown" class="grid_2">
<option id="${Category.ALLE_KATEGORIEN}" ${selectedCategory == Category.ALLE_KATEGORIEN ? "selected=\"selected\"" : ""}>alle Kategorien</option>
<option id="${Category.MEINE_KATEGORIEN}" ${selectedCategory == Category.MEINE_KATEGORIEN ? "selected=\"selected\"" : ""}>meine Kategorien</option>
</select>
<div id="filteredKategorien">
<g:render template="filteredKategorienTemplate" model="${categories}"/>
</div>
</content>
edit: This is the head of the layout/layout.gsp file
<%# page import="iwinews.REVISION; iwinews.CONSTANTS; iwinews.User; iwinews.Category" %>
<meta charset="utf-8"/>
<title><g:layoutTitle default="${CONSTANTS.PAGE_TITLE} /></title>
<style type="text/css">
</style>
<link rel="shortcut icon"
href="${resource(file: 'favicon.ico')}"/>
<link rel="stylesheet" href="${resource(dir: 'styles', file: 'reset.css')}"/>
<link rel="stylesheet" href="${resource(dir: 'styles', file: '960_12_col.css')}"/>
<link rel="stylesheet" href="${resource(dir: 'styles', file: 'default.css')}"/>
<g:javascript library="jquery"/>
<g:javascript library="jqModal"/>
<g:javascript library="jquery.cookie"/>
<g:javascript library="jquery.form"/>
<g:javascript library="application"/>
<g:layoutHead/>
As I understand, you've added jquery-mobile into main layout (layout/layout.gsp) And your login.gsp page extends it (it's <meta name="layout" content="layout"/>)
It's better to make two layouts:
/views/layout/mobile.gsp - for mobile pages
/views/layout/browser.gsp - for standard pages
and extend just that layout that you need for current page.
You can read more about Grails layouts at http://grails.org/doc/latest/guide/6.%20The%20Web%20Layer.html#6.2.4%20Layouts%20with%20Sitemesh
Concerning:
when I create a layout "mobile" and import it into the loginMobile page, and only there, the jquery Mobile style applies for the whole project again.
As far as I understand from the history of this question, might be due to the fact that ajax is enabled by default.
Have you tried to use the data-ajax="false" attribute, for instance on the submit link/button?