Steve Perkins

Short Typescript Import Paths in Angular 7

This is an update for Angular 6/7 to the method described here for shortening typescript imports in deeply nested files from something like this:

import { DeepSharedComponent } from ../../../../shared/components/deep-shard-component;

to something like this:

import { DeepSharedComponent } from @shared/components/deep-shared-component;

Basically, we use the same method outlined above, but move the paths entry from tsconfig.json to tsconfig.app.json, and ensure that the baseUrl entries in tsconfig.json and tsconfig.app.json point to the same directory, keeping in mind that tsconfig.app.json is located one directory below tsconfig.json.

Example:

`tsconfig.json`

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

`tsconfig.app.json`

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [],
    "baseUrl": "../",
    "paths": {
      "@app/*": ["./src/app/*"],
      "@assets/*": ["./src/assets/*"],
      "@core/*": ["./src/app/core/*"],
      "@environments/*": ["./src/environments/*"],
      "@features/*": ["./src/app/features/*"],
      "@shared/*": ["./src/app/shared/*"]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Notice that baseUrl in the tsconfig.app.json file is set to "../" while baseUrl in the tsconfig.json file is set to "./". This is because the CLI file structure for the current version of Angular (7.2.9 as of the date of this article) looks like this:

project
    |--e2e
    |--mocks
    |--node_modules
    |--src
        |--app
        |  ...
        |--tsconfig.app.json
    |--tsconfig.json

The CLI automatically sets baseUrl in tsconfig.json to "./" so that it points to the project directory. We need to make sure that the baseUrl in tsconfig.app.json file also points to the project directory. In order to do that, we need to set baseUrl to "../" (one level up from the directory in which the tsconfig.app.json file sits).

One this is done, Angular should be able to properly resolve paths that are dependent on tsconfig.json--such as URLs in your CSS code--as well as resolve typescript import path maps placed in the tsconfig.app.json file.

Testing Angular 7 Syntax Highlighter Service

Sample HTML Markup

First, we add some sample HTML markup. When the Angular application add this blog post to the list of posts, we should see the mark-up below highlighted by prismjs to show it in a pretty format.

<html>
  <head>
    <title>Sample Page<title>
  </head>
  <body>
    <div>This is a DIV element.</div>
  </body>
</html>

Sample Typescript

Next add some typescript code to see how the Angular application handles that. This is typescript defining the RecentPosts component in my application:

import {Component, OnInit, Input, AfterViewChecked, OnDestroy} from '@angular/core';
import {Observable, Subscription} from 'rxjs';

import { PostList } from '../../models';
import { BlogService } from '../../services/blog.service';
import { HighlightService } from '../../../../core/services/highlight.service';

@Component({
  selector: 'sbp-recent-posts',
  templateUrl: './recent-posts.component.html',
  styleUrls: ['./recent-posts.component.scss']
})
export class RecentPostsComponent implements OnInit, OnDestroy, AfterViewChecked {
  @Input()blogId: string;
  postList: PostList;
  // posts$: Observable<postlist>;
  subscriptions: Subscription[] = [];
  private highlightsed = false;

  constructor(private blogSvc: BlogService,
              private highlightService: HighlightService) { }

  ngOnInit(): void {
    if (this.blogId) {
      this.subscriptions.push(
        this.blogSvc.fetchPosts$(this.blogId)
          .subscribe((postList: PostList) => {
            this.postList = postList;
          })
      );
    }
  }

  ngOnDestroy(): void {
    this.subscriptions.forEach(
      (subscription: Subscription) => subscription.unsubscribe()
    );
  }

  ngAfterViewChecked(): void {
    if (this.postList && !this.highlightsed) {
      this.highlightService.highlightAll();
      this.highlightsed = true;
      console.log('highlighted!');
    }
  }
}

SCSS

Now we'll add some sample scss code to see how that looks in the Angular app. It should appear substantially the same as you see here:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Conclusion

Installing Django

Install Python 3

There are many different ways to install many different versions of Python. Here are a few links to pages that can help you install Python 3:

Install virtualenv and Create a New Environment

What is a virtual environment, and why do I need it?

To be clear, you don't need to use virtual environment. However, Python is installed system-wide, and without virtual environments, all of your packages are available to all projects. This isn't necessarily a bad thing, but it makes it impossible to use different versions of packages in different projects or to ensure that your projects are all running the correct versions of all dependencies. In short, you don't need to install and use virtualenv, but you certainly should, if you plan to develop lots of different python projects.

Create a new virtual environment
source bin/activate the virtual environment
Install django (pip install Django==1.11.8)
create a project (django-admin.py startproject sample)
You should now have the following file structure:

sample
  |--manage.py
  |--sample
       |--__init__.py
       |--settings.py
       |--urls.py
       |--wsgi.py

cd into the outer "sample" directory. We'll use manage.py to create an app and initialize the project.
Now run "manage.py migrate" to build the initial database structure.
We now should have a fully functioning web application that will receive http requests and return response. Test it out by typing "manage.py runserver" and then open your browser to "http://localhost:8000" (or "http://127.0.0.1:8000")
You should now see a "Welcome to Django message in the browser"
As noted in the "Welcome to Django" page, you can create an app by typing "python manage.py [app_label]". In this case, we're creating a simple web site to run a sample application. I like to create an "web" application that acts as the entry point into the web site/web app. So, let's do that first.
create a "web" application by running "python manage.py startapp web"
You'll see that this creates a new directory named "web" in the "sample" project folder. navigating to this directory, you can see it has several pre-built files

web
  |--__init__.py
  |--admin.py
  |--apps.py
  |--migrations
  |--models.py
  |--tests.py
  |--views.py

this

#!/usr/bin/env python
import socket
import subprocess
import sys
from datetime import datetime

# Clear the screen
subprocess.call('clear', shell=True)

# Ask for input
remoteServer    = raw_input("Enter a remote host to scan: ")
remoteServerIP  = socket.gethostbyname(remoteServer)

# Print a nice banner with information on which host we are about to scan
print "-" * 60
print "Please wait, scanning remote host", remoteServerIP
print "-" * 60

# Check what time the scan started
t1 = datetime.now()

# Using the range function to specify ports (here it will scans all ports between 1 and 1024)

# We also put in some error handling for catching errors

try:
    for port in range(1,1025):  
        sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
        result = sock.connect_ex((remoteServerIP, port))
        if result == 0:
            print "Port {}:   Open".format(port)
        sock.close()

except KeyboardInterrupt:
    print "You pressed Ctrl+C"
    sys.exit()

except socket.gaierror:
    print 'Hostname could not be resolved. Exiting'
    sys.exit()

except socket.error:
    print "Couldn't connect to server"
    sys.exit()

# Checking the time again
t2 = datetime.now()

# Calculates the difference of time, to see how long it took to run the script
total =  t2 - t1

# Printing the information to screen
print 'Scanning Completed in: ', total