加载第二个组件时 Meteor/Angular2 应用程序冻结

Question

我的 Meteor/Angular2 应用程序出现问题。我有一个启动组件（AppComponent），我可以加载它，一切正常。但是现在我将标签“地图”添加到我的 AppComponent 模板并创建了组件 MapComponent。现在，每次我尝试打开应用程序（在 localhost: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 {

}

我希望你能帮助我。 提前致谢 蒂姆

Answer 1

当您使用来自 Angular 的 styleUrls（而不是来自 angular2-meteor 的 import style from './path/to/stylesheet'）时，请记住：

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

---

但是，有一种方法可以向use relative path 请求 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 {}

演示2：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 {}