AngularJS/Angular Material Hybrid Demo

This was started on StackBlitz, based on a demo by George Kalpakas, but using Angular Upgrade can be done in a way that is either compatible with StackBlitz or the Angular CLI, not both. This repo uses the Angular CLI along with the downgradeModule().

Find out more in the Upgrading for Performance Guide.

AngularJS Material Migration Guide

We recently published a comprehensive guide for upgrading AngularJS Material apps to Angular. It includes guidance for migrating to Angular Material, the Angular Component Dev Kit (CDK), and the Angular Flex Layout library. Additionally, we provide guidance on using pure CSS Grid and Flexbox for application layout, migration of theming features, services, typography, and more.

Learn more in the AngularJS Material Migration Guide.

Caveats found so far

• Different selector formatting and conversions between AngularJS and Angular. It depends on which framework refers to the component, not which framework compiled the component.
  • AngularJS referring to any component: appComponent
    • I.e. to use <app-angularjs> in index.html, it's defined as selector: appAngularjs
  • Angular referring to any component: app-component
    • I.e. to use <ng1-tabs> in app.component.html, it's defined as selector: 'ng1-tabs'
• ngUpgrade projects that work on StackBlitz, don’t work in the CLI and vice versa.

Minification-friendly AngularJS Code

• Enable strictDi to help you catch issues early:
  • angular.bootstrap(rootElement, [appAngularjsModule.name], { strictDi: true });
  • Example
• For injections into .run(), .config(), etc. You can use either of:
  • Inline Function Annotation:
    • .run([ '$templateCache', ($templateCache) => {
    • Example
  • $inject Annotation
    • configFunction.$inject = ['$mdThemingProvider', '$mdGestureProvider'];
    • Example
• For TypeScript classes use $inject Annotation:
  • static $inject = ['$scope'];
  • Example

AngularJS Components w/ templateUrl

templateUrl in AngularJS components does not work out of the box with Angular CLI. The following steps will configure a module that loads $templateCache at build time:

• gulp-angular-templatecache automates $templateCache loading. See simple gulpfile.
• gulp-htmlmin minifies the templates before putting them in the $templateCache
• The output goes in src/app/angularjs/templates/templates.js.
• The src/app/angularjs/templates/index.js file sets up a module.
• Then we import the module and use the 'templates' string in our AngularJS module creation.

If you are working on AngularJS Templates (.html files referenced via templateUrl), and you want to enable the Angular CLI to auto-reload on changes, run:

npm run watch:templates

TODO

• Add some AngularJS Material services.
• Add some Angular Material services.
• Add some CDK services.
• Set up a watcher to rebuild AngularJS $templateCache
• Customize the AngularJS Material theme.
• Customize the Angular Material theme.
• Add more AngularJS Material components.
• Add more Angular Material components.
• Add more CDK components.
• Work around Terser mangling, using dependency annotation.
• Look into loading $templateCache at build time, using Gulp.