Приложение Meteor/Angular2 зависает при загрузке 2-го компонента

У меня проблема с моим приложением Meteor/Angular2. У меня есть начальный компонент (AppComponent), и я могу загрузить его, все работает так, как я хочу. Но теперь я добавил тег map в свой шаблон AppComponent и создал компонент MapComponent. Теперь каждый раз, когда я пытаюсь открыть приложение (на локальном хосте: 3000), приложение зависает и падает. Я ничего не могу открыть в инструменте разработчика.

Здесь я отправляю вам свои файлы: 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 {

}

Я надеюсь, что вы можете мне помочь. Заранее спасибо Тим


typescript angular meteor angular-meteor angular2-meteor
person tim.schurti    schedule 30.03.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Когда вы используете styleUrls из Angular (вместо import style from './path/to/stylesheet' из angular2-meteor), помните, что:

URL-адрес относится к корню приложения, который обычно является расположением index.html веб-страницы, на которой размещено приложение. URL-адрес файла стиля не относится к файлу компонента.

Ссылка: https://angular.io/docs/ts/latest/guide/component-styles.html#!#style-urls-in-metadata

Поэтому в вашем случае вы должны написать в файле map.component.ts:

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 {}

Демонстрация: https://plnkr.co/edit/K0NW0g8UVRI1EsyRMIe6?p=preview

Однако есть способ запросить у Angular использование относительный путь.

Вы можете использовать относительный URL-адрес, добавляя к именам файлов префикс ./:

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

Примечание: вы должны начинать с ./, а не напрямую ../, иначе Angular по-прежнему использует URL-адрес абсолютного пути.

При этом, если вы используете этот код в Meteor, все ваши файлы будут объединены во время компиляции, и вы не сможете использовать способ Angular для ленивой загрузки внешних файлов (будь то HTML или таблицы стилей).

Поэтому вы должны либо написать их встроенными, либо использовать рекомендуемый способ импорта angular2-meteor, то есть:

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 {}
person ghybs    schedule 03.04.2017
comment
Спасибо за ответ. Советы - отличный вклад в будущее. К сожалению, это не решение моей проблемы. Я думаю, проблема больше на стороне Метеора. - person tim.schurti; 03.04.2017
comment
Да, на самом деле, если подумать об этом, очень высока вероятность того, что ваш файл SCSS больше не будет доступен по ожидаемому URL-адресу, как только Meteor объединит все. Вот почему вы должны просто придерживаться стиля импорта angular2-meteor, то есть import style from '../app.component.scss.', затем styles: [style] в декораторе @Component. - person ghybs; 03.04.2017
comment
Спасибо! Последняя часть вашего решения решила мою проблему. Ты мой мужчина:) - person tim.schurti; 03.04.2017