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

Question

我的 Meteor/Angular2 应用程序出现问题。我有一个启动组件 (AppComponent)，我可以加载它，一切正常，一切正常。但是现在 我将标签 'map' 添加到我的 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'）时，请记住：

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.

参考：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 到 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 {}

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

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

Meteor/Angular2 Application freeze when loading 2nd Component

meteor

typescript

angular-meteor

angular2-meteor

angular