Cleanup

Note: If you skipped ahead to this section, click here to download a zip of the tutorial at this point.

So now that we are done with the migration, we need to perform some clean-ups and make sure that we remove all the old files.

Let's join all the stylesheets we need under the same directory - imports/styelsheets/, now they are in imports/ui/stylesheets/ (commit #10.1).

Make sure to also take imports/ui/components/lists-show.less !

And we also need to update the imports in the main less file:

14.2 Update the imports path client/main.less

@import "{}/imports/stylesheets/reset.less";

// Global namespace

@import "{}/imports/stylesheets/base.less";

@import '{}/imports/stylesheets/button.less';

@import '{}/imports/stylesheets/form.less';

@import '{}/imports/stylesheets/icon.less';

@import '{}/imports/stylesheets/layout.less';

@import '{}/imports/stylesheets/link.less';

@import '{}/imports/stylesheets/menu.less';

@import '{}/imports/stylesheets/nav.less';

// Global components

@import '{}/imports/stylesheets/list-items.less';

@import '{}/imports/stylesheets/message.less';

@import '{}/imports/stylesheets/notification.less';

// Individual compons

@import "{}/imports/stylesheets/lists-show.less";

Improve this code

Now we can remove all the files we no longer use from imports/ui/ directory - which are ALL of the files, except errors.js which we use, so let's move it to /imports/ directory first, and them remove imports/ui/ directory (commit #10.4).

We can also removed all client startup files (imports/startup/client), since we no longer use them (in commit #10.3).

And let's update the imports of errors.js file:

14.5 Updated imports path for errors helpers client/imports/components/list-item.component.ts

  updateText,

  remove,

} from '../../../imports/api/todos/methods';

import {displayError} from '../../../imports/errors';

declare let _;

Improve this code

14.5 Updated imports path for errors helpers client/imports/components/list-show.component.ts

  remove,

  insert,

} from '../../../imports/api/todos/methods';

import { displayError } from '../../../imports/errors';

import {Observable} from "rxjs";

@Component({

Improve this code

We can also now remove Meteor packages we no longer use that related to Blaze or Router!

So let's do it by running:

meteor remove blaze-html-templates aldeed:template-extension kadira:flow-router kadira:blaze-layout arillo:flow-router-helpers zimme:active-route

And now we can also use the regular Angular 2 compilers package, so let's remove the old one and use the regular one:

meteor remove angular2-with-blaze-compilers
meteor add angular2-compilers less

And the last step, is to remove .ng2 from the HTML files extension and update it to be .html, remember also to update it in the Component templateUrl !

We can also remove the import of Blaze Template from the MainComponent:

14.6 Removed old blaze import client/imports/main.component.ts

import {Component, OnInit} from "@angular/core";

import {Meteor} from "meteor/meteor";

import {MeteorObservable} from "meteor-rxjs";

Improve this code

That's it! In the next chapter we will take about the next step of migration from Blaze to Angular 2.

Blaze to Angular 2 Migration

https://github.com/dotansimha/angular2-blaze-migration-tutorial

Cleanup