• 10. Mai 2017

Using Angular and AOT with Webpack

The Angular CLI provides AOT compilation out of the box. To make use of it, just create a production build:

ng build --prod

Under the hoods, the CLI uses the package @ngtools/webpack which provides a loader for compiling TypeScript as well as a Plugin for AOT. One can easily use these mechanisms directly with webpack. The easiest way to do this is to create a project with the CLI and then eject the CLI. Ejecting means that the CLI is blasted away and instead of this webpack is used directly:

ng eject

If there is an existing webpack configuration it can also be extended by the mentioned mechanisms quite easily. First of all, install the @ngtools/webpack package:

npm i @ngtools/webpack --save-dev

If the usage of @ngtools/webpack yields errors one should check the referenced Angular version. In general, this packages works best with the version the CLI is using currently. Other versions could cause issues.

After this, TypeScript files can be loaded with the @ngtools/webpack loader:

module: {
    rules: [
        [...]
        { test: /\.ts$/, loaders: ['@ngtools/webpack']}
    ],
}, 

For AOT, just add the AOT plugin:

var AotPlugin = require('@ngtools/webpack').AotPlugin;

[...]

plugins: [
    new AotPlugin({
        tsConfigPath: './tsconfig.json',
        entryModule: 'app/app.module#AppModule'
    }),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        },
        output: {
            comments: false
        },
        sourceMap: false
    }),
    [...]
}

One very nice side effect of this is, that you don't have to write an own file to bootstrap Angular in AOT mode. Instead of this the Plugin is generating the code necessary for this.

 

 
Hier können Sie eine Anfrage für eine unverbindliche Schulung ode Beratung bzw. einen Workshop erstellen.
 
Unverbindliche Anfrage
 
 

Schulungen

Angular Schulung: Strukturierte Einführung

In dieser Schulung erfahren Sie von bekannten Insidern und Angular Experten der ersten Stunde anhand eines durchgängigen Beispiels, welche Konzepte hinter dem modernen Single-Page-Application-Framework aus der Feder von Google stecken und lernen diese für Ihre eigenen Projekte zu nutzen. Zusätzlich werden sie selbst eine erste Angular-Anwendung zu schreiben. Diese orientiert sich an Best Practices und kann somit als Vorlage für eigene Projekte herangezogen werden. Zum Einsatz kommt die jeweils neueste Version von Angular.

Details

Advanced Angular Schulung: Enterprise-Anwendungen und Architektur

In dieser weiterführenden Intensiv-Schulung lernen Sie von namhaften Insidern, wie sich große und skalierbare Geschäftsanwendungen mit Angular entwickeln lassen. Mehrere Architekturansätze und Best Practices werden anhand einer Fallstudie aufgezeigt und diskutiert. Die Fallstudie wird in den einzelnen Übungseinheiten erweitert und kann als Vorlage für eigene Vorhaben dienen.

Details

Migration von AngularJS 1.x auf Angular (2+)

Seit der Ankündigung von Angular (2+) fragen sich Entwicklungs-Teams, welche Migrationspfade für AngularJS-1.x-Anwendungen vorliegen werden. Das im Lieferumfang von Angular enthaltene ngUpgrade bietet eine Antwort darauf. Es erlaubt einen Parallelbetrieb von AngularJS 1.x und Angular (2+) und stellt somit die Grundlage für eine schrittweise Migration dar.

Details

Progressive Web-Apps mit Angular

Progressive Web Apps bieten den Komfort nativer Anwendungen, indem sie auf moderne Browser APIs, wie Service Worker, setzen. Sie sind installierbar sowie offlinefähig und nutzen Hintergrundprozesse für Datensynchronisation und Push-Notifications. Diese Schulung zeigt anhand eines durchgehenden Beispiels was sich genau hinter diesem neuen Konzept verbirgt, wie solche Anwendungen mit Angular entwickelt werden und wie Sie in Ihren Projekten von den dahinterstehenden Ideen profitieren.

Details

Reaktive Architekturen mit Angular und Redux

Dieses interaktive Seminar vermittelt, wie Sie reaktive Anwendungen mit Angular entwickeln können.

Details

TypeScript

TypeScript gibt Ihnen alle Möglichkeiten der neuen JavaScript-Standards und zusätzlich ein statisches Typsystem, das dabei hilft, Fehler möglichst früh zu erkennen. Außerdem ist TypeScript die Grundlage für Angular. In diesem interaktiven Seminar lernen Sie diese mächtige Sprache anhand einer Fallstudie kennen.

Details

Weitere Schulungen ...