Skip to content

Demo of AngularJS/Angular Material running in hybrid mode in the Angular CLI

License

Notifications You must be signed in to change notification settings

Splaktar/angularjs-angular-material-hybrid-demo

Repository files navigation

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
    • Angular referring to any component: app-component
  • 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:

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.