Angular 2-Webpack 2-模板加载器不适用于templateUrl [英] Angular 2 - Webpack 2 - template-loader not working with templateUrl
问题描述
我为我的应用程序创建了一个最小的webpack示例,我尝试使用带有"./file.name.html"的templateUrl进行编译.但是,我的应用程序显示的唯一内容是索引"页面上templateUrl的名称"./file.name.html".该应用程序似乎可以正常运行,因为控制台和
I've created a minimal webpack example for my Application and I try to use templateUrl with "./file.name.html" to get compiled. But the only thing my Application shows is the name of the templateUrl "./file.name.html" on my Index page. The applications seems to work, because there are no errors in the console and the
<app>... Loading </app>
不再显示.在尝试使用webpack之前,我已经使用过systemJs,并且我的App运行良好.因此,我认为这不是应用程序问题.
is not shown any more. Before I tried to use webpack I've used systemJs and My App was working very well. So I don't think its a app problem.
我的起始文件名为boot.ts
my starting file name is boot.ts
/// <reference path="../typings/index.d.ts" />
import 'core-js/es6';
import 'core-js/es7/reflect';
import "zone.js/dist/zone";
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
app.component定义类似于
the app.component definition looks like
.... Imports
@Component({
selector: 'sxp-app',
templateUrl: "./app.component.html"
})
export class AppComponent { ... }
我的webpack.config.js
my webpack.config.js
var path = require('path');
module.exports = {
entry: "./App/boot.ts",
output: {
path: path.join(__dirname, './Scripts/dist'),
filename: "bundle.js"
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts$/,
loader: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'raw-loader'
}
]
}
};
package.json
the package.json
{
"scripts": {
"start": "webpack-dev-server --inline --progress --port 8080",
"build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
},
"dependencies": {
"@angular/common": "~2.2.0",
"@angular/compiler": "~2.2.0",
"@angular/core": "~2.2.0",
"@angular/forms": "~2.2.0",
"@angular/http": "~2.2.0",
"@angular/platform-browser": "~2.2.0",
"@angular/platform-browser-dynamic": "~2.2.0",
"@angularclass/hmr": "~1.2.2",
"@angularclass/hmr-loader": "~3.0.2",
"@angular/router": "~3.2.0",
"@angular/upgrade": "~2.2.0",
"core-js": "^2.4.1",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.26",
"ui-router-ng2": "1.0.0-beta.3"
},
"devDependencies": {
"@types/node": "^6.0.51",
"@types/requirejs": "2.3.1",
"angular2-router-loader": "^0.3.4",
"angular2-template-loader": "^0.6.0",
"css-loader": "0.26.0",
"file-loader": "0.9.0",
"html-loader": "0.4.4",
"html-webpack-plugin": "2.24.1",
"raw-loader": "0.5.1",
"rimraf": "~2.5.4",
"style-loader": "0.13.1",
"typescript": "^2.0.10",
"typings": "2.0.0",
"webpack": "2.1.0-beta.27",
"webpack-dev-server": "2.1.0-beta.12",
"webpack-merge": "0.17.0",
"webpack-notifier": "^1.4.1"
}
}
和tsconfig.json
and the tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"types": [
"node"
]
},
"awesomeTypescriptLoaderOptions": {
"useWebpackText": true
},
"exclude": [
"node_modules",
"dist",
"typings/main",
"typings/index.d.ts"
],
"compileOnSave": true
}
我正在使用Ui-router,并且看到加载了正确的url,但是它仅显示模板文件名,例如"./appHeader.component.html",但没有模板.
I am using Ui-router and I see that the right url is loaded, but its only showing the template Filenames like "./appHeader.component.html" but no Template.
推荐答案
我找到了我的问题!
请勿使用
templateUrl: \`./app.component.html`
这将仅在您的应用中呈现"./app.component.html"
this will render just "./app.component.html" in your app
使用常规引号,如下所示:
Use normal quotation marks like the following:
templateUrl: './app.component.html'
templateUrl: "./app.component.html"
这篇关于Angular 2-Webpack 2-模板加载器不适用于templateUrl的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!