模板网址不起作用

Question

我正在尝试制作angular2-material 应用程序

当我 template: ~ 时它可以工作，但如果我使用 templateUrl: ~，<my-app> 甚至不包含任何内容，甚至 Loading... 和网络日志通知我模板已成功加载 200 GET /app/mainLayout.html

基本上，我关注了 quick start guide 的 angular2 文档，这就是我所做的

1. 通过 npm 安装 angular2-materialize
2. import "angular2-materialize" 在main.ts
3. 在 index.html 中添加 System.config

index.html

<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.config({
  defaultJSExtensions: true,
  packages: {
    "materialize-css": {
      "main": "dist/js/materialize"
    },
    "materialize": {
      "main": "dist/materialize-directive",
      "defaultExtension": "js"
    }
  },
  map: {
    "materialize-css": "node-modules/materialize-css",
    "materialize": "node_modules/angular2-materialize",
    "angular2-materialize": "node_modules/angular2-materialize"
  }
});
System.import('app').catch(function(err){ console.error(err); });
</script>

4. 在 app.component.ts 中添加 MaterializeDirective

app.component.ts

import { Component } from '@angular/core';
import { MaterializeDirective } from 'angular2-materialize';
@Component({
  selector: 'my-app',
  directives: [MaterializeDirective],
  templateUrl: 'app/views/mainLayout.html',
  styleUrls: ['/app/css/mainLayout.css']
})
export class AppComponent { }

这是我的工作目录

|
|-app
|  |-css
|  |  |-mainLayout.css
|  |-views
|  |  |-mainLayout.html
|  |
|  |-app.component.ts
|  |-main.ts
|
|-node_modules
|  |-(....)
|-typings
|  |-globals
|  |  |-(...)
|  |-index.d.ts
|-package.json
|-systemjs.config.js
|-tsconfig.json
|-typings.json

还有一件事。我认为——无论template: 声明如何——似乎某些路径设置错误。 *.js 文件加载成功，但 *.map 文件加载不成功。

[1] 16.06.21 20:17:15 200 GET /node_modules/rxjs/Subject.js
[1] 16.06.21 20:17:15 404 GET /node_modules/systemjs/dist/Subject.js.map

喜欢这个

Answer 1

试试

@Component({
  selector: 'my-app',
  directives: [MaterializeDirective],
  templateUrl: './app/views/mainLayout.html',
  styleUrls: ['/app/css/mainLayout.css']
})

主要区别在于'./app/。这使得 Angular 在当前根 /app/views/ 中查找“mainLayout.html”。

Answer 2

虽然我不知道发生了什么，但我还是以某种方式解决了问题。很少有重启 npm 和 app/views/mainLayout.html 是解决方案。但 angular2 仍然在错误的路径中找到 .map。如果有人有想法，请告诉我为什么会这样。