Initializing Automapper

I struggled for while with getting Automapper to register the Profiles of my sub layers (Service layer for instance), when it is setup in the App start process. I found this on StackOverflow and it was the correct answer. Saving here so I can find easily next time.

Additionally. It was not necessary to override the ProfileNames. All profiles in all layers can have the same class name as far as I can tell. No issues in my case.

Original ref: https://stackoverflow.com/questions/38555702/how-to-initialize-automapper-profiles-in-referenced-project-dlls-in-asp-net-weba/38572088#38572088

 

 var assembliesToScan = AppDomain.CurrentDomain.GetAssemblies();
        var allTypes = assembliesToScan.SelectMany(a => a.ExportedTypes).ToArray();

        var profiles =
            allTypes
                .Where(t => typeof(Profile).GetTypeInfo().IsAssignableFrom(t.GetTypeInfo()))
                .Where(t => !t.GetTypeInfo().IsAbstract);

        Mapper.Initialize(cfg =>
        {
            foreach (var profile in profiles)
            {
                cfg.AddProfile(profile);
            }
        });

Debugging Angular Typescript files

Type script is converted into Javascript at runtime. It would be nice to be able to set break points on your TypeScript in Chrome when debugging. This can be done easily.

In the Developer tools, Source tab, there are a list of Sources.
Expand the ‘webpack://’ source
Expand the ‘.’ folder
Expand the ‘src’ folder
Find your ts file that you want to set a break point in, and you are done.

Another option.. Angular Augury

Google Angular Augury.
Install it.
It is a Chrome Extension.
Now Augury should show up in your Developer tools (in your tabs with ‘Sources’).
Using Augury, you can watch what is going on with your Angular as your pages run.

Angular creating components

When you use the command line to create a component, it will be added to the src/app folder.
The following command:

ng g c shoppingList

will create a folder named ‘src/app/shopping-list’, which contains:

shopping-list.component.css
shopping-list.component.html
shopping-list.component.spec.ts
shopping-list.component.ts

Alternatively, if I want to create a folder called ‘shopping’ and inside that have an item called list, I could use this command:

ng g c shopping/list

And that will give this structure:

src
 app
   shopping
     list
       list.component.css
       list.component.html
       list.component.spec.ts
       list.component.ts

What if we don’t want the spec.ts files?

ng g c shopping/list --spec false

Angular’s For statement

Let’s say you want to add multiple components on an html page, and that in your component’s ts file you have declared an array of users, and on your html template you want to display each user.

In your ts file you have something like this:

export class UsersComponent implements OnInit{
//hard code an array of users here. Of course you'll really want to pull these from somewhere.
users = ['Smith, Jim', 'Brown, Jane', 'White, Anne'];

...
}

In your html template, we want to display the users from our ts file. We assume we have already created an ‘app-user’ component. Here’s our html file

...
[div] some html [/div]
[app-user *ngFor="let usr of users"][/app-user]
...

* ‘users’ above must match the variable in your ts file, but ‘usr’ could have been set to ‘u’, ‘user’, ‘x’, or whatever you want.

Like ngIf, ngFor is another Structural Directive, and therefore it needs the *.

Indexes in a for loop

Let’s say that you need get the index of your items. I can’t think of great reason to use an index in the sample above, … anyway, here is how you can get the index of the array items.

...
[div] some html [/div]
[app-user *ngFor="let usr of users; let i = index;"][/app-user]
...

*’index’ is a key word, but ‘i’ is just a variable I chose. The above example is contrived, but the point is you can get the index of the array item.