Meteor/Angular2 Application freeze when loading 2nd Component

Question

I got a Problem with my Meteor/Angular2 application. I got a start Component (AppComponent) and I can load this just fine everything works as I want. But now I added the tag 'map' to my AppComponent template and created the component MapComponent. Now everytime i try to open the application (on localhost:3000) the App freezes and crashes. I can't open the developer tool nothing.

Here i send you my Files: app.module.ts:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { MapComponent } from './map/map.component';

@NgModule({
  // Components, Pipes, Directive
  declarations: [
    AppComponent,
    MapComponent

  ],
  // Providers
  providers: [],
  // Modules
  imports: [
    BrowserModule
  ],
  // Main Component
  bootstrap: [AppComponent]
})
export class AppModule {
}

app.component.ts

import { Component } from "@angular/core";
import template from "./app.component.html";
import style from "./app.component.scss";

@Component({
  selector: "app",
  template: `<nav class="navbar">Navbar</nav>
<div class="mapbox">
    <map></map>
</div>
<footer class="footer">Footer</footer>`,
  styles: [ style ]
})
export class AppComponent {
}

map.component.ts

import { Component } from '@angular/core';
@Component({
    selector: 'map',
    template: `<div class="container">
    Test
</div>`,
    styleUrls: ['../app.component.scss']
})
export class MapComponent {

}

I hope you can help me. Thanks in advance Tim

Answer 1

When you use styleUrls from Angular (instead of import style from './path/to/stylesheet' from angular2-meteor), remember that:

The URL is relative to the application root, which is usually the location of the index.html web page that hosts the application. The style file URL is not relative to the component file.

Reference: https://angular.io/docs/ts/latest/guide/component-styles.html#!#style-urls-in-metadata

Therefore in your case, you would write in your map.component.ts file:

import { Component } from '@angular/core';
@Component({
    selector: 'map',
    template: `<div class="container">
    Test
</div>`,
    styleUrls: ['app/app.component.scss'] // From location of index.html
})
export class MapComponent {}

Demo: https://plnkr.co/edit/K0NW0g8UVRI1EsyRMIe6?p=preview

---

There is however a way to request Angular to use relative path.

You can use a relative URL by prefixing your filenames with ./:

import { Component } from '@angular/core';
@Component({
    selector: 'map',
    template: `<div class="container">
    Test
</div>`,
    styleUrls: ['./../app.component.scss'] // From location of map.component.ts
})
export class MapComponent {}

Demo2: https://plnkr.co/edit/5x0qFBii2VIQOCtpxLfL?p=preview

Note: you must start with ./, not directly ../, otherwise Angular still uses absolute path URL.

---

That being said, if you use that code within Meteor, all your files will be bundled during compilation, and you cannot use the Angular way of lazily loading external files (whether HTML or stylesheets).

Therefore you should either write those inline, or use the angular2-meteor importing recommended way, i.e.:

import { Component } from '@angular/core';
import style from '../app.component.scss';
@Component({
    selector: 'map',
    template: `<div class="container">
    Test
</div>`,
    styles: [style]
})
export class MapComponent {}