使用相對路徑templateUrl在Angular2 +的WebPack

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'app', 
    styleUrls: ['./app.component.less'], 
    templateUrl: './app.component.html' 
}) 
export class AppComponent { 
    name:string = 'Demo' 
}

當使用templateUrl和styleUrls相對路徑，我得到：錯誤404，未找到文件：使用相對路徑templateUrl在Angular2 +的WebPack

zone.js：101 GET http://localhost/app.component.html 404（未找到）

代碼：https://github.com/Dreampie/angular2-demo

我覺得這不是好的設計，因爲不同的情況下可以建目錄是不一樣的，這我可以改變相對於當前路徑？

raw-loader可以解決這個問題，但html-loader，less-loader不是template工作，styles，它只有在string工作，爲什麼不能支持他們呢？

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'app', 
    styles: [require('./app.component.less')], 
    template: require('./app.component.html') 
}) 
export class AppComponent { 
    name:string = 'Demo' 
}

得到其他錯誤：

browser_adapter.js:77 EXCEPTION: Error during instantiation of Token Promise<ComponentRef>!.BrowserDomAdapter.logError 
browser_adapter.js:77 ORIGINAL EXCEPTION: Expected 'styles' to be an array of strings.

來源

2016-04-23 Dreampie

讓我補充一些更多的信息。

Angular爲什麼不能從組件文件的位置計算HTML和CSS URL？

不幸的是，該位置不知道。 Angular應用程序可以以多種方式加載：從單個文件，從SystemJS軟件包或從CommonJS軟件包中加載，等等。有了這種加載策略的多樣性，要在運行時告訴這些文件實際駐留的位置並不容易。

Angular可以確定的唯一位置就是index.html主頁的URL。因此，默認情況下，它會解析相對於index.html的URL的模板和樣式路徑。這就是我們之前使用app/base路徑前綴編寫CSS文件URL的原因。

Official Angular Docu

來源

2016-04-23 20:44:34

我認爲從根路徑讀取是沒有很好的設計，因爲在不同的情況下可能會建立目錄不一樣，我可以將它改爲相對當前路徑嗎？ – Dreampie

的./（單點）表示法適用於TS路徑而已，它不會與HTML或CSS路徑工作。

這些路徑是相對於index.html的，所以要根據您的文件結構，這應該工作

@Component({ 
    selector: 'app', 
    styleUrls: ['app.component.less'], 
    templateUrl: 'app.component.html' 
})

來源

2016-04-23 18:12:23

沒有，還不能運行，因爲該文件是隻讀從根目錄 – Dreampie

開始再拉你的'index.html'超出'src'到根目錄並將路徑改爲'src/app.component.html'，我認爲這應該是第一位的，爲什麼你要把'index.html '在一些孩子目錄？ –

如果我有一些其他模塊，我想把模板本身模塊directoty，所以我必須從根寫，謝謝你的幫助，現在我用'raw-loader'來解決它 – Dreampie

你需要嘗試

@Component({ 
    selector: 'app', 
    template: require('./app.component.html'), 
    styles: [ 
    require('./app.component.less').toString() 
     or 
    String(require('./app.component.less')) 
     or 
    add css-to-string in your webpack conf ({test: /\.css$/, loaders: ['css-to-string', 'style', 'css']}) 
})

來源

2016-08-05 11:42:24

設置的moduleId屬性module.id的模塊相對負載，使URL相對於該組件。

@Component({ 
    moduleId: module.id, 
    selector: 'app', 
    styleUrls: ['app.component.less'], 
    templateUrl: 'app.component.html' 
})

來源

2016-09-29 21:10:06 Tim

如果使用例如SystemJS，看到我的答案在這裏：https://stackoverflow.com/a/40694657/986160

您可以使用model.id並從您的構建路徑轉換（即與JS）到一個與TS， CSS和HTML。這樣，你可以使用Angular 2中的模板和樣式的相對路徑沒有問題

@Component({ 
    moduleId: module.id.replace("/dist/", "/"), 
... 
});

來源

2016-11-19 15:55:01

我注意到在我的情況下也有同樣的錯誤。的

Expected 'styles' to be an array of strings

在我的情況的原因是css-loader這是用於加載CSS文件，並通過管道輸送到angular2-template-loader。

我從調試中瞭解到，css-loader對CSS文件中的更改有一些「智能」檢測，並且如果沒有更改，CSS文件僅通過webpack模塊沒有導出爲字符串。

因爲這只是你好字應用程序我的解決方案很簡單：用raw-loader替換css-loader。這是我的版本裝載機：

loaders: [ 
 
    { 
 
     include: [srcPath], 
 
     test: /\.js$/, 
 
     loader: 'babel', 
 
     query: { 
 
      presets: ['es2015'] 
 
     } 
 
    }, 
 
    { 
 
     include: [srcPath], 
 
     test: /\.js$/, 
 
     loader: 'angular2-template-loader', 
 
     query: { 
 
      keepUrl: true 
 
     } 
 
    }, 
 
    { 
 
     include: [srcPath], 
 
     test: /\.(html|css)$/, 
 
     loader: 'raw', 
 
     query: { 
 
      minimize: true 
 
     } 
 
    } 
 
]

來源

2016-11-30 09:26:51

-1

WebPack2不需要此的moduleId了

來源

2017-06-12 13:39:44

使用相對路徑templateUrl在Angular2 +的WebPack

回答

相關問題