[Angular 2] Component relative paths
Angular Component paths Relative
2023-09-14 09:00:53 时间
Oingial aritial --> Link
Take away:
import { Component, OnInit } from '@angular/core'; @Component({ selector : 'contacts-header', templateUrl: './header.component.html', styleUrls : ['./header.component.css'] }) export class HeaderComponent implements OnInit { }
When you use `templateUrl` & `styleUrls`, the path are relative to the application root.
So if you compoennt is put inside /src/app/header. Then way `templateUrl: './header.component.html'` is refer to 'src/header.component.html', so will report 404 error.
To way to solve the problem is introduce ´moudleId: moudle.id`.
CommonJS way:
import { Component, OnInit } from '@angular/core'; @Component({ moduleId: module.id, // fully resolved filename; defined at module load time selector: 'contacts-header', templateUrl: 'header.component.html', styleUrls: ['header.component.css'] }) export class HeaderComponent implements OnInit { }
//tsconfig.json { "compilerOptions": { "module": "commonjs", "target": "es5" } }
SystemJS:
import { Component, OnInit } from '@angular/core'; @Component({ moduleId: __moduleName, // fully resolved filename; defined at module load time selector: 'contacts-header', templateUrl: 'header.component.html', styleUrls: ['header.component.css'] }) export class HeaderComponent implements OnInit { }
JSPM:
// If we decide to use JSPM, we use the typescriptOptions configuration format in the config.js file: SystemJS.config({ typescriptOptions: { module: "commonjs", emitDecoratorMetadata: true, experimentalDecorators: true }, transpiler: false, baseURL: "/dist", map: { app: 'src', typescript: 'node_modules/typescript/lib/typescript.js', angular2: 'node_modules/angular2', rxjs: 'node_modules/rxjs' }, packages: { app: { defaultExtension: 'ts', main: 'app.ts' }, angular2: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' } } });
Webpack:
// require import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: require('./header.component.html'), styles: [require('./header.component.css')] }) export class HeaderComponent implements OnInit { }
or
// import import { Component } from '@angular/core'; import { Component } from '@angular/core'; import headerTemplate from './header.component.html'; import headerStyle from './header.component.css'; @Component({ selector : 'my-app', template : headerTemplate, styles : [headerStyle] }) export class HeaderComponent implements OnInit { }
相关文章
- [Angular Unit Testing] Testing component with content projection
- [Angular] Refactor Angular Component State Logic into Directives
- [Angular] Component's dependency injection
- [Angular] Use Angular’s @HostBinding and :host(...) to add styling to the component itself
- [Angular Unit Testing] Testing Component methods
- [Angular] Create custom validators for formControl and formGroup
- [Angular 2] Component relative paths
- [Angular 2] Writing a Simple Angular 2 Component
- [Angular] Angular Asynchronous Form Validators
- [Angular 8 Unit testing] Testing a smart component with service injection -- 1
- [Angular] Preparing an Angular Application for Continuous Integration (CI)
- [Angular] 'providedIn' for service
- [Angular Unit Testing] Debug unit testing -- component rendering
- [Angular Directive] 3. Handle Events with Angular 2 Directives
- [Angular 2] WebStorm - Managing Imports
- SAP Spartacus里Commerce后台CMS Component和前台Angular的一一映射关系
- Angular 依赖注入 UseClass 和 UseExisting 的区别 - 一个实际的测试例子
- Angular Component 的 renderer 创建机制以及 Angular 版本号的确定方式
- Angular 路由时如何在 Component 之间传递参数
- Angular Component class属性初始化和构造函数执行的先后顺序
- Angular应用内路由(In App Route)的最佳实践
- Angular 父子Component的数据绑定实现