I'm following this tutorial trying my best not to hate angular with all my being. The tutorial uses Typescript and Angular2 and Ionic, 3 tools which I don't entirely understand, but that's like... why I'm doing a tutorial in the first place. My experience in web development was 2.0 with Django, and a lot of front-end so I know Javascript very well, but this is confusing me.

This is the relevant code:

// chats.ts
import { Component } from '@angular/core';
import * as Moment from 'moment';
import { Observable } from 'rxjs/Observable';
import { Chat, MessageType } from '../../../../imports/models';

import template from './chats.html';

@Component({
    template
});

export class ChatsPage {
    chats: Observable<Chat[]>;

    constructor() {
        this.chats = this.findChats();
    }

    private findChats(): Observable<Chat[]> {
        return Observable.of([
            {
                _id: '0',
                title: 'Ethan Gonzalez',
                picture: 'https://randomuser.me/api/portraits/thumb/men/1.jpg',
                lastMessage: {
                  content: 'You on your way?',
                  createdAt: Moment().subtract(1, 'hours').toDate(),
                  type: MessageType.TEXT
                }
            },
     // dummy data here

Second file:

// app.components.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { ChatsPage } from '../pages/chats/chats';
import template from "./app.html";

@Component({
    template
});

export class MyApp {
    rootPage = ChatsPage;

    constructor(platform: Platform) {
        platform.ready().then(() => {
            if (platform.is('cordova')) {
                StatusBar.styleDefault();
                Splashscreen.hide();
            }
        });
    }
}

When I run Meteor I get these errors:

client/imports/pages/chats/chats.ts (13, 12): Cannot use namespace 'Observable' as a type.
client/imports/pages/chats/chats.ts (19, 26): Cannot use namespace 'Observable' as a type.
client/imports/app/app.components.ts (14, 27): Cannot use namespace 'Platform' as a type.
  • Did you tried to run npm install again? If not, try now. – dlcardozo Sep 24 at 1:45
  • @DiegoCardozo it didn't work, but it did leave a bunch of messages about how @angular/some-package requires a peer of [email protected]^6.0.0 but none is installed. I tried npm install rxjs (which should already be available) and now it's a bunch of different messages. I'll try installing all of them and see if that changes anything – yuvi Sep 24 at 1:50
  • @DiegoCardozo nope. Still nothing. same errors – yuvi Sep 24 at 1:51
  • Can you publish a repository with your current setup so I can reproduce the problem? That will be so much easier than me trying to recreate your setup myself. – Matt McCutchen Sep 24 at 3:21
  • @MattMcCutchen here: github.com/yuvii/Trying-out-Angular – yuvi Sep 24 at 8:20
up vote 1 down vote accepted

FWIW at this point: I can reproduce the original errors when I don't have the node_modules installed. And even after I install them, it looks like the barbatus:typescript build plugin is buggy and doesn't invalidate its cache, so it still shows the original errors. If I delete .meteor/local/.typescript-cache, then the installed node_modules are recognized. In general I don't trust barbatus:typescript (it tries to be clever and does too much complex stuff that ends up causing problems), but I don't have an alternative that I can recommend for general use at this point. If you like, you could file an issue and see if barbatus will address this particular problem.

The Cannot use namespace ... as a type error seems to be a consequence of your declarations.d.ts file doing declare module '*';. The error doesn't make sense to me, so I filed a TypeScript issue.

  • Thank you. It's comforting to know it's not me going crazy but an actual bug. I'd love to know if there are alternatives. The tutorial says that the declarations.d.ts is needed to support third party libs that don't support typescript. I don't understand why cause this is new to me but I assume I need this file. – yuvi Sep 24 at 18:36
  • 1
    The alternative is to remove the declare module "*";, and each time you add a third-party library that doesn't have type declarations, manually add declare module "..."; statements for the specific modules you want to use. – Matt McCutchen Sep 24 at 21:56

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.