Question

在我template: ~时有效，但如果我使用templateUrl: ~，则<my-app>甚至不包含Loading...和网络日志通知我成功加载的模板200 GET /app/mainLayout.html

基本上，我遵循了quick start guide angular2文档，这些就是我所做的

安装angular2-materialize by npm

import "angular2-materialize"

main.ts
在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>

在app.component.ts

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:

[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可以查找＆＃34; mainLayout.html＆＃34;在当前根/app/views/。

Answer 2

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

templateUrl不起作用

2 个答案: