Currently working on an html template using angular, and I have this code:
<a mat-list-item class="side-link" [routerLinkActive]="['is-active']" [routerLink]="[{outlets: { agent-sidebar: ['agent-manage-clients'] } }]"><i class="fas fa-user mr-3"></i>Clients</a>
As you can see, there's nothing wrong with the code. However, doing an ng build produces an error whereas the compiler is looking for a missing : token where I think is unnecessary.
Why does my compiler keep looking for a 'missing' token even though I have closed the braces correctly?
This is funny to me because this is a copy pasted working code in a different component and only produced an error when I pasted it in this new component. So why isn't it producing the same error in the other component?
So apparently, I've fixed this bug of mine by changing the name of my router-outlet. It turns out that naming my outlet agent-sidebar with the token - messes up the compiler somehow. So after almost half a day of work, I've changed this:
[routerLink]="[{outlets: { agent-sidebar: ['agent-manage-clients'] } }]"
to this:
[routerLink]="[{outlets: { agentSidebar: ['agent-manage-clients'] } }]"
and compiler is now working properly.
Related
can anyone tell me why my "b-form-select-option" is not working?
Thats my code:
I am using Vue with Bootstrap, everything else works, except for this single command. I am getting the standard "unknown html tag" error.
What is wrong here? I just copied the code from https://bootstrap-vue.js.org/docs/components/form-select/ and adapted it to my project.
Make sure you are using BootstrapVue v2.2.x.
The <b-form-select-*> sub components were introduced in v2.2.0.
the "unknown html tag" error means your editor doesn't recogonize thie element, your web app can still work, you can add this tag as an custom tag in your editor preference
There you have a simple example of usage.
You have to declare options inside <script>...</script>, like this:
options: [
{
value: null,
text: 'Please select an option'
},
]
I have a simple image viewer webpage on gitpages but before I push the next group of images I want to condense all of my images into an array using angular.
The test I have made here uses only 4 photos that are in the same folder as every other file.(they are jpegs)
my js file is set up like this with a factory for the array and a controller.
angular.module('beamModule',[])
.factory('imageFactory', function(){
return {
getImages: function(){
return ['beam1.jpg','beam2.jpg','beam3.jpg','beam4.jpg'];
}
}
})
.controller('Photos', function(imageFactory){
this.images = imageFactory.getImages();
});
I don't think anything is wrong with this array but maybe I am overlooking something?
The HTML that I am using and the section that is giving me trouble when I check the developer tools is below.
<div class="imgcontainer" ng-controller="Photos as photosController">
<img ng-repeat="src in photosController.images"
ng-src="beamModule.js/{{images}}">
</div>
I am not sure if I am supposed to be using an ng-class attribute in the css or if there is something else that needs removed?
The developer tools are returning this value for each of the images (they are repeating just not showing)
<img ng-repeat="src in photosController.images" class="ng-scope">
Why is the ng-scope class being put in here and the ng-src is being removed?
EDIT FIXED
Ok to the person who answered so quickly and simply you are the real mvp here.
You said to change the ng-src="beamModule.js/{{images}}" to read {{src}} instead.
Once I tried this it still didnt work but then I checked the dev tools and noticed it was attempting to pull the files from the js file and not the actual file so I just changed it to this and now it works great! Thank you.
ng-src="{{src}}"
The ng-src attribute needed to point to the repeat instead of the js file.
ng-src="{{src}}"
For a TV Guide, I am trying to create a dynamic expression within an ng-repeat directive as follows:
<div ng-repeat="programme in programmes['{{channel}}-wed-jan-14']" alt="{{channel}}">
{{channel}} in my controller should evaluate to something like "eTV". The binding is working fine with the alt="{{channel}}" instance but not with the array instance. Angular simply serves up the line of code commented out. If I hardcode the "eTV" string in place of the {{channel}}, it works fine.
Am I trying to ask Angular to do what it is not designed for, or is it possibly my array handling which is dodgy?
Okay, not sure if I just asked a dumb question, but in the absence of responses, I managed to figure out a solution by writing a filter as follows:
Template:
<div ng-repeat="programme in programmes | getChannelDay:channel:dayString" alt="{{channel}}">
Controller filter:
app.filter('getChannelDay', function() {
return function(programmes, channel, dayString) {
return programmes[channel + dayString];
};
});
The issue with my initial problem
<div ng-repeat="programme in programmes['{{channel}}-wed-jan-14']" alt="{{channel}}">
is that I was trying to put {{channel}} inside the expression, but that is the format for markup.
I tried to use the following instead:
<div ng-repeat="programme in programmes['channel + daystring']" alt="{{channel}}">
but I am doing something wrong here. I am pretty sure there is a way to get this to work - if anyone knows, please comment.
Im trying to convert the following code from HTML to JADE:
<a id="bgndVideo" href="http://www.youtube.com/watch?v=Df8ofF1mbdA" class="movie {opacity:1, isBgndMovie:{width:'window',mute:false}, optimizeDisplay:true, showControls:true, ratio:'16/9',startAt:3,quality:'hd720',addRaster:true,lightCrop:true}"></a>
HTML2JADE website gives me the following code back:
a#bgndVideo.movie.{opacity:1,.isBgndMovie:{width:'window',mute:false},.optimizeDisplay:true,.showControls:true,.ratio:'16/9',startAt:3,quality:'hd720',addRaster:true,lightCrop:true}(href='http://www.youtube.com/watch?v=Df8ofF1mbdA')
My issue is that this code doesn't appear to function correctly unlike every other HTML2JADE conversion iv'e done. I noticed that my IDE(WebStorm) is highlight some of the { } in pink, signifying some sort of error. Im just learning jade and I cant figure out the problem, I just know the code doesn't look right... Is there anyone that may be able to help me with this problem?
Thanks!
Try to put it directly in the jade template.
<a id="bgndVideo" href="http://www.youtube.com/watch?v=Df8ofF1mbdA" class="movie {opacity:1, isBgndMovie:{width:'window',mute:false}, optimizeDisplay:true, showControls:true, ratio:'16/9',startAt:3,quality:'hd720',addRaster:true,lightCrop:true}"></a>
It should work.
This is a really weird error, I think it may be a razor bug. I'm using VS 2012, MVC4, Framework 4.5.
Following these instructions: http://www.asp.net/whitepapers/mvc4-release-notes#_Toc303253806
I created a new MVC4 project and then I copied all my code (controllers, views, viewmodels) to it from the MVC3 project.
Eveything worked just fine, until I tested one View which has a custom helper and inside it it has one foreach, one switch, three if statements and then I call some other custom helpers in there too.
It's exactly the same code in both projects, in MVC3 it works, but in MVC4 it shows this message:
Compiler Error Message: CS1513: } expected
So I tried adding one curly bracket but it shows the same error, so I keep adding brackets and it won't stop telling me the same thing.
I googled this issue but I just found this question with no answer:
http://www.1771.in/asp-net-mvc-4-issues-migrating-mvc3-view-in-vs-2012-rc.html
has anyone experienced this issue?
The Razor parser of MVC4 is different from MVC3.
Razor v3 is having advanced parser features and on the other hand strict parsing compare to MVC3.
You may run into syntax error in view while converting MVC3 to MVC4 if you have not used razor syntaxes in correct manner.
Solution of some common razor code mistakes that are not allowed in Razor v2 are :
--> Avoid using server blocks in views unless there is variable declaration section.
Don’t : #{if(check){body}}
Recommended : #if(check){body}
--> Avoid using # when you are already in server scope.
Don’t : #if(#variable)
Recommended : #if(variable)
Don't : #{int a = #Model.Property }
Recommended : #{int a = Model.Property }
I had exactly the same issue.
In Razor MVC3 i was accessing the vars like this: #vSuggestion but in MVC4 the # is not necessary.
My example, i had this code in MVC3 working:
#{
var vSuggestion = ((dynamic)ViewData["suggestion"]);
}
<!-- more code here -->
#{ int suggestion = #vSuggestion;
switch (suggestion)
{
case Suggestion.INCORRECT_PASSWORD:
case Suggestion.USER_ALREADY_IN_DATABASE:
<span>Trata de iniciar sesión de nuevo</span><br />
<span>Recupera tu contraseña #Html.ActionLink("aquí", "Recover", "Account")</span>
break;
case Suggestion.EMAIL_DONT_EXISTS:
<span>Comprueba que el correo electrónico está bien escrito</span><br />
<span>Registrate (abajo)</span>
break;
}
}
In MVC4, Razor wasn't catching the first curly bracket from the switch statement. So i removed the # from #vSuggestion and razor parsed the code properly.
Hope it helps.
I ran into this "Expected }" issue as well and the culprit turned out to be an apostrophe in an HTML comment This seems like a bug in Razor.
Here is an example on how to reproduce this issue in the default MVC 4 application with VS 2012. Just add the following a comment with an apostrophe to the #section featured {} in the default.cshtml. Remove the apostrophe from the comment and it works OK.
#section featured {
<!-- hello world it's not cool -->
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>#ViewBag.Title.</h1>
<h2>#ViewBag.Message</h2>
</hgroup>
<p>...</p>
</div>
</section>
}
This may be more of a long shot but sometimes if you are using a keyword it will cause that error
List of Keywords VS 2012
http://msdn.microsoft.com/en-us/library/x53a06bb%28v=vs.110%29.aspx
I know two of the new keywords are await and async for 4.5
See the following for an example of what I am talking about
http://www.wduffy.co.uk/blog/css-class-property-asp-net-mvc-htmlattributes/
Try to add this line in web.config
<compilation debug="true" batch="false">
Now, when getting the error you should be able to open the temporary generated .cs file and take a look at generated code.
Maybe then you will more easily spot the problem.
For details look here Debugging ASP.NET generated code
Most helpful thing to do that will solve 6/10 of these for you is in VS2012
File-> Source Control -> Advanced -> Format this Document.
This will solve any un-closed div's, conditional statements even ul's and li's which cause big errors for .net.
I experienced this error but narrowed it down to a missing slash to close a tag. this worked in MVC3:
#helper metatags()
{
<meta charset="utf-8">
}
but not in MVC4. it requires this:
#helper metatags()
{
<meta charset="utf-8" />
}